iViewの+のVUE-クイル・エディタは（アップロードされた写真、ビデオを含んでいる）リッチテキストエディタを実装します

1.プラグインの導入は、（以下IE10がサポートしていないことに留意されたいです）

--saveインストールVUE-クイル-NPMエディタ
NPM インストールクイル--save（編集・ヴュー・クイルが依存しています）

2. main.js導入

「VUE-クイルエディタ」からインポートVueQuillEditor。
インポート'クイル/ DIST / quill.core.css' ; 
インポート 'クイル/ DIST / quill.snow.css' ; 
インポート 'クイル/ DIST / quill.bubble.css';

Vue.use（VueQuillEditor）

3.ページを使用します

インポート} {quillEditor「の-クイルエディタ」から

<divのV-ショー= "tuWen"クラス= "TU-WEN"> 
          < アップロードは、
            上記のID = "iviewUp" 
            ：表示 -upload-一覧= "false"を                //自動的に表示のリストをアップロードする
            ：ON = "handleSuccessQuill" -SUCCESS 
            ：フォーマット = "[ 'JPG'、 'JPEG'、 'PNG'、 'GIF']" 
            ：ヘッダ = "ヘッダ"                      //設定リクエストヘッダ
            名 = "richTextAccessory" 
            ：最大 -size = "2048" 
            複数
            ：アクション =「uploadRichTextImg "             //インターフェイスのアップロード
            スタイル ;：=「なしの表示を実行します」
            >
            <ボタンのアイコン= "IOS-クラウドアップロード・アウトライン"> </ボタン> 
        </アップロード> 
         <quill- エディタ
            のV -model = "コンテンツ"                   //内容
            REF = "myQuillEditor"                 //获取文本节点
            ：オプション =」 editorOption」             
            @blur = "onEditorBlur（$イベント）" 
            @focus = "onEditorFocus（$イベント）" 
            @change = "onEditorChange（$イベント）" 
            > 
          </クイルエディタ> 
</ div>

4、ツールバーの設定

// 工具栏配置 
    CONST toolbarOptions = [ 
      [ '太字'、 '斜体' '下線' ]、
      [{ 'サイズ'：[ '小さな'、偽、 '大' '巨大' ]}]、
      [{ '色'：[]}、{'背景'：[]}]、           // テーマのデフォルト値を持つドロップダウン 
      [{'フォント」：[]}]、
      [{ 'ALIGN' ：[]}]、
      [ '画像' ]、                                 // ボタン書式削除 
    ] 

{（）データ

  uploadRichTextImg：「」    写真をアップロードするためのインタフェースの//アドレス

   uploadList：[]、//リッチテキストエディタ、グラフィックリスト

  内容： ''、//リッチテキストの内容
 editorOption：{ //リッチテキストエディタのツールバーの
   モジュール：{ 
    ツールバー：{ 
      コンテナは：toolbarOptions、   //ツールバーの
       ハンドラ：{ 
        '画像'：関数（値）{      デフォルトでは、画像の//変換は、説教するのiViewで、今、base64です。
          （値）{IF 
              。document.querySelector（ 'INPUT番号のiviewUp'）をクリックします（）
          } {それ以外は
              this.quill.format（falseに'画像'、）; 
          } 
        } 
      } 
    、} 
  、} 
  imageResize：{}、//以降引張定義された
   プレースホルダ：「記事の内容を入力してください」
}、

contentTxt：100個の文字の前に「」、//リッチテキストエディタ


} 


メソッド：{

   onEditorChange（E）{ 

      _this =これを聞かせて、

      = e.html _this.content;   //タグ</ P>レンダリング形式（フォーカス）<P>で
       _this.contentTxt = e.text.substr（0,100）。

   } 
}

5. 挿入のSRCでアップロード成功コールバックURL

 // 画像にの正常な動作のリッチテキストエディタアップロード
         handleSuccessQuill（RES）を{ 
           にconsole.log（RES）
            // リッチテキストコンポーネントのインスタンスを取得 
            クイルは=ましょうこれを。$ Refs.myQuillEditor.quill
             // アップロードが成功した場合には
            IF （RES） {
                 // 取得カーソル位置 
                LET長= quill.getSelection（）のインデックス;.
                 // ピクチャを挿入し、画像サーバは、リンク・アドレスを返しresは 
                quill.insertEmbed（長さ、「画像」、res.data.path）
                 // 調整を最後にカーソル 
                quill.setSelection（長さ+ 1 ）
            } 他{
                // メッセージ、メッセージ導入する必要 
                Message.Errorアン（「ピクチャ挿入不良を」）
            } 
}、

iViewの+のVUE-クイル・エディタは（アップロードされた写真、ビデオを含んでいる）リッチテキストエディタを実装します

おすすめ