效果预览

这里尝试过自定义富文本toolbar，不过没有用，时间成本上解决，使用了自定义的方法，简单易懂

前端代码

import { quillEditor } from "vue-quill-editor"; //调用编辑器

components: {
    quillEditor,
},

<div class="edit_container">
		   <quill-editor 
		            v-model="answerItem.kmAnswer" 
		            ref="myQuillEditor" 
		            :options="editorOption" 
		            @blur="onEditorBlur($event)"
		            @focus="onEditorFocus($event)"
		            @change="onEditorChange($event)">
		    </quill-editor>
		{{answerItem.kmAnswer}}
</div>   

js

removeHtml(answerIdx) {
    for (var i = 0; i < this.removeList.length; i++) {
        console.log(answerIdx, this.removeList[i]) 
        if (answerIdx == this.removeList[i]) {
            //取消点击
            this.answerList[answerIdx].kmAnswer = this.answerList[answerIdx].kmAnswerBak;
            this.removeList.splice(answerIdx, 1) return;
        }
    }
    this.answerList[answerIdx].kmAnswerBak = this.answerList[answerIdx].kmAnswer; // 保存一份备份
    this.answerList[answerIdx].kmAnswer = this.answerList[answerIdx].kmAnswer.replace(/<[^>]+>/g, "");
    this.removeList.push(answerIdx);
},
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(){}, // 内容改变事件

提交时

注意，因为这个编辑器会自带一个p标签，所以要去掉

for (var i = 0; i < answer.length; i++) {
    answer[i].kmAnswer = answer[i].kmAnswer.replace("<p>", "");
    answer[i].kmAnswer = answer[i].kmAnswer.replace("</p>", "");
}

点击图标

使用了elementUI框架并重写样式

<i class="el-icon-menu" title="去除html" 
@click="removeHtml(answerIdx)"></i>

.el-icon-menu {
    position: absolute;
    margin: 1.5rem;
    margin-left: 28rem;
    margin-top: 1.2rem;
    font-size: 18px;
}
.el-icon-menu:hover{
	 color: #0000ffc4;
}