Vue2中使用富文本编辑器WangEditor

学习笔记，仅基于个人的使用

1.优势：

富文本编辑器WangEditor，开源，免费，由国人开发，中文友好，可用于Vue和React框架。

图一. 样式和效果展示

2.安装：

官方安装网页：https://www.wangeditor.com/v5/installation.html

在终端运行下面的代码，通过npm安装WangEditor富文本编辑器及其Vue.js组件。

npm install wangeditor/editor
npm install wangeditor/editor-for-vue

3.引入富文本编辑器模板

官方教程界面：用于 Vue React | wangEditor

3.1.template

<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

3.2.script

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

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>

3.3.style

注意，千万不要忘记引入样式的这一行

<style src="@wangeditor/editor/dist/css/style.css"></style>

4.配置

关于配置方面就说说实际遇到的

4.1.工具栏配置

因为功能上的要求是一个纯文本的编辑器，所以要删除上传图片，上传视频等按钮，这里使用excludeKeys。以删除上传视频选项为例。

可以通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置，来查找按钮的key。

toolbarConfig: { 
    excludeKeys: [
        'uploadVideo'
    ]
},

图2和图3.删除上传视频按钮的前后效果对比

4.2.菜单配置

需要要求更改富文本编辑器的初始行宽和字体大小，但是官网的给出的模板在vs code中出现了错误，菜鸟不知道为什么。

图4.报错

于是我改为了下面的格式，上半段代码自定义了行高可选范围，下半段声明了初始样式。

editorConfig: { 
    placeholder: '请输入内容...',
    MENU_CONF: {
        lineHeight: {
            lineHeightList: ['0.5', '1', '1.5', '2', '2.5']
        }   
    }
},
defaultContent : [{
    type: 'paragraph',
    lineHeight: '1.5',
    children: [
        { text: '', fontSize: '15px' },
    ]
}]

特殊：一个界面两个文本框

配置信息可以共用，但是组件要分开调用，否则输入值，传参的时候会产生问题。

修改template的代码

<Toolbar
    style="border-bottom: 1px solid #ccc"
    :editor="editor1"
    :defaultConfig="toolbarConfig"
    :mode="mode"
/>
<Editor
    style="height: 300px; overflow-y: hidden;"
    v-model="form.responsibilities"
    :defaultContent="defaultContent"
    :defaultConfig="editorConfig"
    :mode="mode"
    @onCreated="onCreated1"
/>

<Toolbar
    style="border-bottom: 1px solid #ccc"
    :editor="editor1"
    :defaultConfig="toolbarConfig"
    :mode="mode"
/>
<Editor
    style="height: 300px; overflow-y: hidden;"
    v-model="form.responsibilities"
    :defaultContent="defaultContent"
    :defaultConfig="editorConfig"
    :mode="mode"
    @onCreated="onCreated1"
/>

修改style的代码

editor1: null,
editor2: null,

onCreated1(editor1) {
    this.editor1 = Object.seal(editor1) 
},
onCreated2(editor2) {
    this.editor2 = Object.seal(editor2) 
},

5.将存储的信息展示在其他地方

富文本编辑器将内容以HTML字符串的形式存储，包含了文本内容以及格式化样式（例如字体、颜色、大小、加粗、斜体等）和其他元素（如图片、链接、表格等）的标记信息。

在需要展示或编辑这些富文本内容时，可以将存储的HTML字符串解析并渲染成可视化的富文本内容。我在表单中输出了存储的文本内容。

<td v-html="data">

图5.富文本编辑器输入

图6.富文本编辑器输出