如何在vue中使用vue-quill-edit富文本编辑器组件

这篇文章将为大家详细讲解有关如何在vue中使用vue-quill-edit富文本编辑器组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

蒲城ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

一、安装  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)

三、封装组件

 
 


 .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;}
 }

四、引入使用

components:{
 myEditor:myEditorComponent
 },

关于如何在vue中使用vue-quill-edit富文本编辑器组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。