vue富文本编辑器组件vue-quill-edit使用教程

前端之家收集整理的这篇文章主要介绍了vue富文本编辑器组件vue-quill-edit使用教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便。

近期项目vue单页面,就使用vue-quill-edit这个编辑器组件吧!

@H_301_5@一、安装 cnpm install vue-quill-editor

@H_301_5@二、引入

在main.js引入并注册

Vue.use(VueQuillEditor)

@H_301_5@三、封装组件

Box">

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

@H_301_5@四、引入使用

components:{ myEditor:myEditorComponent },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/30025.html

猜你在找的Vue相关文章