• 写在前面
• vue 富文本
• quill / vue-quill-editor
• • 如何使用
• 图片上传到服务器
• 实时字数统计
• 写在最后

写在前面

然后，我这边有一个基于 Vue 使用 完成的富文本功能的实例：vue-cms-富文本，大家可以看一下是否满足你的需求。然后，对应的 源码在这里。

然后，话不多说，列几个现在常用的富文本插件/组件：

• Summernote 不推荐
• simditor 不推荐
• UEditor （ps：功能强大，全面，老牌；已经与2016年停更，样式有点“老旧”）不推荐
• wangEditor （ps：基本功能足够，样式也还行；但是提供的 以及配置和丰富性上不是很多）
• CKEditor （ps：很不错的，推荐）
• Froala （ps：也很不错，支持付费版）
• TinyMCE
• vue-quill-editor （ps：基于 封装的；其实我不是很推荐这个。。。直接用 就完事了）

vue 富文本

quill / vue-quill-editor

不是很推荐 ， 建议直接用 就完事了，而且 的 文档 和 也都是很直接清晰的，直接用的话，更灵活

关于 的使用还是有一些需要注意的地方，下面我们来看一下：

如何使用

• 安装

• 使用 参考这里

1、引入

2、初始化

图片上传到服务器

默认的图片上传功能是图片转成 编码字符串，纯前端玩玩还行；
项目中，这样是不太合适的，而且几十兆的那种大图片，转成 字符串是很长很长的一大串。

1、初始化覆盖默认的上传功能

• 给 自定义一个上传的方法

2、页面中加入了 的上传功能，然后使用 让上传按钮不显示；所以，点击富文本中的图片上传，就点击这个上传按钮

3、上传成功后，就把图片插入到富文本框中

• 所以，这里需要定义 的上传组件的 方法 。

然后，我们来写这个 方法

对应的 源码在这里。

实时字数统计

根据 提供的 ， 方法可以用来实现实时字数统计

拿到 以后，使用 Vue 的 来监听这个 。

对应的 源码在这里。

然后：

需要注意的是：这个 变量需要做一个全局的处理，我们可以在 中来做这个操作。（不做这一步，会 错。）

在 中，加上：

对应的 源码在这里。

写在最后

项目示例，你可以进来操作一波

项目源码

项目示例中，还自定义了一个工具栏中的功能，感兴趣可以了解一下。

写在最后：约定优于配置——-软件开发的简约原则.
——————————–(完)————————————–

我的：
个人 站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树首页概览23014 人正在系统学习中