富文本编辑器 VUE-QUILL-EDITOR 使用教程

以你之姓@ 2024-03-22 16:25 114阅读 0赞

## 一.基础用法 ##

#### 1、NPM 导入 VUE-QUILL-EDITOR ####

npm install vue-quill-editor --save

#### 2、引入 VUE-QUILL-EDITOR ####

在全局中引入

import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor'
     
    // 引入样式
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
     
    Vue.use(VueQuillEditor, /* { 默认全局 } */)

在指定的 vue 文件中引入

// 引入样式
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
     
    import { quillEditor } from 'vue-quill-editor'
     
    export default {
      components: {
        quillEditor
      }
    }

#### 3、在 VUE 中使用 ####

<template>
        <quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" 
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
    </template>
     
    <script>
        export default {
            data() {
                return {
                    content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据
                    editorOption: {}, //编辑器配置项
                }
            },
            methods: {
                onEditorBlur() {}, // 失去焦点触发事件
                onEditorFocus() {}, // 获得焦点触发事件
                onEditorChange() {}, // 内容改变触发事件
            }
        }
    </script>

到这里一个默认的富文本编辑器已经导入使用了，如下图所视！

![855f6044a092c976c4ba97ba2dab450e.png][]

## 二.升级用法 ##

一般的，我们在使用的时候并不需要这么多功能，可以适当的对编辑器配置项进行配置。

editorOption: {
           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'}], // 文本方向
                 [{'size': ['small', false, 'large', 'huge']}], // 字体大小
                 [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
                 [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
                 [{'font': []}], //字体
                 [{'align': []}], //对齐方式
                 ['clean'], //清除字体样式
                 ['image', 'video'] //上传图片、上传视频
                ]
             },
             placeholder: "输入内容..."
         }, //编辑器配置项

可以根据自己的实际需求，保留相应的工具栏。

## 三.图片上传 ##

vue-quill-editor 默认的是以 base64 保存图片，会直接把图片 base64 和内容文本一起以字符串的形式提交到后端。这样小图片还行，如果要上传大图片会提示上传失败，优秀的前端打字员显然不会这样做。

思路

*  可以先将图片上传至服务器，再将图片链接插入到富文本中显示
 *  图片上传可以自定义一个组件或者使用 iview 的上传图片的组件（我在项目中使用的是自定义的组件，这里演示使用 iview 组件上传）
 *  上传图片的组件需要隐藏，点击图片上传时调用 iview 的图片上传，上传成功后返回图片链接。

1.  #### 在编辑器项中配置配置项 ####
    
        editorOption: {
                    modules: {
                        toolbar: {
                            container: toolbarOptions, // 工具栏
                            handlers: {
                                'image': function(value) {
                                    if (value) {
                                        alert('点击了上传图片')
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                        placeholder: "输入内容..."
                    }, //编辑器配置项
                },
2.  #### 调用 iview 的上传组件。 ####
    
    HTML:
    
        <Upload
            :show-upload-list="false"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png','gif']"
            :max-size="2048"
            multiple
            action="/file/upload"
            >
        </Upload>
        <quill-editor
            v-model="content"
            :options="editorOption"
            ref="quillEditor">
        </quill-editor>
    
    CSS:
    
        .ivu-upload {
            display: none;
        }
    
    JS:
    
        data () {
            return {
                content: '',
                editorOption: {                
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具栏
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        // 调用iview图片上传
                                        document.querySelector('.ivu-upload .ivu-btn').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        },
        methods: {
            handleSuccess (res) {
                // 获取富文本组件实例
                let quill = this.$refs.myQuillEditor.quill
                // 如果上传成功返回图片URL
                if (res) {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片，res为服务器返回的图片链接地址
                    quill.insertEmbed(length, 'image', res)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    // 提示信息，需引入Message
                    Message.error('图片插入失败')
                }
            },
        }
    
    这样就完成了图片上传的功能。

## 四.调整图片大小 ##

**1.在原本的quill-editor能正常使用的情况下，安装quill-image-drop-module和quill-image-resize-module**

npm install quill-image-drop-module -S
    npm install quill-image-resize-module -S

**2.我是在全局注册的quill-editor，在main.js中加入以下代码**

//富文本编辑器
    import VueQuillEditor, { Quill } from 'vue-quill-editor';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import imageResize  from 'quill-image-resize-module' // 调整大小组件。
    import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
    Quill.register('modules/imageResize', imageResize );
    Quill.register('modules/imageDrop', ImageDrop);
    Vue.use(VueQuillEditor);

**3.在 editorOption 中添加配置 在modules中与 history/toolbar平级**

imageDrop: true, //图片拖拽
    imageResize: { //放大缩小
       displayStyles: {
          backgroundColor: "black",
          border: "none",
          color: "white"
       },
       modules: ["Resize", "DisplaySize", "Toolbar"]
    },

![fd7dd67a42702c4d3bc5657aad386f73.png][]

**4.在项目文件 vue.config.js 加上配置。（这一步很重要，如果不配置会报错！）**

const webpack = require('webpack'); //导入 webpack 模块
     
    //在模块中加入
    configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    'window.Quill': 'quill/dist/quill.js',
                    'Quill': 'quill/dist/quill.js'
                })
           ],
       },

这样就导入完成了，如下图所示

![8734865a90b3fe7cd0d356eecdbb8eb2.png][]

[855f6044a092c976c4ba97ba2dab450e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5b23d805b3354aba827694160a3d809c.png
[fd7dd67a42702c4d3bc5657aad386f73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/967eb4daa99f4fc38171c57d4ba2fcde.png
[8734865a90b3fe7cd0d356eecdbb8eb2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/52066a445f324330802c624a0c35ef6a.png