vue專案中富文字編輯器踩坑之旅

wanpan9527發表於2019-03-04
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)
複製程式碼
  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，才能正常顯示
        <div class="preface-text ql-editor" v-html="report.foreword">
複製程式碼

相關文章