vue项目中添加wang编辑器

任何web项目，都要用到文本编辑器，之前的.net项目我也是用的wang编辑器，轻量级，功能全，全中文文档和社区，官方还有qq群供大家答疑(虽然基本上都解决不了啥问题🤣)，这次使用vue项目，也想用用wang，毕竟熟悉了么，这里对wang编辑进行了组件化封装，这样需要使用的页面就可以重复简单的使用了。以下是针对vue2的配置，vue3略有不同，vue3的同学就不要往下读了。

vue版本：2.6.12，脚手架版本：4.3.1，wang编辑器版本：4.6.12

首先安装

    npm install wangeditor --save

commponent文件夹下，创建WEditor.vue，我这里逐块解释代码，首先引入模块

    <template>
        <div id="editor"></div>
    </template>
    <script>
    import W from 'wangeditor'
    import Vue from 'vue'
    import ajax from 'utils/ajax' // 自己封装了axios
    export default {
        data () {
        return {
            editor: null
        }
    },

在实例化编辑器之后，我先添加了一个自定义菜单，查看源码的功能，由于此功能不是所有人都需要，而且代码量非常大，所以我在另外的一篇文章中专门介绍了，有需要的可以点击这里。

之后修改默认的alert提示，原生的alert太不友好了，我用element的内置组件替换。

    mounted () {
        const editor = new W('#editor')        //这里我先注册了一个查看源码的自定义菜单，代码未贴
        //用element组件的提示框代替默认的alert提示框
        editor.config.customAlert = (s, t) => {        switch (t) {
            case 'success':
            Vue.prototype.$message.success(s)
            break
            case 'info':
            Vue.prototype.$message.info(s)
            break
            case 'warning':
            Vue.prototype.$message.warning(s)
            break
            case 'error':
            Vue.prototype.$message.error(s)
            break
            default:
            Vue.prototype.$message.info(s)
            break
            }
     }

然后是配置菜单，默认的有那么多菜单，实际中其实根本不需要那么多，也没必要开放那么多。

配置里可以有两种方式，一种是包括，一种是排除，两者不能同时使用，如果你需要绝大部分菜单，仅仅是个别几个不需要，那就用排除。

    // 下面这段是排除
    // editor.config.excludeMenus = ['emoticon', 'video']
    editor.config.menus = [
    'head',
    'bold',
    'underline',
    'strikeThrough',
    'link',
    'emoticon',
    'image',
    'video',
    'table',
    'code',
    'undo',
    'redo'
    ]

接下去是插入代码模块，作为技术类博客，代码高亮是必不可少的，不过在wang编辑器里，插入代码踩到很多坑，我就另外一篇文章专门介绍了，这里就不写了，可以点击这里。

之后是更改默认的粘帖样式过滤，官方的说话是：

从其他地方（如网页、word 等）复制文本到编辑器中，编辑器会默认过滤掉复制文本的样式，这样可以让编辑器内容更加简洁。因为复制过来的文本样式，可能会比较混乱，且不可控。

不过项目需求，我要自定义过滤的方式，大致的就是把所有段落用<p></p>标签包裹，大家可以根据实际需求处理

        // 配置粘贴文本的内容处理
        editor.config.pasteTextHandle = function (pasteStr) {
        // 对粘贴的文本进行处理，然后返回处理后的结果
            return pasteStr.replace(/<\/?.+?>/g,'</p><p>')
            .replace(/(<\/p><p>)+/g, '</p><p>')
        }

之后是图片上传配置，由于项目需求不能使用默认的上传，即直接指定路径editor.config.uploadImgServer = '/article/upload'是不会成功的，自己封装了axios，里面包括了token等参数，需要通过formdata的方法上传，后端是node开发的，接受图片上传，这里只贴一下前端代码，如果需要node的代码可以给我留言。

    editor.config.uploadImgServer = 'article/upload2' // 后端地址
    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif'] //允许的类型
    editor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 2M
    editor.config.uploadImgMaxLength = 1 // 默认上传几张
    // 使用自定义的上传方法
    editor.config.customUploadImg = function (resultFiles, insertImgFn) {
        const formData = new FormData()        // img是后端node必须要的参数，否则上传不成功
        formData.append('img', resultFiles[0])
        formData.append('type', 'article')
        ajax({ // 自己封装了axios
            method: 'post',
            url: '/article/upload',
            data: formData,
            transformRequest: null // 把默认配置里的取消掉
        })
        .then((res) => {
            insertImgFn(res.data)
        })
        .catch((err) => {
            console.log(err)
        })
        }
    editor.create()
    this.editor = editor
    },

之后就是定义三个方法，可以获取和设置编辑器的内容。

    beforeDestroy () {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
    },
    methods: {
        getHtml () {
            return this.editor.txt.html()
    },
        setHtml (val) {
            this.editor.txt.html(val)
    },
        getTxt () {
            return this.editor.txt.text()
        }
    }

在需要使用此组件的方法，引入即可

    import Wang from 'components/common/WEditor.vue'    <el-form-item label="正文"  prop="content">        <Wang ref="wang"></Wang>    </el-form-item>