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

站长

2023年09月06日 09:43 · 阅读数 8

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

使用背景

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`富文本编辑器

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

安装

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

npm install vue-quill-editor

安装完成后，将组件导入到您的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
  }
}

在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'
       })
    ],
}

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

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

使用背景

富文本选择

1. WangEditor富文本

2. TinyMCE富文本

3. Quill富文本

Vue-Quill-Editor富文本编辑器

安装

配置

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

如何设置默认值？

如何禁用富文本编辑器？

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

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

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

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

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

`Vue-Quill-Editor`富文本编辑器