vue項目中富文本編輯器踩坑之旅

Tinymce

一開始選用了tinymce，遇到的問題以下：

• 主要參照的是https://github.com/PanJiaChen/vue-element-admin
• 第一個問題是引入靜態文件的路徑與此不同
• 第二個問題是當把這個放在ivew的Modal彈窗中，不能編輯，工具欄能夠點擊，可是編輯區域點了沒反應
• 後來本身寫了個彈窗，再把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)
複製代碼

3. 在模塊中使用 相關核心代碼

<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，才能正常顯示

<div class="preface-text ql-editor" v-html="report.foreword">
複製代碼