Vue基于Quill

Vue基于Quill

文章目录

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

效果预览

这里尝试过自定义富文本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 < veList.length; i++) {console.log(answerIdx, veList[i]) if (answerIdx == veList[i]) {//取消点击this.answerList[answerIdx].kmAnswer = this.answerList[answerIdx].veList.splice(answerIdx, 1) return;}}this.answerList[answerIdx].kmAnswerBak = this.answerList[answerIdx].kmAnswer; // 保存一份备份this.answerList[answerIdx].kmAnswer = this.answerList[answerIdx].place(/<[^>]+>/g, "");veList.push(answerIdx);
},
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(){}, // 内容改变事件

提交时

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

for (var i = 0; i < answer.length; i++) {answer[i].kmAnswer = answer[i].place("<p>", "");answer[i].kmAnswer = answer[i].place("</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;
}