textarea文本编辑器改变字体颜色

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改变接口参数

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

6.附加改变多个关键字替换

    replaceText(article) {
      let replaceTextArr = [];
      replaceTextArr.push(
        "关键字1",
        "关键字2",
        "关键字3",
        "关键字4",
        "关键字5",
        "关键字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;
    },