CKEditor在对话框窗口中加载内容

时间:2017-10-28 02:03:14

标签: javascript ajax ckeditor yii1.x

我正在为CKEditor & Yii 1开发一个文件管理器插件。我在编辑器工具栏上创建了一个按钮,在单击该按钮时,我打开了一个对话框窗口。为了加载窗口的内容/ 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调用感染它打开一个窗口并加载从控制器操作返回的内容。

我正在尝试寻找一种方法,我不需要为现有的插件脚本文件或视图更改任何内容,但似乎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' )?>

1 个答案:

答案 0 :(得分:0)

看起来我必须遵循与tinyMCE相同的模态窗口结构,这意味着创建一个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");
        },
    };
});