Tinymce 自定义工具栏

编译器自定义一个填空题的横线

import tinymce from "tinymce/tinymce";

mounted() {
    tinymce.init({});
},
computed: {
    init() {
        return {
             setup: (editor) => {
                editor.ui.registry.addButton('customInsertButton', {
                    text: '',
                    icon: "horizontal-rule",//显示在编辑器上的icon
                    onAction: function (_) {
                         //往编译器内容插入一张横线的图片
                        let a = `<img class="imgred" src="一张oss链接地址的图片"></img>`
                        editor.insertContent(a);
                    },
                });
            },
        }
    }
}

效果大概是这样

根据编译器生成的填空横线设置填空题的答案

              <div class="item" :class="showStem === true ? 'baseline' : ''">
                <span class="span"><span class="red">*</span>正确答案:</span>
                <div class="clas completion_clas" v-show="showStem">
                  <div
                    class="standard_answer"
                    v-for="(item, index) in topic.standardAnswer"
                    :key="index"
                    @click="showAnswersStatus(item)"
                  >
                    <!-- <input :style="'width:'+ parseInt(item.value.length)*14+'px'" type="text"  v-model="item.value" /> -->
                    <div class="completion_con">
                      <span class="title">填空题{{ index + 1 }}</span>
                      <div
                        v-show="!item.showAnswersEditor"
                        v-html="item.answers"
                      ></div>
                      <!-- <el-input  v-model="item.answers" placeholder="请输入内容"></el-input> -->

                      <div class="confirm" v-if="item.showAnswersEditor">
                        <div>
                          <Editor
                            v-model="item.answers"
                            :init="init"
                            class="mytinyEdit"
                          >
                          </Editor>
                        </div>
                        <div>
                          <el-button
                            type="primary"
                            style="width: 80px"
                            @click="item.showChoosed === false"
                            >确认</el-button
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="!topic.standardAnswer.length">--</div>
              </div>

  clickStem(type) {
  //编译器关闭展示内容时触发
      if (type === "stem") {
        let content = document.querySelectorAll(".imgred");
        let tems = [];
        if (content.length) {
          content &&
            content.length &&
            content.forEach((item) => {
              item.setAttribute("id", this.RndNum(5));
              tems.push({
                itemId: item.id,
                value: "",
                answers: "",
                showAnswersEditor: false,
              });
            });
        }
        this.topic.standardAnswer = tems;
        this.showStem = !this.showStem;
      } 
    },

传给后台数据需要把题目的填空题和答案相关联

 let stemValue = null;

      let index = -1;
      stemValue = String(this.stemValue).replace(
        /<img class="imgred/g,
        (...args) => {
          index++;
          return `<img class="imgred" id="${this.topic.standardAnswer[index].itemId}"`;
        }
      );
      
      /*stemValue 就是传给后台的题干的标签上加上填空题答案的id
      类似:
      <img id="答案1的id"></img><img id="答案2"></img>
      */