vue-cli3使用百度富文本编辑器

一、安装依赖

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

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

三、引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // 引入富文本组件
components: {
  VueUeditorWrap
}

四、实例化、v-model绑定数据

 <VueUeditorWrap v-model="vueMoudle" :config="ueConfig" />
 data(){
 reture{
 vueMoudle:"富文本测试数据",
 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
      }
}
}

运行代码页面展示

完成！