wangEditor如何新增自定义的字体？

Question

wangEditor如何新增自定义的字体，想要引入使用自己的字体，但是找不到办法有没有解决方案

Answer 1

editorConfig.MENU_CONF['fontFamily'] = {
    fontFamilyList: [
        // 元素支持两种形式
        //   1. 字符串；
        //   2. { name: 'xxx', value: 'xxx' }

        '黑体',
        '楷体',
        { name: '仿宋', value: '仿宋' },
        'Arial',
        'Tahoma',
        'Verdana'
    ]
}

#字体 - 菜单配置 | wangEditor

---

EDIT 2024/10/17

配置自定义字体到 wangEditor 中

其实理解一下编辑器生成的富文本内容是如何应用用户配置的字体的，就能很快明白怎么引入自定义字体了。

编辑器在指定好对应文本的字体之后就会生成对应带有 font-family 的 html 内容，比如说：

<p><span style="font-family: sans-serif">hello world</span></p>

那么自定义字体就是使用 @font-face 声明一下对应的自定义字体。然后再在 wangEditor 编辑器的 fontFamilyList 配置中添加对应的键值对就好了。

比如说我使用 @font-face 声明了一个 font-famliy 为 my-font 的字体，那么到 fontFamilyList 中添加 { name: '我的字体', value: 'my-font' } 这样的字体配置就OK了。

防止有些人可能理解不了，下面是一个示例Demo：

<template>
    <div>
        <div>
            <button @click="printEditorHtml">print html</button>
            <button @click="insertTextHandler">insert text</button>
            <button @click="disableHandler">disable</button>
        </div>
        <div style="border: 1px solid #ccc; margin-top: 10px;">
            <!-- 工具栏 -->
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
            />
            <!-- 编辑器 -->
            <Editor
                style="height: 400px; overflow-y: hidden;"
                :defaultConfig="editorConfig"
                v-model="html"
                @onChange="onChange"
                @onCreated="onCreated"
            />
        </div>
        <div style="margin-top: 10px;">
            <textarea
                v-model="html"
                readonly
                style="width: 100%; height: 200px; outline: none;"
            ></textarea>
        </div>
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
    name: 'MyEditor',
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p>hello&nbsp;world</p>',
            toolbarConfig: {
                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                // excludeKeys: [ /* 隐藏哪些菜单 */ ],
            },
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    fontFamily: {
                        fontFamilyList: [
                            '黑体',
                            '楷体',
                            { name: '自定义字体', value: 'my-font' },
                            'Arial',
                            'Tahoma',
                            'Verdana'
                        ]
                    }
                }
            }
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
        },
        onChange(editor) {
            console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
        },
        insertTextHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.insertText(' hello ')
        },
        printEditorHtml() {
            const editor = this.editor
            if (editor == null) return
            console.log(editor.getHtml())
        },
        disableHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.disable()
        }
    },
    mounted() {
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
    },
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
@font-face {
    font-family: 'my-font';
    /* 自行修改字体包路径 */
    src: url('~@/assets/font/my-font.woff2') format('woff2'),
         url("~@/assets/font/my-font.woff") format("woff");
}
</style>

---

⚠ 但是很重要的一点，虽然编辑器中现在是有这个自定义字体了，但我们在渲染富文本内容的时候也需要使用 @font-face 去声明这个自定义字体！用户浏览的时候才能在阅读的时候看到对应的字体显示在浏览器中，不然只会在 wangEditor 中编辑时显示这个自定义字体。