介绍: vue富文本编辑器组件,是基于@quil新增图片上传和视频上传功能。
- 使用 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>);
- SSR在Nuxtjs中使用 加个判断再引入即可
import ‘quill/dist/quill.snow.css’
let VueEditor;
if (process.browser) {
VueEditor = require ("vue-word-editor").default
}