vue使用富文本编辑器vue-quill-editor

问题描述：

我们在开发过程中经常会遇到使用富文本编辑器进行操作，当前插件市场上关于富文本的编辑器挺多的，

我们就不一一个介绍了，现在我们主要讲解一些vue-quill-editor富文本编辑器的使用操作和注意事项。

效果图

具体操作使用

1. 安装

npm install vue-quill-editor -S

2. 引入到项目中

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
  }
}

具体使用

<template>
	<el-row v-loading="quillUpdateImg">
  <quill-editor ref="myQuillEditor" v-model="form.name" :options="editorOption">
  </quill-editor>
</el-row>
<!-- elementUI上传图片组件 -->
<el-upload class="avatar-uploader"
           :action="`${this.postUrl}/files/upPost`"
           :show-file-list="false"
           :on-success="handleAvatarSuccess"
           :on-error="handleAvatarError"
           :before-upload="beforeAvatarUpload">
</el-upload>
</template>
 
<script>

//调用富文本编辑器
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 {
    data() {
        return {
      quillUpdateImg:false,//加载图片
      		  // 富文本编辑器配置
        	     // 富文本编辑器
                  editorOption: {
                    placeholder: "请在这里输入内容",
                    modules: {
                      toolbar: {
                        container: [
                          ["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"] //上传图片、上传视频   "link" 链接  "video" 视频
                  ],
                  //重写图片上传事件
                  handlers: {
                    'image': function (value) {
                      if (value) {
                        // 触发input框选择图片文件
                        document.querySelector('.avatar-uploader input').click()
                      } else {
                        this.quill.format('image', false);
                      }
                    }
                  },
                }
              }
            },
           }
         },
      methods: {
          //图片上传成功钩子函数
    handleAvatarSuccess(res) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (res.sinaPath !== null) {
        // 获取光标所在位置
        let length = quill.selection.savedRange.index;
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, 'image', res.data)
        // 调整光标到最后
        quill.setSelection(length + 1)
        this.quillUpdateImg = false;
      } else {
        this.$message.error('图片插入失败')
      }
    },
    //图片上传前钩子函数
    beforeAvatarUpload(file) {
      // 显示loading动画
      console.log(file);
      this.quillUpdateImg = true
    },
//图片上传失败钩子函数
    handleAvatarError() {
      // loading动画消失
      this.quillUpdateImg = false
      this.$message.error('图片插入失败')
    },            
    }
}
</script>

<style>
.quill-editor {
  width: 90%;
  margin: 0 auto;
  height: 20vw;
  padding-bottom: 3.5vw;
}
.editor {
  line-height: normal !important;
  height: 800px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode='video']::before {
  content: '请输入视频地址:';
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  content: '32px';
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '标题6';
}
</style>

回调显示：

<div class="ql-editor" v-html="item.post" v-highlight></div>

自定义控制图片大小

（1），安装插件

 npm i quill-image-resize-module -S

（2），在文件中导入包

import Quill from 'quill' 
import ImageResize from 'quill-image-resize-module' 
Quill.register('modules/imageResize', ImageResize)  

（3），在原本的配置项上添加（与toolbar平级进行配置）

toolbar: {},
// 调整图片大小
 imageResize: {
   displayStyles: {
     backgroundColor: 'black',
     border: 'none',
     color: 'white'
   },
   modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
 }