这篇文章将为大家详细讲解有关如何在vue中使用vue-quill-edit富文本编辑器组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
一、安装 cnpm install vue-quill-editor
二、引入
在main.js引入并注册：
计算
安全
数据库
网络和加速
企业服务
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)三、封装组件
<template>
<div class="quill_box">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
<script>
import Bus from "../../assets/utils/eventBus";
export default {
data() {
return {
content:'',
editorOption: {
placeholder: "请编辑内容",
modules: {
toolbar: [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ size: ["small", false, "large", "huge"] }],
[{ font: [] }],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[ "image"]
]
}
}
};
},
props:[
'contentDefault'
],
watch:{
contentDefault:function(){
this.content = this.contentDefault;
}
},
mounted:function(){
this.content = this.contentDefault;
},
methods: {
onEditorBlur() {
//失去焦点事件
// console.log('失去焦点');
},
onEditorFocus() {
//获得焦点事件
// console.log('获得焦点事件');
},
onEditorChange() {
//内容改变事件
// console.log('内容改变事件');
Bus.$emit('getEditorCode',this.content)
}
}
};
</script>
<style lang="less">
.quill_box{
.ql-toolbar.ql-snow{border-color:#dcdfe6;}
.ql-container{height:200px !important;border-color:#dcdfe6;}
.ql-snow .ql-picker-label::before {
position: relative;
top: -10px;
}
.ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg{position: relative;top:-6px;}
}
</style>四、引入使用
<my-editor :contentDefault="contentDefault"></my-editor>
components:{
myEditor:myEditorComponent
},关于如何在vue中使用vue-quill-edit富文本编辑器组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
