开发者

Upload callback in CKEditor

I'm trying to configure CKEditor to allow the user to upload an image from her computer. I'm using filebrowserUploadUrl, so I can upload the image to the server and get back the URL assigned to it, but I can't figure out how to pass the URL to the 开发者_StackOverflow社区actual editor...

Some examples on the net talk about returning from the server something like <script>parent.CKEDITOR.tools.callFunction ..., but I think it's quite ugly, isn't there a way to tell CKEditor "after the image is uploaded, call this function'?


The server shouldn't return javascript for the client to render.

Even though the following is an ugly ugly... ugly hack.. I still prefer it over sending javascript from the server:

(Example of automatically inserting the image in the editor once the image is uploaded - works with 4.4.7)

var onUploadImage = function (dialog) {

    // Get the contents in the iframe
    var iframe = $('.cke_dialog_ui_input_file iframe');
    iframe.one('load', function(ev) {
        var fileUrl = ev.target.contentDocument.body.innerText;
        dialog.getContentElement('info', 'txtUrl').setValue(fileUrl);
        $(".cke_dialog_ui_button_ok span").click();
    });
};

var onLoadImageDialog = function () {
    var dialog = CKEDITOR.dialog.getCurrent(); 

    // Open default tab
    this.selectPage('Upload');

    $('.cke_dialog_ui_fileButton').click(onUploadImage.bind(null, dialog));
};

var onDialogDefinition = function( ev ) {
    var name = ev.data.name;
    var definition = ev.data.definition;
    if ( name !== 'image' ) {
        return;
    }
    definition.onLoad = onLoadImageDialog
};

CKEDITOR.on('dialogDefinition', onDialogDefinition);

Of course, the right way would be to create a custom plugin.


Read again the syntax: you get the CKEDITOR object and tell it to call back a function, so it does exactly what you want.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