vue常用的文本编辑器vue-ueditor-wrap使用总结

项目地址：https://github.com/HaoChuan9421/vue-ueditor-wrap/blob/master/public/UEditor/ueditor.config.js

一、安装依赖：

首先在前端项目Terminal中执行以下命令：

如果你没安装yarn就用npm（第一条命令），安装过yarn就用(第二条命令)：简单测试安装yarn与否，可以在Terminal输入yarn命令，如果提示yarn不是内部命令就是说明你还未成功安装yarn，这时你可以选择用npm命令安装，如果npm也不是内部命令，那就说明你node.js可能也没装。

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

二、下载ueditor并将其复制到Static目录下 如图所示：

下载地址：链接：https://pan.baidu.com/s/1EkENeonqdV0nihswQkrwDA 
提取码：5k52 
（当然你也可以直接去网上下载）

三、引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module

导入后是灰色的，你需要注册一下这个组件，注册组件：

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

注册完，import VueUeditorWrap from 'vue-ueditor-wrap' 变成彩色字体，证明引入组件成功

四、实例化、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,
        },
}
}

设置完之后效果：

输入内容，进行样式编辑：

点击保存：

我们可以看到，传往后台的数据已经将样式全部保存下来了，就是图中的sm，我的v-model绑定的是ruleForm.sm。

五、展示：

业务需要将存的内容再查出来，然后展示到页面上，效果如图：

这时候只需要使用一个标签即可：

<div v-html=doc.sm></div>

doc.sm是我刚才从数据库sm字段中查出来的。

至此，已经基本满足我的业务需求了，哈哈！！！