vue3wangeditor 自定义字号

要在 Vue3 WangEditor 中自定义字号，可以按照以下步骤进行操作：

1. 打开 Vue3 WangEditor 的配置文件，找到 `menus` 属性。
2. 在 `menus` 属性中找到 `fontSize` 对象，它表示字号菜单。将 `fontSize` 对象中的 `list` 属性修改为自定义的字号列表，例如：

{
    title: '字号',
    type: 'dropMenu',
    cssClass: 'wangeditor-menu-img-size',
    // 自定义字号列表
    list: [
        { value: '16px', name: '16' },
        { value: '18px', name: '18' },
        { value: '20px', name: '20' },
        { value: '24px', name: '24' },
        { value: '28px', name: '28' },
        { value: '32px', name: '32' }
    ]
}

3. 在 `menus` 属性中找到 `fontfamily` 对象，它表示字体菜单。将 `fontfamily` 对象中的 `cssClass` 属性修改为一个新的 CSS 类名，例如：

{
    title: '字体',
    type: 'dropMenu',
    // 修改 CSS 类名
    cssClass: 'wangeditor-menu-img-font-family',
    // 字体列表
    list: [
        { value: '宋体', name: '宋体' },
        { value: '微软雅黑', name: '微软雅黑' },
        { value: '楷体', name: '楷体' },
        { value: '黑体', name: '黑体' },
        { value: '仿宋', name: '仿宋' },
        { value: '隶书', name: '隶书' }
    ]
}

4. 在 CSS 文件中定义新的 CSS 类名，例如：

.wangeditor-menu-img-size .wangEditor-drop-menu li {
    font-size: 14px;
    cursor: pointer;
}
.wangeditor-menu-img-size .wangEditor-drop-menu li.selected {
    background-color: #f0f0f0;
}
.wangeditor-menu-img-font-family .wangEditor-drop-menu li {
    font-family: 'Microsoft YaHei',sans-serif;
    cursor: pointer;
}
.wangeditor-menu-img-font-family .wangEditor-drop-menu li.selected {
    background-color: #f0f0f0;
}

5. 保存文件并重新加载 Vue3 WangEditor，就可以看到自定义的字号和字体菜单了。