TinyMCE 可以将粘贴为数据的图像转换为上传吗？

Question

我正在使用 TinyMCE 5.7，它可以很好地处理上传图像。但是，当从剪贴板（例如：截图工具）粘贴图像时，它会被粘贴为不需要的数据。我可以使用设置 paste_data_images 来阻止粘贴数据图像，但我更希望它将数据转换为上传请求，就像正常的图像上传过程一样。有没有办法拦截粘贴并上传？我同时使用图像和粘贴插件。谢谢

Answer 1

最后我想出了如何编写自己的粘贴功能。首先，在 TinyMCE 配置中：

        setup: function (editor) {
        editor.on('paste', function (e) {
            var imageBlob = retrieveImageFromClipboardAsBlob(e);
            if (!imageBlob) {
                return;
            }
            e.preventDefault();
            uploadFile(imageBlob, function (response) {
                if ('location' in response) {
                    if (editor) {
                        // console.log('upload completed', response);
                        editor.insertContent('<img src="' + response.location + '" />');
                    } else {
                        console.log('Tinymce editor not found!');
                    }
                }
            });
        });
    }

然后是解码粘贴信息的例程：

function retrieveImageFromClipboardAsBlob(pasteEvent) {
    if (pasteEvent.clipboardData === false) {
        return false;
    }

    var items = pasteEvent.clipboardData.items;

    if (items === undefined) {
        return false;
    }

    for (var i = 0; i < items.length; i++) {
        // Only paste if image is only choice
        if (items[i].type.indexOf("image") === -1) {
            return false;
        }
        // Retrieve image on clipboard as blob
        var blob = items[i].getAsFile();

        // load image if there is a pasted image
        if (blob !== null) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // console.log('result', e.target.result);
            };
            reader.readAsDataURL(blob);
            return blob;
        }
    }
    return false;
}

和上传文件的例程

function uploadFile(file, callback) {
    var xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function (e) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log("Uploaded: " + percentComplete + "%");
    };

    xhr.onload = function () {
        if (xhr.status !== 200) {
            alert("Error! Upload failed " + xhr.response);
        }
        if (callback) {
            callback(JSON.parse(xhr.response));
        }
    };

    xhr.onerror = function () {
        alert("Error! Upload failed. Can not connect to server.");
    };

    xhr.open("POST", "/upload/tinymce", true);
    var data = new FormData();
    data.append('file', file);
    xhr.send(data);
}

TinyMCE 可以将粘贴为数据的图像转换为上传吗？

Can TinyMCE convert image pasted as data to an upload?

tinymce-plugins

tinymce-5