vue项目中富文本编辑器踩坑之旅

Tinymce

一开始选用了tinymce,遇到的问题如下:

  • 主要参照的是https://github.com/PanJiaChen/vue-element-admin
  • 第一个问题是引入静态文件的路径与此不一样
  • 第二个问题是当把这个放在ivewModal弹窗中,不能编辑,工具栏可以点击,但是编辑区域点了没反应
  • 后来自己写了个弹窗,再把tinymce放进去,终于解决了
  • 第三个问题来了,这个编辑器的兄弟元素中有个下拉框,我需要当点击下拉框时,tinymce中绑定的值也随之变化,代码中给绑定的值重新复制了,但是编辑器中显示的内容不更新
  • 放弃此富文本编辑器

Vue2-editor

接下来我投入了Vue2-editor的怀抱,本地开发一起顺利 基本配置如下:

<vue-editor id="editor1" v-model="content" :editorToolbar="customToolbar">vue-editor>
<vue-editor id="editor2" v-model="addContent" :editorToolbar="customToolbar">vue-editor>
复制代码
customToolbar: [
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'header': 1 }, { 'header': 2 }],
  [{ 'align': [] }],
  ['bold', 'italic', 'underline', 'strike'],
  [{ 'list': 'ordered' }, { 'list': 'bullet' }]
],
复制代码

但是提测后,报错

  TypeError: e.isBuffer is not a function
    at d (vue2-editor.js:1)
    at n (vue2-editor.js:1)
    at t.value (vue2-editor.js:1)
    at new t (vue2-editor.js:1)
    at new t (vue2-editor.js:1)
    at a.setQuillElement (vue2-editor.js:1)
    at a.initializeVue2Editor (vue2-editor.js:1)
    at a.mounted (vue2-editor.js:1)
    at Dt (vue.esm.js:2921)
    at Object.insert (vue.esm.js:4158)

  vue.esm.js:1741 TypeError: Cannot read property 'innerHTML' of null
    at a.value (vue2-editor.js:1)
    at wa.run (vue.esm.js:3233)
    at Rt (vue.esm.js:2981)
    at Array.<anonymous> (vue.esm.js:1837)
    at at (vue.esm.js:1758)
    
复制代码

在官网看到了这个issues,题目是:Production Build is breaking Vue2-editor #104,日期为2018-5-18,还没有解决方案,只好放弃

此issues链接:https://github.com/davidroyer/vue2-editor/issues/104

最终选择了Vue-quill-editor

主要使用方式参考了此博客 https://blog.csdn.net/div_ma/article/details/79536634c

  1. npm install vue-quill-editor --save
  2. main.js中引入
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 富文本编辑器
Vue.use(VueQuillEditor)
复制代码
  1. 在模块中使用 相关核心代码
<quill-editor 
  v-model="addContent" 
  :options="editorOption" 
  >
quill-editor>
复制代码
import { quillEditor } from 'vue-quill-editor'
components: { quillEditor },
editorOption: {
  modules: {
    toolbar: [
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'align': [] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }]
    ]
  }
},
复制代码

提测后没有报错了,开心


5月24号更新

  • 测试中发现一个问题,就是这些内容在编辑器中是正常显示的,但是把内容单独出来显示不正常
  • 解决办法是给容器增加一个classql-editor,才能正常显示
        
"preface-text ql-editor" v-html="report.foreword"> 复制代码

你可能感兴趣的:(javascript)