纳兰性德
  • 微信号:17764149196
您当前的位置:首页  > 前端

TinyMCE5.x实现上传图片到cos

作者:久伴轻尘 时间:2021年08月12日 阅读数:721

tinymce应该是最优秀的几款富文本编辑器之一,他的功能十分完善,集成起来也是十分便捷

在我们写文章的过程中,肯定少不了图片上传,那么我们来试试实现一下tinymce的图片上传

文档地址

TinyMCE官网    TinyMCE中文文档中文手册(推荐)

我的环境是vue3.x nodejs typescript,如果你还未集成TinyMCE,可以看看我的上一篇文章 vue3.x集成TinyMCE5.x

我们先瞧瞧图片上传的文档 上传图片和文件 | TinyMCE中文文档中文手册

图片上传参数

选项名称 说明
images_upload_url 指定上传图片的后端处理程序的URL。
images_upload_base_path 给返回的相对路径指定它所相对的基本路径。
images_upload_credentials 对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。值为布尔值,默认false。
images_upload_handler 此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数需提供三个参数:blobInfo、成功回调和失败回调。

为了使我们对图片上传的可控性更高,我们可以选择实现  images_upload_handler 这个回调钩子来做上传

提供的例子

tinymce.init({
    selector: '#tinydemo',
    plugins: 'image',//使用图片功能必须添加
    toolbar: 'image',//使用图片功能必须添加
    images_upload_handler: function (blobInfo, succFun, failFun) {
        var xhr, formData;
        var file = blobInfo.blob();//转化为易于理解的file对象
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/demo/upimg.php');
        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                failFun('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location != 'string') {
                failFun('Invalid JSON: ' + xhr.responseText);
                return;
            }
            succFun(json.location);
        };
        formData = new FormData();
        formData.append('file', file, file.name );//此处与源文档不一样
        xhr.send(formData);
    }
});

我们简单的改造一下images_upload_handler 我的前端请求使用的是axios

plugins: 'image',//使用图片功能必须添加
toolbar: 'image',//使用图片功能必须添加
images_upload_handler: (blobInfo: BlobInfo, succFun: Function, failFun: Function) => {
    const formData = new FormData()
    formData.append('file', blobInfo.blob())
    //上传文件到cos
    uploadTinyMceFile(formData).then((res) => {
        //在succFun回调传入完整的访问地址 自行把握
        succFun(cdnUrl + res.data.data)
    }).catch((error) => {
        failFun(error)
    })
},
//上传方法 service是对axios的封装处理的实例
export function uploadTinyMceFile(formData: FormData) {
    return service.post("/blog/article/uploadTinymce", formData);
}

service定义地址

如果你的后端是jfinal可以查看 jfinal上传文件到腾讯云cos

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我删除。邮箱:577955659@qq.com

标签: TinyMCE Vue Nodejs

久伴轻尘

人生若只如初见,何事秋风悲画扇