View on GitHub

idows-tinyii-filemanager

File Manager Plugin for TinyMCE, Redactor & CKEditor to be intergrated within Yii 1.x frameworks

Tinyii v1.0 - IDOWS File Manager Plugin for YII 1.xx By IDOWSTECH

INTRODUCTION

TinYii Filemanager is a Text Editor plugin that is used to manage assets and files using Yii 1.x framework. You can use TinYii Filemanager as a plugin for Text Editors or use it as a standalone filemanager.

Version

1.0.0

Requirements

External Libraries used in this project

Tested With

Flavours

Demo

Features

SETUP INSTRUCTIONS

How do I get set up?

Filemanager can be configured to be used in 2 different ways.

As a plugin with Text Editors

Clone or download the source files from any of the following links and unzip files anywhere on your drive.

Copy the following to the relevant directories as described below.

Open protected/config/main.php and add the following to the components section.

'user'=>array(
   'class' => 'WebUser',
),

Open protected/config/params.php file and update the PLUGIN_DIR and UPLOAD_DIR contants relevant to your project root.

'UPLOAD_DIR' => DIRECTORY_SEPARATOR . 'images' . DIRECTORY_SEPARATOR . 'tinyii-uploads' ,
'PLUGIN_DIR' => DIRECTORY_SEPARATOR . 'js' . DIRECTORY_SEPARATOR . 'tinymce' . DIRECTORY_SEPARATOR . 'plugins' . DIRECTORY_SEPARATOR . 'idowsfilemanager',
'PLUGIN_DIR_CK' => DIRECTORY_SEPARATOR . 'js' . DIRECTORY_SEPARATOR . 'ckeditor' . DIRECTORY_SEPARATOR . 'plugins' . DIRECTORY_SEPARATOR . 'idowsfilemanager',

You should assign valid paths for these directories and make sure they exist.

Note: If you are logged in as a guest or a normal user you can access the plugin via editor button only. If you are logged in as an admin you will be provided access to both the interfaces standalone and Editor.

Configuring Editor To use The Plugin

####1. TinyMCE 3.x, 4.x.####

After you have copied all the sources from the extracted zip file you need to configure the editor to use the plugin.

Copy the following to the head of the document where you want to integrate the editor. Place the very first line

$baseUrl = Yii::app ()->getBaseUrl ( true );

to the top of your view file, and then paste the

tinymce.init

section to the head or you can use Yii::app()->clientScript() to load the script on Document ready i.e CClientScript::POS_READY.

 $baseUrl = Yii::app ()->getBaseUrl ( true );
 
 Yii::app ()->getClientScript ()->registerScript ( 'init_tinymce' , ' // Tiny MCE
             tinymce.init({
                document_base_url: "'.$baseUrl.'/js/tinymce/plugins/idowsfilemanager/",
                relative_urls:true,
                selector: "textarea",
                plugins: [
                    "idowsfilemanager"
                ],
                toolbar1: "idowsfilemanager",
                 fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
                image_advtab: true,
            });
            ' , CClientScript::POS_READY );

You can either copy paste the whole code block or if you already have setup editor with your custom configurations and set of plugins you can copy only these 2 options.

document_base_url: "'.Yii::app ()->getBaseUrl ( true ).'/js/tinymce/plugins/idowsfilemanager/" ,
relative_urls:true

Then include idowsfilemanager to your plugins and toolbar options.

####2. CKEditor 4.x.####

After you have copied all the sources from the extracted zip file you need to configure the editor to use the plugin.

$cs = Yii::app ()->getClientScript ();
$cs->registerScriptFile ( '/js/ckeditor/ckeditor.js' , CClientScript::POS_HEAD );
$cs->registerScript ( 'init-editor' , 'CKEDITOR.replace("ck_custom",{customConfig:"/js/config.js"})' , CClientScript::POS_READY );

**/js/config.js**
//CKEditor configuration file
CKEDITOR.editorConfig = ( config ) => {
    config.language = 'en';
    config.extraPlugins = 'idowsfilemanager';
    config.uiColor = '#f8f8f8';
    config.height = 300;
    config.toolbarCanCollapse = true;
};

That is all you need to do for CKEditor, now refresh the page and click the IDOWS Filemanager button.

####3. RedactorJs 9.x.####

Important This library is NOT free to use. Community license for it was generously bought by the Yii community to be used with YiiBooster Extension 4.xx based on Bootstrap 3.1.1 and later, so you can use YiiBooster legally in Yii-based projects ONLY.

After copying the files open protected/config/main.php and add booster to your preload array

'preload'=>array('log','booster')

and add the following to the components array.

'booster' => array(
    'class' => 'application.extensions.booster.components.Booster',
),`

After you have copied all the sources you need to initalize and configure the Redactor Editor to use the plugin. You need to initialize the editor using the yii booster extension. See below.

$cs = Yii::app ()->getClientScript ();
$this->widget (
    'booster.widgets.TbRedactorJs' , [
        'name' => 'content' ,
        'id'=>'content_id',
        'value' => 'A sample text to load into the editor!' ,
        'editorOptions' => [
            'lang' => 'en' ,
            'plugins' => [ 'fontfamily' , 'textdirection', 'idowsfilemanager']
        ] ,
    ]
);

Enable Pretty Urls

Note: After configuring any of the editors above you should go to your _protected/config/main.php and turn on prettyl urls by adding the urlManager inside the components section like below as the calls inside the script use pretty urls._

'urlManager'=>array(
		'urlFormat'=>'path',
        'showScriptName'=>false,
		'rules'=>array(
			'<controller:\w+>/<id:\d+>'=>'<controller>/view',
			'<controller:\w+>/<action:\w+>/<id:\d+>'=>'<controller>/<action>',
			'<controller:\w+>/<action:\w+>'=>'<controller>/<action>',
		),
	),

if all above is done correctly then browse the page where you have configured any of the above Text Editors, once the editor loads you can see the IDOWS Tinyii Filemanager button in the toolbar and you are all done.

image-preview

For Standalone Usage

All the steps you followed above are to be followed for the Standalone usage excluding the steps for the Editor Confguration, go to your web application and access the following url while logged in with the admin user.

http://yourdomain.com/filemanager/index

image-preview

Who do I talk to?