Question

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

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

这是我的代码：

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。

它会自动上传您要编辑的图像。它需要图片新的网址作为回应。

以下是有人需要将来参考的代码。

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中裁剪后上传图片

2 个答案: