之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便。
近期项目vue单页面,就使用vue-quill-edit这个编辑器组件吧!
一、安装 cnpm install vue-quill-editor
二、引入
在main.js引入并注册:
Vue.use(VueQuillEditor)
三、封装组件
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;}
}
四、引入使用
components:{
myEditor:myEditorComponent
},