Question

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

我有一个独特的场景，要求我的图像上传器/图像管理系统托管在单独的服务器上。因此，我遇到了安全错误阻止源于跨源框架的错误帧。

通过研究，我无法找到解决此问题的明确答案；尽管可能已经有一种方法可以做到这一点，但我还是想在这里发布我的解决方法，以防其他人可以使用它。

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

在图像管理解决方案中使用此功能来传递跨源服务器的网址。

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

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

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

1 个答案: