tinymce 上传图片到oss

    import tinymce from "tinymce/tinymce";
    import './src_common_tinymceIcons'//tinymce icon 把这个文件从tinmyce/icons/default/icons.js 
    copy出来放到自己文件下面
    import "tinymce/plugins/image"; // 插入上传图片插件
   mounted() {
        tinymce.init({});
    },
     computed: {
        init() {
            return {
                language_url: this.tinyLanguage_url,
                language: this.tinyLanguage,
                selector: ".mytinyEdit",
                auto_focus: '.mytinyEdit',
                //如果使用的是TinyMCE外观，则可以使用此选项指定外观目录的位置。如果要从一个URL（例如CDN）加载TinyMCE，同时在例如本地服务器上加载外观，则此功能很有用。
                skin_url: `./utils/tinymce/skins/ui/oxide`,
                //通常希望TinyMCE的可编辑区域具有与周围内容相同的样式。该content_css选项可实现一致的样式，使您可以将外部CSS扩展到可编辑区域。
                content_css: `./utils/tinymce/skins/content/default/content.css`,
                height: 300,
                plugins: this.plugins,
                toolbar: this.toolbar,
                quickbars_selection_toolbar:
                    "example quicklink| bold italic | h2 h3| quickimage ",
                setup: (editor) => {
                    editor.ui.registry.addButton('customInsertButton', {
                        text: '',
                        icon: "horizontal-rule",
                        onAction: function (_) {
                            let a = `<img class="imgred" src="链接"></img>`

                            editor.insertContent(a);
                        },
                    });
                },
                //使用该branding选项可以禁用状态栏中显示的“ 由Tiny提供支持 ”以进行产品归因。
                // branding: false,
                //菜单栏
                menubar: false,
                file_picker_types: 'quickimage',
                images_upload_handler: async function (blobInfo, success, failure, progress) {
                    let  xhr, formData, resData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    //获取oss地址
                    resData = await getAliOSSUploadSign('courseware')
                    
                    //`${process.env.VUE_APP_PROXY_URI}/ic/information/oss/addFile`这个接口是后台上传oss，
                    返回一个链接，因为tinymce获取阿里云链接以后不会自动上传到oss，
                    如果手动触发上传oss由于oss接口不会返回任何结果，success就不会触发，
                    这样图片上链接就不是阿里云链接还是base64
                    
                    xhr.open('POST', `${process.env.VUE_APP_PROXY_URI}/ic/information/oss/addFile`);
                    xhr.setRequestHeader("token", window.localStorage.getItem("EL-ADMIN-TOEKN"));    
                    xhr.upload.onprogress = function(e){
                        progress(e.loaded / e.total * 100);
                    }
            
                    xhr.onload = function() {
                        var json;
                        if (xhr.status == 403) {
                            failure('HTTP Error: ' + xhr.status, { remove: true });
                            return;
                        }
                        if (xhr.status < 200 || xhr.status >= 300 ) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(xhr.responseText);
                        success(json.body.msg);
                    };
            
                    xhr.onerror = function () {
                        failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
                    }
            
                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
                    formData.append("accessKeyId", accessKeyId); // Bucket 拥有者的Access Key Id。
                    // formData.append("policy", policy); // policy规定了请求的表单域的合法性
                    formData.append("accessKeySecret", accessKeySecret); // 根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
                    // ---以上都是阿里的认证策略
                    // formData.append("key", `${resData.body.dir}/${blobInfo.filename()}`); // 文件名字，可设置路径
                    // formData.append("success_action_status", "200"); // 让服务端返回200,不然，默认会返回204
                    formData.append("endpoint", endpoint); // 需要上传的文件 file
                    formData.append("bucketName",bucketName); // 需要上传的文件 file
                    xhr.send(formData);
                }
            };
        },
    },