wangEditor 初始化设置行高、字体和字体大小

临时工-冯宝宝

已于 2023-07-22 14:01:31 修改

阅读量9.8k

点赞数 5

CC 4.0 BY-SA版权

文章标签： javascript 前端 html 编辑器

于 2023-03-07 11:07:45 首次发布

本文链接：https://blog.csdn.net/weixin_42597632/article/details/129378313

这段代码展示了如何使用wangEditor创建一个编辑器实例，并设定初始内容的字体为微软雅黑，大小为16px，行高为1.5。同时，配置了onChange事件来获取编辑器中的HTML内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wangEditor 设置字体大小16px、字体微软雅黑、行高1.5

const editor = createEditor({
    selector: '#editor-container',
    html: '<p></p>',
    content: [
        {
            type: 'paragraph',
            children: [
                { text: '', fontFamily: '微软雅黑', fontSize: '16px'}
            ],
            lineHeight: 1.5
        },
    ],
    config: editorConfig,
    mode: 'default', // or 'simple'
})

wangEditor 配置完整代码

const { createEditor, createToolbar } = window.wangEditor

const editorConfig = {
    placeholder: '请输入正文...',
    onChange(editor) {
        const html = editor.getHtml()
        //console.log(html)
        _v_this.dataFrom.infor_content = html
        // 也可以同步到 <textarea>
    }
}
const editor = createEditor({
    selector: '#editor-container',
    html: '<p></p>',
    content: [
        {
            type: 'paragraph',
            children: [
                { text: '', fontFamily: '微软雅黑', fontSize: '16px'}
            ],
            lineHeight: 1.5
        },
    ],
    config: editorConfig,
    mode: 'default', // or 'simple'
})
const toolbarConfig = {}
const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
})