介绍：

vue富文本编辑器组件，是基于[@quil](https://quilljs.com/)新增图片上传和视频上传功能。

1. 使用

1.1 安装：

NPM

npm install vue-word-editor --save

 依赖 quill，axios，vue

1.2 引入：

import VueEditor from 'vue-word-editor';
import 'quill/dist/quill.snow.css';

1.3 注册和配置

上传文件必须要设置请求头的信息

<script>
//引入
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css"

export default {
name: 'app',

data(){
  return {
    config: {
// 上传图片的配置
      uploadImage: {
        url: "http://localhost:3000/upload",//文章上传到服务器端的处理路径
        name: "file",//后台所需要的参数的名称
        headers: this.getToken(),//设置请求头信息
        // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
        uploadSuccess(res, insert){
          insert("http://localhost:3000" + res.data.url)//文件上传之后的回调，接收服务器响应回来的数据，根据服务器的地址进行填充
        }
      },
  	 
      // 上传视频的配置
      uploadVideo: {
        url: "http://localhost:3000/upload",
        name: "file",
        headers: this.getToken(),//设置请求头信息
        uploadSuccess(res, insert){
          insert("http://localhost:3000" + res.data.url)
        }
      }
    }
  }
},
//注册
components: {
  VueEditor
},
 // 设置上传头的信息
 methods：{ 
      getToken() {
      return {
        Authorization: JSON.parse(
          localStorage.getItem("hmtoutiao_houtai_login")
        ).token
   };
  }
}
</script>

1.4 使用

<template>
  <div id="app">
    <VueEditor :config="config"/>
  </div>
</template>

2.配置

遵循Quill原有的配置：https://quilljs.com/docs/configuration/

新增配置

上传图片和上传视频的配置（uploadImage/uploadVideo）

3.获取和设置内容

3.1 给组件添加ref

<VueEditor :config="config" ref="vueEditor"></VueEditor>

3.2 获取富文本

如果想要调用quill对象的方法，可以使用this.$refs.vueEditor.editor 访问quil对象

var quill = this.$refs.vueEditor.editor; quill.root.innerHTML

3.3 设置编辑器的内容

var quill = this.$refs.vueEditor.editor; quill.clipboard.dangerouslyPasteHTML(0,`<div>html</div>`);

4. SSR在Nuxtjs中使用

加个判断再引入即可

import ‘quill/dist/quill.snow.css’

let VueEditor;

if (process.browser) {

VueEditor = require ("vue-word-editor").default

}