Vue2 での vue-quill-editor (リッチ テキスト エディター) の使用

インストール

npm install vue-quill-editor --save 

糸追加 vue-quill-editor

main.jsで参照されています

世界的な紹介:

「vue」から Vue をインポートします
「vue-quill-editor」から VueQuillEditor をインポートします

import 'quill/dist/quill.core.css' // スタイルをインポート
import 'quill/dist/quill.snow.css' // 雪テーマ用
import 'quill/dist/quill.bubble.css' // バブルテーマ用

Vue.use(VueQuillEditor, /* { デフォルトのグローバル オプション } */)

使用：

<テンプレート>
  <!-- 双方向データバインディング -->
  <クイルエディター
    ref="myQuillEditor"
    v-model="コンテンツ"
    :options="エディタオプション"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />

 v-model はデータ内のデータを直接バインドして使用します