vueプロジェクトのリッチテキストエディタがピットを踏む旅

9338 ワード

javascript

Tinymce
最初にtinymceを選択しました.

は主にhttps://github.com/PanJiaChen/vue-element-admin

を参照しています.

最初の問題は、静的ファイルを導入する経路とは異なる

である.

の第二の問題は、ivewのModalの弾戸にこれを置くと編集できません.ツールバーはクリックできますが、編集エリアがポイントしています.

その後、自分でパチンコを書いて、tinymceを入れて、やっと解決しました.

第三の問題が来ました.このエディタの兄弟要素の中にドロップダウン枠があります.私はドロップダウン枠をクリックすると、tinymceに結合された値も変化します.コードの中でバインディングされた値がコピーされましたが、エディタに表示されている内容は

を更新しません.

このリッチテキストエディタを放棄します.
Vue 2-editor
これからVue 2-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です.まだ解決策がないので、あきらめるしかないです.
このisesリンク:https://github.com/davidroyer/vue2-editor/issues/104最終的にVue-quill-editorを選択しました.
主な使い方はこのブログを参考にしました.

https://blog.csdn.net/div_ma/article/details/79536634c

はnpm install vue-quill-editor --saveに

を導入する.

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)

は、関連するコアコード

をモジュールに使用する.

<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日更新

テストで問題が発見されました.つまり、これらの内容はエディタで正常に表示されていますが、内容を個別に表示するのは正常ではありません.

解決策は、容器にclass main.jsを追加してこそ、正常に

を表示することができる.

        "preface-text ql-editor" v-html="report.foreword">

フロントエンドページでエクスポート機能を実現するフロントバックグラウンドの組み合わせ