vue-ueditor-wrap

1-1 安装依赖

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

1-2 下载ueditor并将其复制到Static目录下 如图所示：

下载地址：链接：https://pan.baidu.com/s/1EkENeonqdV0nihswQkrwDA
提取码：5k52

1-3 引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' 
导入后是灰色的，你需要注册一下这个组件，注册组件：
components: {
  VueUeditorWrap
}
// 或者在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

1-4 实例化、v-model绑定数据

实例化：

v-model绑定文本编辑器内输入内容，可以用来与后台传数据。

：config绑定编辑器配置内容，可以对编辑器样式进行个性化设置：
data () {
      return {
ueConfig:{
          toolbars: [
            [
              'undo', //撤销
              'bold', //加粗
              'indent', //首行缩进
              'italic', //斜体
              'underline', //下划线
              'strikethrough', //删除线
              'subscript', //下标
              'fontborder', //字符边框
              'superscript', //上标
              'formatmatch', //格式刷
              'fontfamily', //字体
              'fontsize', //字号
              'justifyleft', //居左对齐
              'justifycenter', //居中对齐
              'justifyright', //居右对齐
              'justifyjustify', //两端对齐
              'insertorderedlist', //有序列表
              'insertunorderedlist', //无序列表
              'lineheight',//行间距
            ]
          ],
        'fontfamily':[
          { label:'',name:'songti',val:'宋体,SimSun'},
          { label:'仿宋',name:'fangsong',val:'仿宋,FangSong'},
          { label:'仿宋_GB2312',name:'fangsong',val:'仿宋_GB2312,FangSong'},
          { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
          { label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
          { label:'',name:'heiti',val:'黑体, SimHei'},
          { label:'',name:'lishu',val:'隶书, SimLi'},
          { label:'',name:'andaleMono',val:'andale mono'},
          { label:'',name:'arial',val:'arial, helvetica,sans-serif'},
          { label:'',name:'arialBlack',val:'arial black,avant garde'},
          { label:'',name:'comicSansMs',val:'comic sans ms'},
          { label:'',name:'impact',val:'impact,chicago'},
          { label:'',name:'timesNewRoman',val:'times new roman'}
        ],
          // 初始容器高度
          initialFrameHeight: 300,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口
          enableAutoSave: false,
          elementPathEnable: false,
          wordCount: false,
        },
}
}