vue

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

全部代码

https://github.com/surest-sky/example/tree/master/vue/components/Tinymce

安装

这里不需要安装，动态加载js引用即可，不然加载的组件较多，影响访问速度

具体见 https://github.com/surest-sky/example/blob/master/vue/components/Tinymce/dynamicLoadScript.js

配置图片上传

请注意这里我配置了关于自己的上传逻辑

使用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());

结果

本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: May 8, 2021 at 11:37 am