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

布满荆棘的人生 2022-01-11 03:09 1628阅读 0赞

### 文章目录 ###

*  效果预览
 *  前端代码
 *  js
 *  提交时
 *  点击图标

# 效果预览 #

![在这里插入图片描述][20190619142228776.gif]

这里尝试过自定义富文本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框架并重写样式

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

[20190619142228776.gif]: /images/20220111/cc47b8ba75854aa8b181c2941bead5fb.png