FAQ

am-editor 支持 Vue2 吗？

引擎库 @aomao/engine 本身是 javascript 编写的，不涉及到前端框架。主要在于一些插件我们使用了前端框架渲染

下面这三个插件有区别

  • @aomao/toolbar-vue 编辑器工具栏。按钮、图标、下拉框、颜色选择器等都是复杂的 UI

  • @aomao/plugin-codeblock-vue 选择代码语言的下拉框具有搜索功能，使用前端库现有的 UI 是比较好的选择

  • @aomao/plugin-link-vue 链接输入、文本输入，使用前端库现有的 UI 是比较好的选择

这三个插件都有 vue3 的依赖，并且使用的是 antd UI 库。其它插件没有依赖任何前端框架

Vue2 插件

window is not defined, document is not defined, navigator is not defined

SSR 因为会在服务端执行 render 渲染方法，而服务端没有 DOM/BOM 变量和方法。不支持服务端渲染

提高粘贴效率/过滤粘贴样式

在粘贴的时候外部复制过来由很多样式，比如字体、字体大小、字体颜色等，类似 word 几乎每几个字都有携带这些样式，这些样式不仅会影响粘贴的效率，也有可能是不需要的。

  1. // 监听粘贴获取schema事件
  2. engine.on('paste:schema', (schema) => {
  3.     const plugins = ['fontsize', 'fontcolor', 'fontfamily'];
  4.     plugins.forEach((pluginName) => {
  5.         const plugin = engine.plugin.components[pluginName];
  6.         if (!plugin || plugin.kind !== 'mark') return;
  7.         const pluginSchema = (plugin as MarkPlugin).schema();
  8.         const schemas: SchemaMark[] = [];
  9.         if (Array.isArray(pluginSchema)) {
  10.             pluginSchema.forEach((schema) => schemas.push(schema));
  11.         } else {
  12.             schemas.push(pluginSchema);
  13.         }
  14.         schemas.forEach((rule) => {
  15.             schema.remove(rule);
  16.         });
  17.     });
  18. });

导入/导出

使用 engine 实例提供的 getHtml 和 setHtml 两个方法，以 html 为中介进行转换

可以使用第三方库或者后端 api 读取其它文档并转换为html标准格式后传回前端，调用 setHtml 设置到编辑器中

转化为其它文档格式同理，使用 getHtml 获取到 html 后进行转换

有些卡片可能需要额外的属性才能使 html 正确的还原，可以查看具体卡片插件中的 pasteHtml 方法中有哪些转换条件

导出 Markdown

使用 engine 实例提供的 getHtml 方法获取到 html，然后使用 turndown 这个库进行转换

禁用/自定义 Markdown

所有的markdown语法均使用 markdown-it 处理转换。

可以通过监听 markdown-it 和 markdown-it-token 的事件，来自定义 markdown 转换

  1. engine.on('markdown-it', (markdown) => {
  2.     // 使用 markdown-it api 启用插件
  3.     markdown.enable('markdown-it 插件名称');
  4.     // 使用 markdown-it api 禁用插件
  5.     markdown.disable('markdown-it 插件名称');
  6.     // 或者 新增插件
  7.     markdown.use(markdown - it插件);
  8. });
  9. // 默认会使用markdown-ti设置好的插件进行转换，如果有额外需求可以监听这个事件拦截，并自行调用 callback 返回字符串。如果有更复制的需求，建议使用 markdown-it 的api制作插件。
  10. engine.on('markdown-it-token', ({ token, markdown, callback }) => {
  11.     // token 为当前处理的 token
  12.     // markdown 为当前markdown-it实例
  13.     // callback 为当前处理的回调
  14.     if (token.type === 'paragraph_open') {
  15.         callback('<p>');
  16.         // 必须返回 flase
  17.         return false;
  18.     }
  19.     return true;
  20. });

icon 丢失

icon 图标是直接通过 iconfont 引入的字体图标。

  1. @font-face {
  2.     font-family: 'data-icon'; /* Project id 1456030 */
  3.     src: url('//at.alicdn.com/t/font_1456030_mvh913k905.woff2?t=1629619375484')
  4.             format('woff2'), url('//at.alicdn.com/t/font_1456030_mvh913k905.woff?t=1629619375484')
  5.             format('woff'),
  6.         url('//at.alicdn.com/t/font_1456030_mvh913k905.ttf?t=1629619375484')
  7.             format('truetype');
  8. }

如果出现不能访问的情况，我们可以把这三个文件下载下来，然后在 css 中重新定义 @font-face 并引入新的字体文件

如何定制卡片工具栏

在卡片组件的插件配置项中，配置 cardToolbars 选项

  1. new Engine(container, {
  2.     config: {
  3.         codeblock: {
  4.             cardToolbars: (items) => {
  5.                 console.log(items);
  6.                 return items.filter((item) => item.key === 'copy');
  7.             },
  8.         },
  9.     },
  10. });