リッチテキスト入力ボックス

最初のステップ：マウントVUE-クイル・エディタまたは二つのモジュールクイル

糸アドオンVUE-クイルエディタ- Dの
糸が追加クイル -D

そして、main.jsファイルを導入

1 'VUE-クイルエディタ'からインポートQuillEditor
 2インポート'クイル/ DIST / quill.core.css'
 3インポート'クイル/ DIST / quill.bubble.css'
 4インポート'クイル/ DIST / quill.snow.css'
 5 Vue.use（QuillEditor）

使用

<テンプレート> 
    の<div> 
        <quill- エディタ
            のV -model = "コンテンツ" 
            REF = "myQuillEditor" 
            ：オプション = "editorOption" 
            @blur = "onEditorBlur（$イベント）" @フォーカス= "onEditorFocus（$イベント）" 
            @change = "onEditorChange（$イベント）"> 
        </クイルエディタ> 
        <ボタン@クリック= "saveHtml">确定</ボタン> 
    </ div> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  データ（）{ 
    リターン{ 
      コンテンツ： ``、
      editorOption：{ 
        テーマ： '雪'、//デフォルトのエントリ
        // モジュール：CI { 
        //      ツールバー：[ 
        //          [ '太字'、 '斜体'、 '下線'、 'ストライク'] //太字、斜体、下線、取り消し線
        //          [「BLOCKQUOTE 「」コードブロック『] // 参照ブロックは
        //          [{』ヘッダ『：1}、{』ヘッダ「：2}]、キーと値のペアの形式で、タイトルを//; 1,2-フォントを表しますサイズ
        //          [{ 'リスト'： '順序付け'}、{ 'リスト'： '弾丸'}] //のリスト
        //          [{ 'スクリプト'： 'サブ'}、{ 'スクリプト'： 'スーパー'} ]、添え字// 
        //          [{ 'インデント'： '-1'}、{ 'インデント'： '+ +1'}] //インデント
        //          [{ '方向'： 'RTL'}]、テキストの向き// 
        //          [{ 'サイズ'：[ '小'、falseに、 '大'、 '巨大']}]、フォントサイズ// 
        //         [{ 'ヘッダ'：[1 、2、3、4、5、6、偽]}]、// いくつかの段階タイトル
        //          [{ 'カラー'：[]}、{ '背景'：[]}] //フォント色、フォント背景色
        //          [{ 'フォント'：[]}]、フォント// 
        //          [{ 'ALIGN =左'：[]}]、アライメント// 
        //          [ 'クリーン']、 //フォントスタイルをクリアする
        //          動画をアップロードし、写真をアップロード// [ 'ビデオを' 'イメージ'] 
        //      ] 
        // } 
      }、
    } 
  }、
  計算された：{ 
    エディタを（）{ 
      返す この$ refs.myQuillEditor.quillを。
    } 
  }、
  メソッド：{ 
    onEditorReady（編集）{} // エディタ準備 
    onEditorBlurを（）{}、//ロストフォーカスイベント 
    onEditorFocusは、（）{}、// フォーカスイベントを取得 
    onEditorChangeを（）{}、// コンテンツ変更イベント
    saveHTML（イベント）{ 
      アラート（この.content）
    } 
  } 
}
 </ SCRIPT>

クイル・エディタコンポーネントのツールバーにタイトルを追加します

オリジナルリンクします。https：//blog.csdn.net/w390058785/article/details/84346251

手順1：以下のように、クイル-title.jsファイルを作成します。

 

const titleConfig = {
  'ql-bold':'加粗',
  'ql-color':'颜色',
  'ql-font':'字体',
  'ql-code':'插入代码',
  'ql-italic':'斜体',
  'ql-link':'添加链接',
  'ql-background':'背景颜色',
  'ql-size':'字体大小',
  'ql-strike':'删除线',
  'ql-script':'上标/下标',
  'ql-underline':'下划线',
  'ql-blockquote':'引用',
  'ql-header':'标题',
  'ql-indent':'缩进',
  'ql-list':'列表',
  'ql-align':'文本对齐',
  'ql-direction':'文本方向',
  'ql-code-block':'代码块',
  'ql-formula':'公式',
  'ql-image':'图片',
  'ql-video':'视频',
  'ql-clean':'清除字体样式'
};
 
export function addQuillTitle(){
  const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect =  oToolBar.querySelectorAll('select');
  aButton.forEach(function(item){
    if(item.className === 'ql-script'){
      item.value === 'sub' ? item.title = '下标': item.title = '上标';
    }else if(item.className === 'ql-indent'){
      item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
    }else{
      item.title = titleConfig[item.classList[0]];
    }
  });
  aSelect.forEach(function(item){
    item.parentNode.title = titleConfig[item.classList[0]];
  });
}

 

使用

<script>
import { addQuillTitle } from './quill-title.js'
export default {
    mounted(){
      addQuillTitle();
    }
}