vue rich text editor

vue 富文本编辑器组件，基于@quill新增图片上传和视频上传，欢迎issues

安装

NPM

npm install vue-word-editor --save 

依赖 quill，axios，vue

配置

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

新增配置

上传图片和上传视频的配置 ( uploadImage / uploadVideo )

属性	类型	说明
url	String	上传图片的地址
name	String	formData字段名
uploadBefore	Function	上传之前触发，参数返回file文件，返回false则不上传
uploadProgress	Function	上传中触发，参数返回上传中结果
uploadSuccess	Function	上传成功触发，参数返回上传后的结果和注入方法
uploadError	Function	上传失败触发，参数返回错误
showProgress	Boolean	是否展示上传进度条（可自行在uploadProgress定义）
headers	Object	上传的头信息

使用

普通SPA使用

参考 /example

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

<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",
        // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
        uploadSuccess(res, insert){
          insert("http://localhost:3000" + res.data.url)
        }
      },
       
      // 上传视频的配置
      uploadVideo: {
        url: "http://localhost:3000/upload",
        name: "file",
        uploadSuccess(res, insert){
          insert("http://localhost:3000" + res.data.url)
        }
      }
    }
  }
},

components: {
  VueEditor
},
}
</script>

SSR在Nuxtjs中使用

加个判断再引入即可

import "quill/dist/quill.snow.css"
let VueEditor;

if (process.browser) {
    VueEditor = require('vue-word-editor').default
}

获取内容

1.给组件添加ref

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

2.获取富文本

this.$refs.vueEditor.editor.root.innerHTML

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