vue富⽂本编辑器vue-quill-editor的使⽤以及内容的渲染
vue富⽂本编辑器vue-quill-editor的使⽤⽅法
这是vue⾃家的⼀款编辑器，⽀持IE10+以上的浏览器。界⾯⽐较友好，如果你需要对你的⽂字，图像做⼀些编辑。它是⼀个不错的选择，先上⼀张效果图吧！
先上代码
主要介绍在vue中使⽤，所以直接npm安装就可以，安装命令如下。
npm i vue-quill-editor --save
1、在main.js中引⽤
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/ss'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, );
2、引⼊后，我们就可以正常使⽤了，在需要⽤的地⽅直接引⼊就好了
import { quillEditor } from 'vue-quill-editor'
3、在模板中直接使⽤就好了
<template>
<div>
<el-upload
// 上传的地址
action="www.***/upload/form_upload"
accept="image/png, image/jpeg"
:before-upload="beforeEditorPicUpload"
:on-success="editorPicSucc"
class="uploadImage"
>
</el-upload>
<quill-editor
v-model="content"
:options="editorOption"
ref="QuillEditor"
>
</quill-editor>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
},
data() {
retutn {
content: '',
editorOption: {
modules: {
toolbar: {
container: toolbarOptions,  // ⼯具栏
handlers: {
'image': function (value) {
// 此处点击富⽂本框的图⽚按钮调⽤的element-ui的upload插件实现图⽚的上传                    if (value) {
document.querySelector('.uploadImage input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}
}
},
methods: {
asp富文本编辑器//富⽂本点击调⽤上传按钮然后把图⽚插⼊富⽂本框中
editorPicSucc(res, file) {
/
/ 获取富⽂本组件实例
let quill = this.$refs.QuillEditor.quill;
// 如果上传成功
if(res){
let length = Selection().index;
quill.insertEmbed(length, 'image', res.FileUrl);
quill.setSelection(length + 1)
}else{
<('图⽚插⼊失败')
}
},
}
}
</script>
然后是关于显⽰的问题
本⼈⼀开始看到拿到的是html数据，所以直接就⽤v-html指令把数据给输出出来，但是给⽂本设置了居中并没有效果。仔细看了后发现hml 的标签上有类名。才想起来应该是没有引⼊插件css的问题，引⼊插件后，问题正常解决了。下⾯是关于渲染的代码
这是css的路径，建议下载下来，在html页⾯中正常应⽤就可以了
// 外边的两层div是必须要加的，⾥⾯的哪个div正常使⽤v-html指令后就可以正常显⽰
<div class="ql-container ql-snow">
<div class="ql-editor">
<div v-if="!isObj" v-html="pro.material_intro">{{pro.material_intro}}}</div>
</div>
</div>
这就是我对这个插件的理解，如果能帮到你那再好不过了，也欢迎留⾔指正！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。