Vue常用的富文本编辑器一(vue-quill-editor)

第三方的富文本编辑器很多,但是像 vue-quill-editor ,Maven-ditor就如同为vue量身打造的一样,在vue框架上,非常的简洁好用​。今天介绍大家关于vue-quill-editor的使用教程​。

​    ​    ​    ​    ​    ​    ​    ​    ​

这个是我在公司内部项目中使用效果

第一部​:安装

npm install vue-quill-editor

在main.js中进行引入

importVuefrom'vue'

importVueQuillEditorfrom'vue-quill-editor'

import'quill/dist/quill.core.css'

import'quill/dist/quill.snow.css'

import'quill/dist/quill.bubble.css'

在vue页面中代码如下

Vue常用的富文本编辑器一(vue-quill-editor)_第1张图片
html中,v-model为绑定的内容,:options为绑定的配置文件


Vue常用的富文本编辑器一(vue-quill-editor)_第2张图片
这里面还有很多丰富的功能,大家可以尝试
Vue常用的富文本编辑器一(vue-quill-editor)_第3张图片
单独分开的配置文件

    也可以单独写成一个配置文件,配置富文本的样式,还有编写上传图片回显的方法,然后在用到富文本的时候,将配置导入到组件中使用。​文件可以私聊我拿。

····························就是如此的简单,好用,赶紧去试试吧············································

你可能感兴趣的:(Vue常用的富文本编辑器一(vue-quill-editor))