VUEリッチテキストエディタ

ダウンロード：

 NPM VUE-クイル・エディタ--saveをインストール

main.js導入

// 富文本编辑器 
'VUE-クイル・エディタ'からインポートVueQuillEditor 。
インポート 'クイル/ DIST / quill.core.css' 
インポート 'クイル/ DIST / quill.snow.css' 
インポート 'クイル/ DIST / quill.bubble.css'

Vue.use（VueQuillEditor）。

COMPONENTS：

  <DIV CLASS = "FU"> 
      <quill- エディタ
        クラス = "エディタ" 
        REF = "myTextEditor" 
        V -model.trim = "内容" 
        ：オプション = "editorOption" 
        @blur = "onEditorBlur（$イベント）" 
        @focus = "onEditorFocus（$イベント）" 
        @ready = "onEditorReady（$イベント）" 
        @change = "onEditorChange（$イベント）" 
      > </クイルエディタ> 
    </ div>

入力ボックスヘッドを追加します。

データに追加します

// リッチテキストエディタヘッダ
      editorOption：{ 
        モジュール：{ 
          ツールバー：[ 
            [ "太字"、 "斜体"、 "下線"、 "ストライク"]、// 太字斜体下線取り消し 
            [ "BLOCKQUOTE"、「コード-ブロック"]、// 参照ブロック 
            [{ヘッダ:. 1}、{ヘッダ：2}] // 1,2-レベル見出し 
            [{リスト："順序付け「}] // 順序付け、順序付けられていないリスト 
            [{スクリプト： "サブ"}、{スクリプト： "スーパー"}]、// 上付き/添字 
            [{インデント： "-1"}、{インデント： "+ +1"}]、// インデント 
            [{方向： "RTL"}]、 // テキスト方向
            [{色：[]}、{背景：[]}]、// {色：[]}、フォント色、フォント、背景色 
            [{フォント：[]}]、// フォントタイプ 
            [{ALIGN：[] }]、// アライメント 
            [ "クリーン"]、// クリアテキスト 
            [ "リンク"、 "イメージ"] // 、リンク、画像、動画 
          ] // ツールのメニューバーの設定
        }、
        プレースホルダ：「してくださいここに「製品の説明を追加します。// プロンプト 
        readyOnly：偽、// 読み取り専用かどうか 
        のテーマ：」雪」、// テーマ雪/バブル 
        構文：真に、//構文はチェックし 
        て[編集]を：「」
      }

それは長い道のりです。

そして、JSを追加します。

    // 失われたフォーカス
    onEditorBlur（編集）{}
     // 取得フォーカス
    onEditorFocus（編集）{}
     // 開始
    {}（編集）onEditorReady、
     // 値が変化
    onEditorChange（編集）{ 
       この .edit = エディタ; 
    }

CSS：

<スタイルスコープ> 
.functional { 
  高さ：473px; 
  幅：1120px; 
  テキスト - 整列：左; 
  国境：1pxの#eee固体; 
  背景：#FFF; 
  マージン：40ピクセルオート; 
} 
.editor { 
  ライン -height：ノーマル！重要; 
  幅：1120px; 
  高さ：430px; 
} 
の.Ql - エディタ{ 
  線 -height：2.42 。
} 
の.Ql -snowの.Ql -ツールチップ[データモード= "リンク" ] :: {前
  内容： "请输入链接地址：" 。
} 
の.Ql -snow a.ql-の.Ql-tooltip.ql-編集作用:: {後
  境界を -右：0PX。
  内容：「保存」。
  パディング - 右：0PX。
} 

の.Ql -snowの.Ql -ツールチップ[データモード= "ビデオ" ] ::前{ 
  内容： "请输入视频地址：" 。
} 

の.Ql -snowの.Ql-picker.qlサイズの.Ql-picker- ラベル::前に、
の.Ql -snowの.Ql-picker.qlサイズの.Ql-picker- 項目:: {前
  内容： "14px" ; 
} 
の.Ql -snowの.Ql-picker.qlサイズの.Qlピッカーラベル[データ値= "小" ] ::前に、
の.Ql -snowの.Ql-picker.qlサイズの.Qlピッカー項目[データ値=「小」] ::"10pxの"; 
} 
の.Ql -snowの.Ql-picker.qlサイズの.Qlピッカーラベル[データ値= "大" ] ::前に、
の.Ql -snowの.Ql-picker.qlサイズの.Qlピッカー項目[データ値=「大」] :: {前
  内容：「18px」。
} 
の.Ql -snowの.Ql-picker.qlサイズの.Qlピッカーラベル[データ値= "巨大" ] ::前に、
の.Ql -snowの.Ql-picker.qlサイズの.Qlピッカー項目[データ値=「巨大」] :: {前
  内容：「32PX」。
} 

の.Ql -snowの.Ql-picker.qlヘッダの.Ql-picker- ラベル::、前
の.Ql -snowの.Ql-picker.qlヘッダの.Ql-picker- 項目:: {前
  コンテンツ：「文本」; 
} 
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカーラベル[データ値= "1" ] ::前に、
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカー項目[データ値= "1" ] :: {前
  内容： "标题1" 。
} 
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカーラベル[データ値= "2" ] ::前に、
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカー項目[データ値= "2" ] :: {前
  内容： "标题2" 。
} 
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカーラベル[データ値= "3" ] ::前に、
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカー項目[データ値=「3」; 
} 
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカーラベル[データ値= "4" ] ::前に、
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカー項目[データ値= "4" ] :: {前
  内容： "标题4" 。
} 
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカーラベル[データ値= "5" ] ::前に、
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカー項目[データ値= "5" ] :: {前
  内容： "标题5" 。
} 
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカーラベル[データ値= "6" ] ::前に、
の.Ql -snowの.Ql-picker.qlヘッダの.Qlピッカー項目[データ値=「6」 
  内容： "标题6" 。
} 

の.Ql -snowの.Ql-picker.qlフォントの.Ql-picker- ラベル::前に、
の.Ql -snowの.Ql-picker.qlフォントの.Ql-picker- 項目:: {前
  内容：「标准字体" ; 
} 
の.Ql -snowの.Ql-picker.qlフォントの.Qlピッカーラベル[データ値= "セリフ" ] ::前に、
の.Ql -snowの.Ql-picker.qlフォントの.Qlピッカー項目[データ値= "セリフ" ] :: {前
  内容： "衬线字体" 。
} 
の.Ql -snowの.Ql-picker.qlフォントの.Qlピッカーラベル[データ値= "等幅" ] ::前に、
の.Ql-snowの.Ql-picker.qlフォントの.Qlピッカー項目[データ値= "等幅"] :: {前
  内容： "等宽字体" 。
} 
.SizeTiShi { 
  フロート：右。
  フォント - サイズ：12ピクセル; 
  色：＃ 999 ; 
  テキスト - 整列：右; 
  余白 - 右：20ピクセル; 
  マージン - トップ：は50px; 
}
 </スタイル>

図：

完成

VUEリッチテキストエディタ

おすすめ