I am working on a file manager plugin for CKEditor & Yii 1. I have created a button on the editor toolbar and on clicking that button i am opening a dialog window. For loading the content / html of the window i am making an ajax call to my controller action i.e filemanager/index which loads the view. Inside that view i have a javascript call which initiates the file manager plugin, and populates all the files in the upload directory to the main div with id="fileview", now my problem is that the javascript call inside the view is never executed no matter i used renderPartial('viewname',[],false,true) inside my index action.
I have the plugin working for tinyMCE and currently i am trying to reuse the file manager script to work with CKEditor my file manager script is in idows-file-browser.min.js and i call idowsFileBrowser.init() to initialize it, but in tinyMCE plugin i am using windowmanager.open() which is definitely not an ajax call infect it opens a window and load the content returned from the controller action.
I am trying to look for a way that i do not have to change anything for the existing plugin script file or the views, but it seems like that for CKEditor i might need to move the idowsFileBrowser.init() call inside the idowsfilemanagerdialog.js file after receiving the response from the ajax call.
Can anyone help me out to make it work without changing the flow.
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);
}
});
},
};
});
index action inside the 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 );
}
View file
$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…
<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' )?>
Looks like i had to follow the same modal window structure as tinyMCE is following that means creating an iframe and pointing it to the the action /filemanager/index and all worked like a charm, the ajax call wont run and load content for the inline javascript inside the view file, here is the code for my dialog's onLoad anyone else is trying to do the same.
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");
},
};
});