初探vue-quill-editor

Vue.js 前端

字数统计: 1.1k阅读时长: 5 min

 2023/02/23 

富文本编辑器：vue-quill-editor

vue-quill-editor是一款可适配PC端和移动端富文本编辑器，具有可设置自定义配置项、外观简洁且轻量的优点。

PC端效果图如下：

移动端的效果图如下：

vue-quill-editor配置

在项目目录下载vue-quill-editor：
1
npm i vue-quill-editor -S

在Vue页面的script模块中引入vue-quill-editor：

import Vue from 'vue'
import Quill from "quill";
import { quillEditor } from "vue-quill-editor"; 

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

Vue.use(quillEditor)//注册组件的方式之一

在Vue页面的template模块中引入组件：

<quill-editor 
    v-model="content" 
    ref="myQuillEditor" 
    :options="editorOption" 
    @blur="onEditorBlur($event)" 
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)">
</quill-editor>

在Vue页面的scripts模块中完善组件的设置，完整的scripts模块代码如下：

import Quill from "quill";
import { quillEditor } from "vue-quill-editor"; 
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  components: {
    quillEditor,//另一种组件注册方式
},
  data() {
    return {
      content:'',
      str:'',
      editorOption: {
        placeholder: "请在这里输入",
        modules:{
          toolbar:[
            ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'],     //引用，代码块
            [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
            [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
            [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
            [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
            [{ 'font': []}],
            [{'align': []}],    //对齐方式
            ['clean'],    //清除字体样式
            ['image','video']    //上传图片、上传视频
          ],
        },   
      },
    }
  },
  methods: {
      onEditorReady(editor) {},// 准备编辑器
      onEditorBlur(){}, // 失去焦点事件
      onEditorFocus(){}, // 获得焦点事件
      // 内容改变事件--给父组件传值
      onEditorChange(){
        this.$emit("input", this.content);
      }, 
      // 转码
      escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
        }
  },
  computed: {
      editor() {
          return this.$refs.myQuillEditor.quill;
      },
  },
    mounted() {
        let content = '';  // 请求后台返回的内容字符串
        this.str = this.escapeStringHTML(content);
    }
}

至此便可以使用富文本了。需要注意的是，该富文本编辑器的所编辑的内容，在存储数据时会按照html的格式存储，例如：
1
2
输入内容为123时，
存储到后台的实际文本为<p>123</p>
因此要从后台读取数据时，需要使用v-html的方式来解析数据，在需要让存储数据显示的Vue页面里，添加如下代码即可：
1
2
3
4
<div v-html="item.answer" class="ql-editor" >
{{content}}
</div>
<--其中content为存储vue-quill-editor内容的参数-->

使用v-html解析数据时，会出现所展示的图片尺寸异常的情况，若想让图片显示出正常的大小，只需在样式style中添加以下CSS代码即可：

1
2
3

.ql-editor img{
    width: 100%;
}

调整图片尺寸&图片拖拽上传（PC端）

直接使用vue-quill-editor上传图片时，图片是不能实现调整图片尺寸和图片拖拽上传的，若想要实现这些功能，则需要下载插件quill-image-resize-module和quill-image-drop-module。

插件配置

首先需要下载插件：

1 2	npm i quill-image-drop-module -S npm i quill-image-resize-module -S

然后在Vue页面的script模块中引入这两个插件：

import { ImageDrop } from 'quill-image-drop-module';
import ImageResize from 'quill-image-resize-module';

Quill.register('modules/imageDrop',ImageDrop);
Quill.register('modules/imageResize', ImageResize);

然后在data return 中引入插件的配置如下：

editorOption: {
  modules:{               
    imageDrop:true,
    imageResize:{
      displaySize:{
        backgroundColor: "black",
        border: "none",
        color: "white",
      },
      modules:['Resize','DisplaySize','Toolbar']
    }
  }
}

配置引入后，在vue.config.js文件中引入一下配置：

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