Vue-Quill-Edito富文本编辑器使用方法和将图片从ba

什么是富文本编辑器?

它的功能跟我们的word一样，可以对其中内容的格式做一些调整，还可以添加图片等等，它在开发中有个专有名词，叫富文本编辑器。

image.png

vue-quill-editor
这个据说大企业用的比较多，百度一下技术背景，对它的评价是不限制框架，但是需要定制，理念很先进。

1、安装依赖

第一条

npm install vue-quill-editor –save 或者
yarn add vue-quill-editor

第二条

npm install quill-image-extend-module --save-dev
yarn add quill-image-extend-module

2、使用

在src/plugins/创建一个文件名为VueQuillEditor.js(可以自定义文件名)

VueQuillEditor.js放入以下代码
不然文本编辑器会出现不规则黑白几何图形
可以在main.js中引入，也可以在具体使用的vue文件中引入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

在main.js中引入

import './plugins/VueQuillEditor.js'

vue文件代码

<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" 
style="height: 600px; margin-bottom: 10px"></quill-editor>

在Vue的script标签中中引入

 import {quillEditor, Quill} from 'vue-quill-editor'
  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
  Quill.register('modules/ImageExtend', ImageExtend)

data()中放入下面的代码

content:"",
editorOption: {
        modules: {
          ImageExtend: {
            loading: true,
            name: "后台接口地址参数name",
            size: 0.02,
            action: "后台接口地址",
            response: res => {
              return res.data.fileUrl;
            },
            headers: (xhr,formData) => {
              xhr.setRequestHeader(
                "X-Nideshop-Token",
              localStorage.getItem("token")
              );
            }, // 可选参数 设置请求头部
            sizeError: () => {
              return this.$message.error("图片超过50kb");
            } // 图片超过大小的回调
          },
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块
              [{ header: 1 }, { header: 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: [] }], // 居中
              ["link", "image"],
              ["clean"]
            ],
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id);
              }
            }
          }
        }
      }