#9073 ImageUpload 回调无法跨域调用 CKEditor

Question

https://dev.ckeditor.com/ticket/9073

我有一个独特的场景，需要我的图像 uploader/image 管理系统托管在单独的服务器上。正因为如此，我运行进入了 security-error-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame 错误。

通过我的研究，我无法找到解决这个问题的明确答案；虽然可能已经有办法 this/better 了，但我想 post 我的解决方法在这里，以防其他人可以使用它。

Answer 1

CKEDITOR.on( 'dialogDefinition', function( ev ) {
console.log('dialof def');
var dialogName = ev.data.name,
dialog = ev.data.definition.dialog;

//verify dialog is of name image
if ( dialogName == 'image' ) {

    //on show create click event listener
    dialog.on('show', function(){
        window.addEventListener("click", evalClickEventType, false);
    })

    //evaluate click event to ensure it is Browse Server button
    function evalClickEventType(event){
        if(event.srcElement.innerText == 'Browse Server'){
            createMessageListener();
        } 

        //if either type of close, or ok, remove clickEventListener
        else if (event.srcElement.innerText == 'OK' || event.srcElement.innerText == 'X' || event.srcElement.innerText == 'Cancel'){
            window.removeEventListener("click", evalClickEventType, false);
        }
    }

    //add event listener for type message
    function createMessageListener()
    {
        window.addEventListener("message", receiveMessage, false);
    }

    //set value to txtUrl when event message is emitted.
    function receiveMessage(event){
        CKEDITOR.dialog.getCurrent().setValueOf( 'info', 'txtUrl', event.data );
        window.removeEventListener("message", receiveMessage, false);
    }     
}});

然后简单地替换

window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );

在您的图像管理解决方案中使用这个从跨源服务器传递 url。

var targetWindow = window.opener;
targetWindow.postMessage(imgSrc, "*")

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

#9073 ImageUpload 回调无法跨域调用 CKEditor

#9073 ImageUpload callback can not be called cross-domain CKEditor

ckeditor

ckeditor4.x