几行代码让TinyMCE支持阿里云OSS

最新推荐文章于 2023-04-11 22:24:35 发布

转载最新推荐文章于 2023-04-11 22:24:35 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016007665

文章标签：

#javascript #前端 #ViewUI

添加OSS SDK

<script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.1.min.js"></script>

OSS配置

//配置替换成你自己的
var client = new OSS({
    region : 'oss-cn-beijing',
    accessKeyId : '',
    accessKeySecret : '',
    bucket : ''
});

配置TinyMCE

tinymce.init({
...省略若干代码...
plugins: [
   'image'
],
toolbar1: "image",
images_upload_handler: function (blobInfo, success, failure) {
    var filename = blobInfo.filename();
    var index = filename.lastIndexOf(".");
    var suffix = filename.substring(index+1, filename.length);
    filename = md5(blobInfo.base64()) + '.' + suffix;
    client.multipartUpload(filename, blobInfo.blob()).then(function (result) {
        if(result.res.requestUrls) {
            success(result.res.requestUrls[0]);
        }
    }).catch(function (err) {
        console.log(err);
    });
},
...省略若干代码...
});