富文本编辑器组件开发总结

使用背景

vue-li构建的vue2项目, 需要开发一个富文本组件用于考试系统里面的问答题，需求要求

• 兼容谷歌、Edge、IE11
• 控制输入字符1000
• 自定义图片上传

富文本选择

1. WangEditor富文本

• 简洁易用，使用方便
• 基于最新版本v5开发，满足控制输入字符，但不能兼容IE11
• 基于上一个版本v4开发，可以兼容IE11，控制输入字符需要自己开发。根据github的回答的方案实现后，效果不好，输入最后字符会闪现再消失
• 目前wangEditor富文本作者已经放弃维护

2. TinyMCE富文本

• 功能强大，插件丰富，但是部分功能免费
• 功能多导致整个编辑器非常重，只是需要简单功能，上这么复杂的编辑器，大材小用
• 文档繁琐，对阅读者不友好

3. Quill富文本

• 简单易用，扩展性强
• 有不少基于Quill富文本的插件，其中针对vue2的有Vue-Quill-Editor
• 如果你想找一款轻巧，不需要太多复杂功能，对代码编辑友好的编辑器，Quill 是不错的选择
• 目前维护频繁，在开发Quill 2.0版本

Vue-Quill-Editor富文本编辑器

这个是今天的主角，项目中使用的富文本插件

安装

1. 要使用Vue-Quill-Editor组件，需要先将其安装到您的Vue项目中。您可以使用npm安装：

npm install vue-quill-editor

1. 安装完成后，将组件导入到您的Vue组件中：

import { quillEditor } from 'vue-quill-editor'
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
​
export default {
  components: {
    quillEditor
  }
}

1. 在Vue组件中使用Vue-Quill-Editor组件

<template>
  <quill-editor v-model="content"></quill-editor>
</template>

这里的v-model绑定了Vue组件的data属性content，以便在编辑器中输入的内容能够被保存到Vue组件中。

配置

您可以通过设置editorOption属性来配置富文本编辑器的外观和行为。以下是一个包含一些常用选项的示例：

如何添加自定义工具栏按钮？

<template>
  <quill-editor :editorOption="editorOption"></quill-editor>
</template>
​
<script>
export default {
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: [
                // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
                ['bold', 'italic', 'underline', 'strike'],
                // 引用  代码块-----['blockquote', 'code-block']
                ['blockquote', 'code-block'],
                // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
                [{ header: 1 }, { header: 2 }],
                // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
                [{ list: 'ordered' }, { list: 'bullet' }],
                // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
                [{ script: 'sub' }, { script: 'super' }],
                // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
                [{ indent: '-1' }, { indent: '+1' }],
                // 文本方向-----[{'direction': 'rtl'}]
                [{ direction: 'rtl' }],
                // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
                [{ size: ['small', false, 'large', 'huge'] }],
                // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
                [{ color: [] }, { background: [] }],
                // 字体种类-----[{ font: [] }]
                [{ font: [] }],
                // 对齐方式-----[{ align: [] }]
                [{ align: [] }],
                // 清除文本格式-----['clean']
                ['clean'],
                // 链接、图片、视频-----['link', 'image', 'video']
                ['image']
          ]
        },
        theme: 'snow'
      }
    }
  }
}
</script>
​

这将创建一个具有自定义工具栏和主题的富文本编辑器。在这个示例中，我们添加了许多常用的工具，如加粗、斜体、下划线、删除线、标题、字体颜色、背景颜色、对齐方式、清除文本格式、链接、图片和视频等。

如何设置默认值？

要设置富文本编辑器的默认值，可以使用value属性。以下是一个示例：

<template>
  <quill-editor v-model="content" :value="defaultValue"></quill-editor>
</template>
<script>
export default {
  data() {
    return {
      content: '',
      defaultValue: '<p>默认值</p>'
    }
  }
}
</script>

在上面的示例中，我们将value属性设置为defaultValue属性的值，这将使编辑器默认显示<p>默认值</p>。

如何禁用富文本编辑器？

要禁用富文本编辑器，可以使用disabled属性。以下是一个示例：

<template>
  <quill-editor v-model="content" :disabled="true"></quill-editor>
</template>
​
<script>
export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>

在上面的示例中，我们将disabled属性设置为true，这将使编辑器变为只读状态。

如何设置富文本编辑器的高度？

要设置富文本编辑器的高度，可以使用height属性。以下是一个示例：

<template>
  <quill-editor v-model="content" :height="200"></quill-editor>
</template>
​
<script>
export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>
​

在上面的示例中，我们将height属性设置为200，这将使编辑器的高度为200px。

如何设置富文本不显示工具栏？

