wangEditor 富文本编辑器使用（vue2）

基本使用

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

HTML部分

    <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>

JavaScript部分 

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() ，否则会报错
        },
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})

扩展

上传图片

需要给Editor组件的defaultConfig属性进行配置，不然默认不能上传的。这里采用的是自定义函数上传，使用了二次封装的axios，请求时自动添加了token，具体代码如下：

import { axios } from '@/utils/request'

editorConfig: {
    placeholder: '请输入内容',
    MENU_CONF: {
        uploadImage: {
            //自定义上传函数
            async customUpload (file, insertFn) {
                let formdata = new FormData();
                formdata.append('file', file, file.name);
                // 图片上传
                axios({
                    method: "post",
                    url: `${window._CONFIG['domianURL']}/sys/common/upload`,
                    data: formdata
                }).then(res => {
                    // 上传成功后返回图片预览路径地址
                    insertFn(`${window._CONFIG['domianURL']}/sys/common/view/${res.message}`)
                })
            }
        },
    },
},

其他用法参考官网https://www.wangeditor.com/