1.下載

npm install vue-quill-editor --save
npm install quill --save

2.main.js引入

/* 使用富文本編輯器 */
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3.組件引用html

      <div class="quill-editor">
        <quill-editor
          v-model="currentRow.content"
          ref="myQuillEditor"
          :options="editorOption"
          @keyup.16.99.native="getOption"
        ></quill-editor>
      </div>

4.data屬性

      editorOption: {
        modules: {
          toolbar: false
        },
        theme: "bubble"
      } //富文本編輯器

5.methods改變接口參數(shù)

              this.content = this.content
                .split("你想改變的文字")
                .join("<span style='color:red;'>" + 你想改變的文字 + "</span>");

6.附加改變多個關(guān)鍵字替換

    replaceText(article) {
      let replaceTextArr = [];
      replaceTextArr.push(
        "關(guān)鍵字1",
        "關(guān)鍵字2",
        "關(guān)鍵字3",
        "關(guān)鍵字4",
        "關(guān)鍵字5",
        "關(guān)鍵字6"
      );
      console.log(replaceTextArr);
      let replaceText;
      for (let i = 0; i < replaceTextArr.length; i++) {
        replaceText = replaceTextArr[i];
        /* 清空格 */
        article = article.replace(/\s*/g, "");
        /* join里是改成的文本 */
        article = article.split(replaceText).join(replaceText + " ");
        console.log(article);
      }
      console.log(article);
      return article;
    },