vue中富文本编辑器 vue-ueditor-wrap 的使用

最近的vue项目中用到了编辑器，刚开始使用的wangeditor，但后来由于满足不了更多的需求，现换成了百度的UEditor，踩了很多坑，现在记录一下

1.下载UEditor相关静态文件

链接：https://pan.baidu.com/s/15bUMrmCBt8I69P4lzNZtIA
提取码：5ybv

2.修改UEditor目录 并引入项目

顺利解压完之后，将文件直接放到到项目的public文件中。
下载完之后，还会有ueditor.all.js和ueditor.parse.js方便查看源代码（我这里要放到线上，所以就删除了）

3.将vue-ueditor-wrap引入你要使用的组件中

3.1.下载vue-ueditor-wrap

npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap

3.2.引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
// 或者
const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS

3.3.注册组件

components: {
  VueUeditorWrap
}
// 或者在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

4.页面调用 v-model绑定数据 config配置数据

完整配置选项查看 ueditor.config.js 源码或 官方文档

UEditor 官网

UEditor API 文档

UEditor Github 地址

<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>

data(){
        return{
           msg:'',
            myConfig: {
                toolbars: [[
                    'fullscreen', 'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'emotion', 'map', 'insertcode', 'background', '|',
                    'horizontal', 'date', 'time', 'spechars', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', '|',
                    'print', 'preview',
                ]],
                autoHeightEnabled: false,// 编辑器不自动被内容撑高
                initialFrameHeight: 600, // 初始容器高度
                initialFrameWidth: '100%',// 初始容器宽度
                serverUrl:'',
                UEDITOR_HOME_URL: '/UEditor/',
                maximumWords:'100000000'
            }
        }
    },

5.修改UEditor中的配置文件ueditor.config.js中的UEDITOR_HOME_URL

这样编辑器就可以正常使用了，看下效果吧~~~