项目中需要用到富文本编辑器,找了一圈,都在使用vue-quill-editor,经过一番摸索,成功实现,做个记录
一、初始化vue-quill-editor
npm install vue-quill-editor -S
(对于新手来说,可能会有很多版本上的冲突,只需要在初始化后面加上–legacy-peer-deps就可以解决)
二、main.js全局引入
(为什么要全局引入,是因为在单组件中引入的话需要调用vue())
代码如下:
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
三、在页面中使用
因为它是作为组件存在,所以引入的时候也是需要按组件方式引入的
import { quillEditor, Quill } from 'vue-quill-editor'
components: {
quillEditor,
},
data() {
return {
content: '',
}
},
在页面调用
<quill-editor ref="myQuillEditor" :value="content" :options="editorOption" />
其实到这一步已经完成了调用,也能使用了,但是自带的功能很多都是用不上的,所以可以根据需求来限定(在toolbar更改)
四、上传图片到服务器
富文本编辑器的图片格式默认是base64,需要上传到服务器的话,需要再设置
1、引入图片依赖
npm install quill
npm install quill-image-resize-module --save
npm install quill-image-drop-module --save
2、在需要的组件内引入
import { Quill } from 'vue-quill-editor'
import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
建议将参数设置以及图片上传设置单独到一个js文件,然后再引入需要的组件中
3、配置上传内容(将配置封装成单独的qdie.js文件)
const toolOptions=[
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
['blockquote', 'code-block'], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
[{ script: 'sub' }, { script: 'super' }], // 上标/下标
[{ indent: '-1' }, { indent: '+1' }], // 缩进
[{ direction: 'rtl' }], // 文本方向
['link', 'image', 'video'], // 链接、图片、视频
[{ align: [] }], // 添加居中按钮
[{ color: [] }], // 文字颜色按钮
],
const uploadConfig = {
modules: {
ImageExtend: {
// 如果不作设置,即{} 则依然开启复制粘贴功能且以base64插入
name: 'File', // 图片参数名
size: 0.3, // 可选参数 图片大小,单位为M,1M = 1024kb
action: '', // 服务器地址, 如果action为空,则采用base64插入图片
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: (res) => {
console.log(res)
return res.url
},
headers: (xhr) => {
console.log(xhr)
//当前为你的接口需要的header参数设置
xhr.setRequestHeader('Authorization', `Bearer ${getAccessToken()}`)
// xhr.Authorization = `Bearer ${getAccessToken()}`
}, // 可选参数 设置请求头部
sizeError: () => {}, // 图片超过大小的回调
start: () => {}, // 可选参数 自定义开始上传触发事件
end: () => {}, // 可选参数 自定义上传结束触发的事件,无论成功或者失败
error: () => {}, // 可选参数 上传失败触发的事件
success: () => {}, // 可选参数 上传成功触发的事件
change: (xhr, formData) => {
// xhr.setRequestHeader('myHeader','myValue')
// formData.append('token', 'myToken')
}, // 可选参数 每次选择图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData
},
toolbar: {
// 如果不上传图片到服务器,此处不必配置
container: toolOptions, // container为工具栏,此次引入了全部工具栏,也可自行配置
handlers: {
image: function () {
// 劫持原来的图片点击按钮事件
QuillWatch.emit(this.quill.id)
},
},
},
},
}
如果是单独成一个js文件的话,export就可以调用了
export default uploadConfig
然后在调用组件的地方设置data()
data() {
return {
content: '',
editorOption: quillConfig,
}
整个功能就实现了