Vue中配置Tinymce富文本编辑器（配置图片上传）

全副代码

https://github.com/surest-sky...

装置

这里不须要装置，动静加载js援用即可，不然加载的组件较多，影响访问速度

具体见 https://github.com/surest-sky...

配置图片上传

请留神这里我配置了对于本人的上传逻辑

应用axios 上传 formData 表单数据

流程： 图片点击上传后，塞入formData数据中，进行上传到七牛云中

在api/tools.js中，因为上传是须要鉴权的，所以这一步骤在request中进行的

> components/Tinymce/index.vueimport { 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.jsexport 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());

后果