vue-word-editor富文本框的基础使用

403 阅读1分钟

介绍: vue富文本编辑器组件,是基于@quil新增图片上传和视频上传功能。

  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 注册和配置 上传文件必须要设置请求头的信息

1.4 使用

2.配置 遵循Quill原有的配置:quilljs.com/docs/config…

新增配置

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

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

3.获取和设置内容 3.1 给组件添加ref

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>);

  1. SSR在Nuxtjs中使用 加个判断再引入即可

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

let VueEditor;

if (process.browser) {

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

}