在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】

Quill 官网：https://quilljs.com//

一、Quill的安装与使用（初级）

1、下载安装

npm install vue-quill-editor --save

        这里建议使用管理员命令窗口的形式，找到自己的项目，如下图所示。然后进行安装（目的：避免权限不足导致的下载失败）

2、挂载（局部挂载）

        在某个vue页面中引入，。不进行全局引入。我这里采用的是部分页面引入的形式

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

import { quillEditor, Quill } from 'vue-quill-editor' //引入插件

export default {
  components: {
    quillEditor
  }

       提示：如果想要全局引入、就在main.js中引入就行。（如果极个别页面使用的情况下，直接在单独页面引入就可以了）

import VueQuillEditor from 'vue-quill-editor'
// 引入相关css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor);

3、模块使用（quill富文本编辑器）

// html文件
<quill-editor
        class="ql-editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)" 
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
</quill-editor>
 
// 插件引入
import { quillEditor } from 'vue-quill-editor'
-------------------------------------------
components: {
	quillEditor
},
 
// 事件方法
onEditorBlur(e){
  console.log(e, '失去焦点事件');
},
onEditorFocus(e){
  console.log(e, '获得焦点事件');
},
onEditorChange(e){
  console.log(e, '内容改变事件');
},

 
// 富文本功能配置
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']    //上传图片、上传视频
        ]
      }
},

实战案例代码(如果看上边的实在不知道放置的位置，就看一下下方的例子。这个案例，可以跳过)

<template>
  <div class="myMain">
    <div>
      <div class="table-title">公告信息</div>
    </div>
    <div class="row">
      <div style="margin-top: 20px">
        <div style="border: 1px solid #c9c9c9">
          <div class="panel-heading">公告信息表</div>
          <div class="panel-body">
            <div style="width: 100%">
              <div class="nx-table-header" style="">
                <div style="float: left; margin-bottom: 10px">
                  <el-button
                    type="primary"
                    size="small"
                    round
                    @click="addNewTypeInfo()"
                    >添加</el-button
                  >
                </div>
                <div
                  style="float: left; margin-bottom: 10px; margin-left: 10px"
                ></div>
              </div>
              <div>
                <!--    ====================================添加公告信息====================================-->
                <el-dialog
                  title="添加公告信息"
                  :visible.sync="adddialogVisible"
                  width="40%"
                  @close="closeDialog"
                >
                  <hr />
                  <div style="height: 425px; overflow: auto">
                    <quill-editor
                      ref="myQuillEditor"
                      v-model="content"
                      :options="editorOption"
                      @blur="onEditorBlur($event)"
                      @focus="onEditorFocus($event)"
                      @change="onEditorChange($event)"
                      style="height: 400px"
                    />
                  </div>

                  <hr />
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="adddialogVisible = false"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      round
                      @click="submitForm('TypeInfoForm')"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

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


export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      content: "<h2>I am Example</h2>",
      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"], //上传图片、上传视频
          ],
          },
        },
      },
      adddialogVisible: false,
    };
  },
  methods: {
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    },

    //添加公告信息窗口
    addNewTypeInfo() {
      this.adddialogVisible = true;
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  created() {
    this.showAllUserInfo();
  },
};
</script>

4、实际效果展示

      工具栏中的工具可以使用，图片上传也可以使用，不过上传的图片大小不能改变。向下方图片所示，图片太大了。

二、图片缩放（进阶）

      vue-quill-editor的两个插件：quill-image-drop-module 和quill-image-resize-module 可以帮助实现上传图片的缩放和拖拽功能。

1、下载安装

npm install quill-image-drop-module -S    //允许粘贴图像并将其拖放到编辑器中。
npm install quill-image-resize-module -S  //允许调整图像大小

2、修改配置

2.1 vue2中配置文件修改

在build/webpack.base.conf.js添加, 然后配置下面的代码：

• 1、const webpack = require('webpack')

• 2、在js规则中添加exclude

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
    ]
  }

3、插件设置

plugins: [
    new webpack.ProvidePlugin({
      'window.Quill': 'quill'
    })
  ],

具体位置如下图所示，

2.2 vue3中配置文件修改

// vue cli3.0用法
chainWebpack: (config) => {
    config.plugin('provide').use(webpack.ProvidePlugin,[{
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
    }])
}

3、js引入增加新的引入

// imageResize  首字母必须小写否则会报错，错误语如下
// quill Cannot import ImageResize. Are you sure it was registered?
import imageResize  from 'quill-image-resize-module'
Quill.register('modules/imageResize', imageResize )
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)

4、修改editorOption里面配置

editorOption: {
    modules: {
        // 新增下面
        imageDrop: true, // 拖动加载图片组件。
        imageResize: { //调整大小组件。
            displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
        }
    }
}

5、效果展示

三、后语

       可以上传视频、可以将上传的图片上传到服务器等等。有需要会进一步探讨，目前需要做的就是收集这些数据，然后放入数据库存储。

资料参考：https://www.cnblogs.com/meiyanstar/p/12909755.html

资料参考：图片缩放