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