vue2使用tinymce富文本编辑器，将图片（包括粘贴）通过STS直传阿里云OSS

此处使用的是vue2.X，如果是vue3的话安装方式可能不一样

安装

// vue2.X只能安装低版本
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S

使用
需要汉化的话要去官网下载中文包，然后将langs放到根目录的public下面，方便引用
https://www.tiny.cloud/get-tiny/language-packages/

<editor :init="editorInit" />

import Editor from "@tinymce/tinymce-vue";
export default {
    components: {
        Editor,
    },
    data() {
        let _this = this;
        return {
            // 这是配置
            editorInit: {
                height: 500,
                // 中文
                language_url: "/langs/zh_CN.js",
                language: "zh_CN",
                // 插件，此处是图片上传和粘贴
                plugins: [ "image", "paste"],
                // word支持
                powerpaste_word_import: "merge",
                // 允许直接粘贴data图片
                paste_data_images: true,
                // 自定义上传方法
                images_upload_handler: function (file, successFun, failFUn) {

                    // 可以转为base64
                    console.log(file.base64());

                    // 也可以转为blob，但是直接转blob在粘贴图片时文件有问题
                    // 所以只能先使用base64，再转回blob后进行上传........
                    console.log(file.blob());

                    // 将base64转为blob，后面的文件名随便写，反正上传oss的时候要生成随机文件名
                    let f = _this.dataURLtoFile(file.base64(), "123.png");
                     
                    // 自己封的上传方法，采用callback形式返回数据
                    _this.fileToOss(f, (url) => {
                        // 上传成功后调用插件api，将图片替换到富文本中
                        successFun(url);
                    });
                },
            },
            ossData: [],
        };
    },
    created() {
        // 获取后台给你的STS配置数据
        this.getSts();
    },
    methods: {
        // 获取后台给你的STS配置数据
        getSts() {
            let _this = this;
            this.request
                .post(this.api.sts)
                .then((res) => {
                    _this.ossData = res;
                });
        },
        // base64转blob
        dataURLtoFile(dataurl, filename) {
            var mime = "png",
                bstr = atob(dataurl),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, { type: mime });
        },
        // 自己封装的上传方法
        fileToOss(file, callBack = () => {}) {
            const OSS = require("ali-oss");

            const client = new OSS({
                region: "oss-cn-beijing",
                accessKeyId: this.ossData.AccessKeyId,
                accessKeySecret: this.ossData.AccessKeySecret,
                stsToken: this.ossData.SecurityToken,
                refreshSTSToken: async () => {
                    const info = await fetch(this.ossData.StsServer);
                    return {
                        accessKeyId: info.accessKeyId,
                        accessKeySecret: info.accessKeySecret,
                        stsToken: info.stsToken,
                    };
                },
                // 刷新临时访问凭证的时间间隔，单位为毫秒。
                refreshSTSTokenInterval: 300000,
                bucket: this.ossData.bucket,
            });

            const data = file;
            let _this = this;
            async function putObject() {
                try {
                    // 后缀
                    let fileType = file.name.split(".").pop();
                    const result = await client.put(
                        "icon/" + _this.createKey(32) + "." + fileType,
                        data
                    );
                    callBack(result.url);
                } catch (e) {
                    _this.$message.error("图片上传失败，请稍后重试");
                }
            }
            putObject();
        },
        // 生成随机文件名的方法
        createKey(length) {
            const data = [
                "0",
                "1",
                "2",
                "3",
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "A",
                "B",
                "C",
                "D",
                "E",
                "F",
                "G",
                "H",
                "I",
                "J",
                "K",
                "L",
                "M",
                "N",
                "O",
                "P",
                "Q",
                "R",
                "S",
                "T",
                "U",
                "V",
                "W",
                "X",
                "Y",
                "Z",
                "a",
                "b",
                "c",
                "d",
                "e",
                "f",
                "g",
                "h",
                "i",
                "j",
                "k",
                "l",
                "m",
                "n",
                "o",
                "p",
                "q",
                "r",
                "s",
                "t",
                "u",
                "v",
                "w",
                "x",
                "y",
                "z",
            ];
            let nums = "";
            for (let i = 0; i < length; i++) {
                const r = parseInt(Math.random() * 61, 10);
                nums += data[r];
            }
            return nums;
        },
    }
  ......
}