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

深碍√TFBOYSˉ_ 2024-04-17 20:35 57阅读 0赞

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

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

# 写在前面 #

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

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

--------------------

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

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

# vue 富文本 #

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

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

# quill / vue-quill-editor #

> 不是很推荐 `vue-quill-editor`， 建议直接用 `quill` 就完事了，而且`quill` 的 [文档][Link 3] 和 [`api`][api] 也都是很直接清晰的，直接用的话，更灵活

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

## 如何使用 ##

*  安装

npm i quill -S

*  使用 [参考这里][Link 4]

1、引入

import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import Quill from 'quill'

2、初始化

定义一个 `<div id="quill-editor"></div>` 的元素  
然后，在 `mounted` 中调用 `initQuill` 方法，完成初始化  
至于编辑的宽高，你可以在 `css` 中，自己去设置

// 这是 methods 中的 initQuill 方法
    // 你可以在 mounted 中调用它
    // 这样就完成了 quill 的初始化
    initQuill() {
        
      const quill = new Quill('#quill-editor', {
        
        // 编辑器配置选项
        theme: 'snow',
        placeholder: 'Compose an epic...',
        debug: 'error',
        modules: {
        
          toolbar: {
        
            // 工具栏的配置项
            container: this.$options.toolbarOptions
          }
        }
      })
      this.quill = quill
      /**
       * 监听富文本变化
       * editor-change 包括 text-change、selection-change
       * 你也可以分别监听 text-change 和 selection-change
       * 文档：https://quilljs.com/docs/api/#text-change
       */
      quill.on('editor-change', this.onEditorChange)
    }

# 图片上传到服务器 #

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

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

*  给 `image` 自定义一个上传的方法

modules: {
        
    	toolbar: {
        
    	   container: this.$options.toolbarOptions,
    	   handlers: {
          // 自定义功能
    	     'image': this.$options.imageFunction
    	   }
    	 },
    	 ...
    }

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

// 自定义富文本的图片上传
    imageFunction(val) {
        
      if(val) {
        
        document.querySelector('#img-upload input').click()
      } else {
        
        this.quill.format('image', false)
      }
    }

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

*  所以，这里需要定义 `Element-UI` 的上传组件的 `on-success` 方法 `richUploadSuccess`。

<el-upload
      id="img-upload"
      action="https://httpbin.org/post"
      :multiple="false"
      :show-file-list="false"
      :on-success="richUploadSuccess"
      style="height: 10px;">
    </el-upload>

然后，我们来写这个 `richUploadSuccess` 方法

// 富文本中的图片上传
    richUploadSuccess(response, file, fileList) {
        
      /**
       * 如果上传成功
       * ps：不同的上传接口，判断是否成功的标志也不一样，需要看后端的返回
       * 通常情况下，应该有返回上传的结果状态（是否上传成功）
       * 以及，图片上传成功后的路径
       * 将路径赋值给 imgUrl
       */
      if (response.files.file){
        
        let imgUrl = response.files.file
        // 获取光标所在位置
        let length = this.quill.getSelection().index
        // 插入图片，res为服务器返回的图片链接地址
        this.quill.insertEmbed(length, 'image', imgUrl)
        // 调整光标到最后
        this.quill.setSelection(length + 1)
      } else {
        
        // 提示信息，需引入Message
        this.$message.error('图片插入失败')
      }
    }

对应的 [源码在这里][Link 2]。

# 实时字数统计 #

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

// 初始化时，已经绑定了 quill 的 editor-change 方法
    // quill.on('editor-change', this.onEditorChange)，实时监听富文本内容即可。
    // 所以，quill 的内容变动，都会调用这个方法
    onEditorChange(eventName, ...args) {
        
      if (eventName === 'text-change') {
        
        // args[0] will be delta
        // 获取富文本内容
        this.content = document.querySelector('#quill-editor').children[0].innerHTML
      } else if (eventName === 'selection-change') {
        
        // args[0] will be old range
      }
    }

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

watch: {
        
      content() {
        
        // 富文本内容长度
        this.richCurrentLength = this.quill.getLength() - 1
        let numWrapper = document.querySelector('.quill-count')
        if(this.richCurrentLength > this.richMaxLength) {
        
          numWrapper.style.color = 'red'
        } else {
        
          numWrapper.style.color = '#666'
        }
      }
    }

对应的 [源码在这里][Link 2]。

# 图片编辑 #

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

然后：

import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import Quill from 'quill'
    import ImageResize from 'quill-image-resize-module'
    
    Quill.register('modules/imageResize', ImageResize)

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

在 `webpack.base.conf.js` 中，加上：  
![在这里插入图片描述][20190921152711355.png]

[源码在这里][Link 5]，文件开头记得引入 `webpack` 哦。

`quill-image-resize-module` 引入以后，`webpack.base.conf.js` 也修改完以后，那么接下来，我们就可以来配置 `ImageResize` 功能了。就想下面这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70]

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

对应的 [源码在这里][Link 2]。

# 写在最后 #

[项目示例][Link 6]，你可以进来操作一波

[项目源码][Link 2]

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

\---------------------------(正文完)\------------------------------------  
一个前端的学习交流群，想进来面基的，可以点击这个logo ➹![Vue学习交流][Vue]，或者手动search群号：685486827，或者 qq 扫一扫

![Vue学习交流][Vue 1]

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

我的：  
个人网站： [https://neveryu.github.io/neveryu/][https_neveryu.github.io_neveryu]  
Github： [https://github.com/Neveryu][https_github.com_Neveryu]  
新浪微博： [https://weibo.com/Neveryu][https_weibo.com_Neveryu]

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

[Link 1]: https://www.zhihu.com/question/38699645
[vue-cms-]: https://neveryu.github.io/vue-cms/index.html
[Link 2]: https://github.com/Neveryu/vue-cms/blob/master/src/views/rich-editor/quill.vue
[Summernote]: https://github.com/summernote/summernote
[simditor]: https://github.com/mycolorway/simditor
[UEditor]: http://ueditor.baidu.com/website/onlinedemo.html
[medium-editor]: https://yabwe.github.io/medium-editor/
[wangEditor]: http://www.wangeditor.com/
[CKEditor]: https://ckeditor.com/
[Froala]: https://www.froala.com/wysiwyg-editor
[TinyMCE]: https://www.tiny.cloud/features
[Quill]: https://quilljs.com/
[Link 3]: https://quilljs.com/docs/quickstart/
[api]: https://quilljs.com/docs/api/
[Link 4]: https://www.npmjs.com/package/quill
[20190921152711355.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/26dbf8855ce14720b81ce03355a5299c.png
[Link 5]: https://github.com/Neveryu/vue-cms/blob/master/build/webpack.base.conf.js#L101-L106
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/822c999f78b64d59af2f6a938f73a974.png
[Link 6]: https://neveryu.github.io/vue-cms/index.html/#/rich-editor/quill
[Vue]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/87a198f59b324186a77e4c64230c231b.png
[Vue 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c10c16974be549e7847fd3b0c79c52f8.png
[https_neveryu.github.io_neveryu]: https://neveryu.github.io/neveryu/
[https_github.com_Neveryu]: https://github.com/Neveryu
[https_weibo.com_Neveryu]: https://weibo.com/Neveryu