vue富文本编辑器vue-quill-editor的使用以及内容的渲染
vue富文本编辑器vue-quill-editor的使用方法这是vue自家的一款编辑器,支持IE10+以上的浏览器。界面比较友好,如果你需要对你的文字,图像做一些编辑。它是一个不错的选择,先上一张效果图吧!先上代码主要介绍在vue中使用,所以直接npm安装就可以,安装命令如下。npm i vue-quill-editor --save1、在main.js中引用import Vue...
·
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/dist/quill.core.css'
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="http://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: {
//富文本点击调用上传按钮然后把图片插入富文本框中
editorPicSucc(res, file) {
// 获取富文本组件实例
let quill = this.$refs.QuillEditor.quill;
// 如果上传成功
if(res){
let length = quill.getSelection().index;
quill.insertEmbed(length, 'image', res.FileUrl);
quill.setSelection(length + 1)
}else{
Message.error('图片插入失败')
}
},
}
}
</script>
然后是关于显示的问题
本人一开始看到拿到的是html数据,所以直接就用v-html指令把数据给输出出来,但是给文本设置了居中并没有效果。仔细看了后发现hml的标签上有类名。才想起来应该是没有引入插件css的问题,引入插件后,问题正常解决了。下面是关于渲染的代码
这是css的路径,建议下载下来,在html页面中正常应用就可以了
https://cdn.quilljs.com/1.3.3/quill.snow.css
// 外边的两层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>
这就是我对这个插件的理解,如果能帮到你那再好不过了,也欢迎留言指正!
更多推荐
已为社区贡献2条内容
所有评论(0)