加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 23:30:31 所属栏目:百科 来源:网络整理
导读:之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便。 近期项目vue单页面,就使用vue-quill-edit这个编辑器组件吧! 一、安装 cnpm install vue-quill-editor 二、引入 在main.js引入并注册: Vue.use(VueQuillEditor) 三、封装组件 style lang="les

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

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

一、安装 cnpm install vue-quill-editor

二、引入

在main.js引入并注册:

Vue.use(VueQuillEditor)

三、封装组件

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读