vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计

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

写在前面

这有一篇文章大家先看一下，以及思考一下。 为什么都说富文本编辑器是天坑/p>

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

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

• Summernote 不推荐
• simditor 不推荐
• UEditor （ps：功能强大，全面，老牌；已经与2016年停更，样式有点“老旧”）不推荐
• medium-editor （ps：只有行内的编辑，感觉不太行啊；但是如果正好有这种需求，我觉得挺好）
• wangEditor （ps：基本功能足够，样式也还行；但是提供的 以及配置和丰富性上不是很多）
• CKEditor （ps：很不错的，推荐）
• Froala （ps：也很不错，支持付费版）
• TinyMCE
• Quill （ps：不错的，推荐，本文将介绍这个的使用，以及几个自定义功能的实现）
• vue-quill-editor （ps：基于 封装的；其实我不是很推荐这个。。。直接用 就完事了）

vue 富文本

为了支持 webpack 以及模块化，优先选择支持 模式的，以及提供了 方式的富文本工具；
本文介绍 的使用姿势，以及相关注意事项。

另外再实现几个自定义的功能：
1、上传图片到服务器
2、图片编辑
3、实时字数统计

quill / vue-quill-editor

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

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

如何使用

• 安装

• 使用 参考这里

1、引入

2、初始化

定义一个 的元素
然后，在 中调用 方法，完成初始化
至于编辑的宽高，你可以在 中，自己去设置

图片上传到服务器

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

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

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

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

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

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

然后，我们来写这个 方法

对应的 源码在这里。

实时字数统计

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

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

对应的 源码在这里。

图片编辑

默认上传后的图片，不能编辑，不能设置排列方向，为了实现这个功能，我们使用了一个工具包：， 安装并且引入它。

然后：

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

在 中，加上：

这样的配置其实就可以了，就可以实现图片的编辑大小，和排列方向了。

对应的 源码在这里。

写在最后

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

项目源码

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

—————————(正文完)————————————
一个前端的学习交流群，想进来面基的，可以点击这个logo img class=”aligncenter” src=”https://raw.githubusercontent.com/Neveryu/prerender-website/master/src/assets/logo1.png” alt=”Vue学习交流” title=”Vue学习交流”>，或者手动search群号：685486827，或者 qq 扫一扫

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

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

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

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

来源：Never Yu