Vue中配置Tinymce富文本编辑器(配置图片上传)
全部代码
https://github.com/surest-sky...
安装
这里不需要安装,动态加载js引用即可,不然加载的组件较多,影响访问速度
具体见 https://github.com/surest-sky...
配置图片上传
请注意这里我配置了关于自己的上传逻辑
使用axios 上传 formData 表单数据
流程: 图片点击上传后,塞入formData数据中,进行上传到七牛云中
在api/tools.js中,由于上传是需要鉴权的,所以这一步骤在request中进行的
> components/Tinymce/index.vue
import { uploadImage } from '@/api/tool';
images_upload_handler: (blobInfo, success, failure) => {
let formdata = new FormData();
formdata.append('file', blobInfo.blob());
uploadImage(formdata)
.then(data => {
success(data.file);
})
.catch(err => {
failure('Server Error');
});
}
> api/tool.js
export function uploadImage(data, sign = "") {
return async function upload() {
let signData;
if(sign) {
signData = await getUplaodSignExam({sign: sign}).then(response => {
const signData = response.data
return signData
});
}else{
signData = await getUplaodSign().then(response => {
const signData = response.data
return signData
});
}
const { uploadUrl, token, host, dir } = signData;
data.append('token', token);
const result = await request({
url: uploadUrl,
method: 'post',
data: data
}).then(({ hash, key }) => {
return {
file: host + key
}
});
return result
}();
}
/**
* 获取上传秘钥信息
*/
export function getUplaodSign(params) {
return request({
url: '/module/document/qiniu-sign',
method: 'post',
data: params
});
}
/**
* 获取上传秘钥信息
*/
export function getUplaodSignExam(params) {
return request({
url: '/web/qiniu-sign',
method: 'post',
data: params
});
}
使用
import Tinymce from '@/components/Tinymce';
omponents: { Tinymce }
<tinymce @save="timingSyncContent" ref="editor" v-model="content" />
其中的save
方法 CTRL + S
的时候会进行执行,同样设置自动保存的时候也会执行,v-model
用于动态修改内容,具体见 this.$emit('input', editor.getContent());
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。