如果不需要任何工具栏工具 ，可以通过设置不同主题来实现

theme: 'snow' snow：有工具栏的；bubble：只有文本域的 

如何设置富文本自定义图片上传？

这里自定义图片上传 主要为了 解决文本域 字数太多以及图片压缩的问题 ，插件是支持base64图片字段长而大，上传服务器之后 获取对应的图片链接地址。

<template>
  <el-upload
      class="avatar-uploader"
      ref="uploadDrag"
      :auto-upload="false"
      accept=".png,.jpg,.jpeg"
      action="#"
      :show-file-list="false"
      :on-change="onChangeOther"
      drag
      style="display:none;"
  >
     <i  class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  <quill-editor 
     v-model="content" 
     :height="200"
     :editorToolbar="editorToolbar"
  ></quill-editor>
</template>
​
<script>
export default {
  data() {
    return {
         editorToolbar:{
                placeholder:'请输入解答',
                toolbar:{
                    container: toolbarOptions,
                    handlers: {
                        image: function (value) {
                            if (value) {
                                // 调用element的图片上传组件
                                document.querySelector('.avatar-uploader input').click()
                            } else {
                                this.quill.format('image', false)
                            }
                        }
                    }
                }
            },
            theme:'snow'
      },
    }
  }
}
</script>

如何设置富文本禁止复制图片上传？

因为复制图片进入富文本之后都是 base64格式, 会突破自定义图片上传功能

<template>
  <el-upload
      class="avatar-uploader"
      ref="uploadDrag"
      :auto-upload="false"
      accept=".png,.jpg,.jpeg"
      action="#"
      :show-file-list="false"
      :on-change="onChangeOther"
      drag
      style="display:none;"
  >
     <i  class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  <quill-editor 
     v-model="content" 
     :height="200"
     :editorToolbar="editorToolbar"
  ></quill-editor>
</template>

<script>
export default {
  data() {
    return {
      	 editorToolbar:{
                placeholder:'请输入解答',
                clipboard: {
                    // 粘贴版，处理粘贴时候带图片
                    matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
                },
                toolbar:{
                    container: toolbarOptions,
                    handlers: {
                        image: function (value) {
                            if (value) {
                                // 调用element的图片上传组件
                                document.querySelector('.avatar-uploader input').click()
                            } else {
                                this.quill.format('image', false)
                            }
                        }
                    }
                }
            },
            theme:'snow'
      },
    }
  }
  methods:{
      handleCustomMatcher (node, Delta) {
        let ops = []
        Delta.ops.forEach(op => {
            // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
            if (op.insert && typeof op.insert === 'string') {
                ops.push({
                    insert: op.insert,
                    attributes: op.attributes || ''
                    // ...op
                })
            } else {
                console.log('ckx debug op.insert.image ', op.insert.image )
                // 本地图片会使文件file开头 ，黏贴的图片格式也可能是 base64
                if (
                    	op.insert.image.includes('file://') 
                    	|| op.insert.image.includes('data:image/png;base64')
                ) {  
                  // 提示不能上传
                } else {
                    ops.push({
                        insert: op.insert,
                        attributes: op.attributes || ''
                        // ...op
                    })
                }
            }
        })
        Delta.ops = ops
        return Delta
    },
  }
}
</script>

如何设置富文本图片可以编辑尺寸？

vue-quill-editor的一个插件quill-image-resize-module，能够调整vue-quill-editor中插入的图片，非常实用。

npm install quill-image-resize-module --save

// 需要引入以下以来
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'; //添加
Quill.register('modules/imageResize', ImageResize)  //添加

export default {
  data() {
    return {
      	 editorToolbar:{
                placeholder: '请输入解答',
                clipboard: {
                    // 粘贴版，处理粘贴时候带图片
                    matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
                },
              	modules: {
                    imageResize: {   //添加
                        displayStyles: {   //添加
                        backgroundColor: 'black',
                        border: 'none',
                        color: 'white'
                    },
                    modules: ['Resize', 'DisplaySize', 'Toolbar']   //添加
                },
                toolbar:{
                    container: toolbarOptions,
                    handlers: {
                        image: function (value) {
                            if (value) {
                                // 调用element的图片上传组件
                                document.querySelector('.avatar-uploader input').click()
                            } else {
                                this.quill.format('image', false)
                            }
                        }
                    }
                }
            },
            theme: 'snow'
      },
    }
 }

还有非常重要的一步，就是要配置webpack.config.js文件

module.exports= {
    ...
  
    plugins: [
       new webpack.ProvidePlugin({
           'window.Quill': 'quill/dist/quill.js',
           'Quill': 'quill/dist/quill.js'
       })
    ],
}