如何用 tinymce 实现粘贴图片自动上传

前端

2023-11-15 02:03:49

tinymce 是一个所见即所得的 HTML 编辑器，它提供了丰富的功能和自定义选项，使其成为一个流行的编辑器。其中，粘贴图片自动上传是 tinymce 的一个重要功能，它允许用户直接将图片粘贴到编辑器中，而无需先将其保存到本地。

实现步骤

要实现 tinymce 粘贴图片自动上传，我们需要先配置好图片上传的服务器端接口，并设置好 tinymce 的相关选项。

配置好图片上传的服务器端接口

图片上传的服务器端接口需要能够接收图片文件，并将其保存到服务器上。我们可以使用 PHP、Java、Node.js 等语言来编写服务器端接口，也可以使用现成的第三方服务，如七牛云、又拍云等。

设置好 tinymce 的相关选项

在 tinymce 的配置选项中，我们需要设置好以下几项：

image_uploadtab: true,  // 在上传图片插件中添加额外的选项卡
images_upload_url: '/upload.php', // 图片上传的服务器端接口地址
images_reuse_filename: true, // 是否重用上传的图片文件名

处理粘贴图片后图片变2张的问题

tinymce 默认的粘贴处理方式是将图片粘贴为 base64 字符串，这会导致粘贴一张图片后图片变成两张。为了解决这个问题，我们需要重写 tinymce 的 pasteHtml 方法，并对粘贴的图片进行特殊处理。

tinymce.PluginManager.add('paste', function (editor, url) {
    editor.on('Paste', function (e) {
        var content = e.content;
        if (content.indexOf('data:image') !== -1) {
            var blob = dataURLtoBlob(content);
            var formData = new FormData();
            formData.append('image', blob);

            $.ajax({
                url: '/upload.php',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    var img = '<img src="' + res.url + '" alt="' + res.name + '" />';
                    editor.insertContent(img);
                }
            });
        }
    });
});

function dataURLtoBlob(dataURL) {
    var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type: mime});
}