Vue基于Quill-Editor富文本实现去除HTML标签功能

效果预览

这里尝试过自定义富文本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;
}