CKEditor 在对话框中加载内容 window

Question

我正在为 CKEditor & Yii 1 开发一个文件管理器插件。我在编辑器工具栏上创建了一个按钮，单击该按钮我打开了一个对话框 window。为了加载 window 的内容/html，我正在对我的控制器操作进行 ajax 调用，即加载视图的 filemanager/index。在该视图中，我有一个 javascript 调用，它启动文件管理器插件，并使用 id="fileview" 将上传目录中的所有文件填充到主 div，现在我的问题是 javascript 无论我在索引操作中使用 renderPartial('viewname',[],false,true) ，视图内的调用都不会执行。

我有适用于 tinyMCE 的插件，目前我正在尝试重用文件管理器脚本以与 CKEditor 一起使用我的文件管理器脚本在 idows-file-browser.min.js 中，我调用 idowsFileBrowser.init()初始化它，但在 tinyMCE 插件中我使用 windowmanager.open() 这绝对不是 ajax 调用感染它打开 window 并加载从控制器操作返回的内容。

我正在尝试寻找一种无需对现有插件脚本文件或视图进行任何更改的方法，但对于 CKEditor 我似乎需要移动 idowsFileBrowser.init() 在收到 ajax 调用的响应后在 idowsfilemanagerdialog.js 文件中调用。

任何人都可以帮助我让它在不改变流程的情况下工作。

idowsfilemanagerdialog.js

CKEDITOR.dialog.add('idowsfilemanagerDialog', function(editor) {
    return {
        title: 'Tinyii Filemanager By IDOWS',
        minWidth: 850,
        minHeight: 600,
        contents: [{
            id: "File list",
            elements: [{
                type: 'html',
                id: 'foo',
                html: '<div id="main-container"></div>',
            }]
        }],
        onLoad: function() {
            var document = this.getElement().getDocument();
            var element = document.getById('main-container');

            $.ajax({
                url: '/filemanager/index',
                method: 'get',
                dataType: 'html',
                data: {
                    editor: '_CK'
                }
            }).done(function(res) {
                if (element) {
                    element.setHtml(res);
                }
            });

        },
    };
});

FilemanagerController 中的索引操作

/**
     * Index main Entry Action for filemanager
     * Opens Main modal window for the file manager
     */
    public function actionIndex() {
        $model = new TinyiiAssetUploadForm();
        $uploadDir = str_replace ( "\" , "/" , Yii::app ()->basePath . '/..' . Yii::app ()->params['UPLOAD_DIR'] );
        $uploadDirExists = is_dir ( realpath ( $uploadDir ) );

        if ( !$uploadDirExists ) {
            throw new Exception ( 'The upload directory you specified in your param file does not exist.' . $uploadDir );
        }
        $this->renderPartial ( 'dialog' , array( 'model' => $model ) , false , true );
    }

查看文件

    $cs->registerScriptFile ( Yii::app ()->params['PLUGIN_DIR'.$this->editorType] . '/js/idows-file-browser.min.js' );
    $cs->registerScript ( 'loadtree' , 'idowsFileBrowser.init();',CClientScript::POS_LOAD );
    ?>
    <?php echo $this->renderPartial ( 'alerts' ); ?>
    <div class="idows-container-body">

        <div class="idows-abs-end"></div>
        <div class="idows-container idows-first idows-last" >
            <div class="idows-container-body " style="width:100%;">

                <div class="idows-abs-end"></div>
                <div class="idows-container idows-first" style="border-width: 0px 0px 1px; left: 0px; top: 0px; height: 38px;">

                    <!--UPLOAD PROGRESS INFO BAR-->
                    <div id="upload_in_progress" class="upload_infobar">
                        <img src="<?= Yii::app ()->params['PLUGIN_DIR'.$this->editorType] ?>/skin/img/loader.gif" width="16" height="16" class="spinner">
                        Upload in progress&hellip; 
                        <div id="upload_additional_info"></div>
                    </div>
                    <div id="upload_infobar" class="upload_infobar"></div>

                    <!--CONTROLS CONTAINER-->
                    <div class="idows-container-body idows-menubar idows-panel" style="width: 100%;">
                        <div class="idows-abs-end"></div>
                        <?php echo $this->renderPartial ( 'controls' , [ 'model' => $model ] ); ?>
                    </div>
                    <!-- FILE BROWSER  -->
                    <div class="idows-container idows-float-panel idows-last" role="group" style="position: relative;">
                        <div class="idows-thumbnailview" id="file_container">
    <div class="idows-container-body idows-flow-layout" id="fileview">
    </div>
</div>
                    </div>
                    <?= CHtml::hiddenField ( 'current_template' , 'thumbview' , [ 'id' => 'current_template' ] ); ?>
                </div>
            </div>
        </div>
    </div>
    <!-- IFRAME FOR FILE UPLOAD -->
    <iframe id="upload_target" name="upload_target" src="<?= Yii::app ()->getBaseUrl ( true ) ?>/index.php?r=filemanager/blank"></iframe>

    <!-- THICK BOX CONTAINER AND MASK -->
    <div id="dialog" class="window">
        <a href="#." class="close-preview"/>x</a>
    </div>
    <div id="overlay"></div>
    <?=
    $this->renderPartial ( 'bootstrap-modals' )?>

Answer 1

看起来我必须遵循与 tinyMCE 相同的模式 window 结构，这意味着创建一个 iframe 并将其指向操作 /filemanager/index 并且所有工作都像魅力，ajax 调用不会运行并加载视图文件中内联 javascript 的内容，这是我的对话框的代码 onLoad 其他人正在尝试做一样。

CKEDITOR.dialog.add('idowsfilemanagerDialog', function(editor) {
    return {
        title: 'Tinyii Filemanager By IDOWS',
        minWidth: 850,
        minHeight: 650,
        buttons: false,
        contents: [{
            id: "File list",
            elements: [{
                type: 'html',
                id: 'foo',
                html: '<div id="main-container"></div>',
            }]
        }],
        onLoad: function() {
            let document = this.getElement().getDocument();
            $('<iframe>', {
                id: 'file-manager-frame',
                src: '/filemanager/index?editor=_CK',
                frameborder: 0,
                width: this.definition.dialog.definition.minWidth,
                height: this.definition.dialog.definition.minHeight,
            }).appendTo("#main-container");
        },
    };
});

CKEditor 在对话框中加载内容 window

CKEditor Loading Content in Dialog window

javascript

ajax

ckeditor

yii1.x