在tinymce 4中裁剪后上传图片 [英] upload image after crop in tinymce 4

问题描述

我正在研究tinymce并且我已经实现了imagetools。现在，当图像插入文本编辑器然后我编辑/裁剪图像时，它会将图像src更改为 blob：www.localhost / asdf-ghij 。

I am working on tinymce and I have implemented imagetools. Now when image gets inserted in the text editor and then I edit/crop the image it changes the image src to something like blob:www.localhost/asdf-ghij.

我想要的是裁剪后我可以将这个网址发送到我的PHP脚本，以便我可以将此图像保存在我的服务器上。但我不知道我应该使用的事件/功能。

What I want is after cropping I can send this url to my php script so that i can save this image on my server. But I have no idea of the event/function that i should use.

这是我的代码：

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;
    }
});

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

Everything is working fine. except the problem I mentioned.

推荐答案

好的我知道了。

我所要做的就是设置 automatic_uploads：true 。
并实现 images_upload_handler 。

All I had to do was set automatic_uploads:true. and implement images_upload_handler.

它将自动上传您要编辑的图像。它会在图片中显示新的网址。

It will automatically upload the image that you will edit. It takes image new url in response.

以下是有人需要以供日后参考的代码。

Here is the code in case someone needs for future reference.

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);
    }
});

这篇关于在tinymce 4中裁剪后上传图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！