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对象

Package detail

npm-wps-editor

readme

vue rich text editor

安装

NPM

配置

新增配置

使用

普通SPA使用

SSR在Nuxtjs中使用

获取内容