在tinymce 4中裁剪后上传图片

Question

我正在开发 tinymce，我已经实现了 imagetools。现在，当图像被插入到文本编辑器中，然后我 edit/crop 图像时，它会将图像 src 更改为类似 blob:www.localhost/asdf-ghij.

的内容

我想要的是在裁剪后我可以将此 url 发送到我的 php 脚本，以便我可以将此图像保存在我的服务器上。但是我不知道我应该使用 event/function。

这是我的代码：

tinymce.init({
    selector:'textarea',
    plugins:[
        'advlist autolink lists link image imagetools charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table contextmenu paste code'
    ],
    toolbar:'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code',
    height:300,
    imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
    automatic_uploads: false,
    remove_script_host : false,
    convert_urls : false,
    relative_urls : false,
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    },
    file_browser_callback_types: 'file image media',
    file_browser_callback: function(field_name, url, type, win) {
        tinymce.activeEditor.windowManager.open({
            title: 'Browse Image',
            file: '/admin/images/show-images',
            width: 1200,
            height:400,
            resizable : "yes",
            close_previous : "no",

            buttons: [{
                text: 'Insert',
                classes: 'widget btn primary first abs-layout-item',
                disabled: false,
                onclick: 'close'
            }, {
                text: 'Close',
                onclick: 'close',
                window : win,
                input : field_name
            }]
        }, {
            oninsert: function(url) {
                win.document.getElementById(field_name).value = url;
            }
        });
        return false;
    }
});

一切正常。除了我提到的问题。

Answer 1

好的，我明白了。

我所要做的就是设置 automatic_uploads:true。并实施 images_upload_handler.

它会自动上传您要编辑的图片。它采用新图像 url 作为响应。

这是代码，以备日后有人需要时参考。

tinymce.init({
    selector:'textarea',
    plugins:[
        'advlist autolink lists link image imagetools charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table contextmenu paste code'
    ],
    toolbar:'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code',
    height:300,
    imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
    automatic_uploads: true,
    remove_script_host : false,
    convert_urls : false,
    relative_urls : false,
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    },
    file_browser_callback_types: 'file image media',
    file_browser_callback: function(field_name, url, type, win) {
        tinymce.activeEditor.windowManager.open({
            title: 'Browse Image',
            file: '/admin/images/show-images',
            width: 1200,
            height:400,
            resizable : "yes",
            close_previous : "no",

            buttons: [{
                text: 'Insert',
                classes: 'widget btn primary first abs-layout-item',
                disabled: false,
                onclick: 'close'
            }, {
                text: 'Close',
                onclick: 'close',
                window : win,
                input : field_name
            }]
        }, {
            oninsert: function(url) {
                win.document.getElementById(field_name).value = url;
            }
        });
        return false;
    },
    images_upload_handler: function(blobInfo, success, failure){
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST','/admin/images/upload-blob');
        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            success(json.url);
        };
        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
    }
});

Answer 2

将 automatic_uploads 更改为 true 并添加 images_upload_url 即可：

tinymce.init({
  selector:'textarea',
  automatic_uploads: true,
  images_upload_url: 'postAcceptor.php'
});

新创建的图像将获得文件名 'imagetools0.jpg'、'imagetools1.jpg' 等

N.B。 postAcceptor.php 的源代码可以在 TinyMCE 网站的 PHP Upload Handler 页面找到。

在tinymce 4中裁剪后上传图片

upload image after crop in tinymce 4

javascript

jquery

tinymce-4