配置

流程

• 配置有三种

注意

1. 工具栏配置

2. 编辑器配置

3. 菜单配置

工具栏配置

getConfig

可通过toolbar.getConfig查看工具栏的默认配置

获取实例如下

onMounted(() => {
  setTimeout(() => {
    const toolbar = DomEditor.getToolbar(editorRef.value);
    console.log("-------");
    console.log(toolbar.getConfig());
    console.log("--------");
  }, 1500);
});

• 结果

注意

1. toolbarKeys 重新配置工具栏,显示哪些菜单,以及菜单的排序,分组

2. insertKeys 在当前的 toolbarKeys 的基础上,继续插入新的菜单,自定义扩展等等

3. excludeKeys 排除项,在 toolbarKeys 的基础上,排除某些菜单,哪怕 toolbarKeys 配置了,也会被排除

4. modalAppendToBody 讲菜单弹出的 modal 添加到 body 下,并自定义 modal 的定位和其他样式

toolbarKeys

重新配置工具栏,显示哪些菜单,以及菜单的排序,分组

• toolbar.getConfig().toolbarKeys 查看当前默认的配置

• editor.getAllMenuKeys() 查询编辑器注册的所有菜单 key (可能有的不在工具栏上)

const toolbarConfig = {
  toolbarKeys: [
    "bold",
    "underline",
    "italic",
    "through",
    "code",
    "sub",
    "sup",
    "clearStyle",
    "color",
    "bgColor",
    "fontSize",
    "fontFamily",
    "indent",
    "delIndent",
    "justifyLeft",
    "justifyRight",
    "justifyCenter",
    "justifyJustify",
    "lineHeight",
    "insertImage",
    "deleteImage",
    "editImage",
    "viewImageLink",
    "imageWidth30",
    "imageWidth50",
    "imageWidth100",
    "divider",
    "emotion",
    "insertLink",
    "editLink",
    "unLink",
    "viewLink",
    "codeBlock",
    "blockquote",
    "headerSelect",
    "header1",
    "header2",
    "header3",
    "header4",
    "header5",
    "todo",
    "redo",
    "undo",
    "fullScreen",
    "enter",
    "bulletedList",
    "numberedList",
    "insertTable",
    "deleteTable",
    "insertTableRow",
    "deleteTableRow",
    "insertTableCol",
    "deleteTableCol",
    "tableHeader",
    "tableFullWidth",
    "insertVideo",
    "uploadVideo",
    "editVideoSize",
    "uploadImage",
    "codeSelectLang",
  ],
};

excludeKeys

如果仅仅想排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置

排除项,在 toolbarKeys 的基础上,排除某些菜单,哪怕 toolbarKeys 配置了,也会被排除

toolbarConfig.excludeKeys = [
  "headerSelect",
  "italic",
  "group-more-style", // 排除菜单组，写菜单组 key 的值即可
];

insertKeys(后期会详细阐述)

前提

// 编辑器模式

const mode = ref("default"); // simple或者default;

可以在当前 toolbarKeys 的基础上继续插入新菜单，如自定义扩展的菜单。

toolbarConfig.insertKeys = {
  index: 5, // 插入的位置，基于当前的 toolbarKeys
  keys: ["menu-key1", "menu-key2"], // 对应的key值
};

modalAppendToBody(绑定到元素)

将菜单弹出的 modal 添加到 body 下，并自定义 modal 的定位和其他样式。

toolbarConfig.modalAppendToBody = true;