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

1. SETUP INSTRUCTIONS
2. External Libraries used in this project
3. How do I get set up?
4. For Standalone Usage
5. Who do I talk to?

SETUP INSTRUCTIONS ¶

Introduction ¶

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

Version ¶

1.0.0

Requirements ¶

• php >5.0
• php Extensions
  • php_bz2.dll
  • php_fileinfo.dll
  • php_intl.dll

External Libraries used in this project ¶

• JQuery 2.x.
• JQuery UI - v1.12.1.
• JQuery UI Positioning.
• JQuery Nailthumb v1.1 by Garlab.
• JQuery Context Menu.
• Bootstrap v3.1.1.
• VideoJs

Tested With ¶

• Yii v1.x.
• Jquery v2.x.x
• Browsers
  • Microsoft Edge 40.15063.674.0
  • Microsoft EdgeHTML 15.15063
  • Mozilla FF 56.0.1 (64-bit)
  • Chrome Version 62.0.3202.62 (Official Build) (64-bit)

    Integrations ¶

• Text Editors
• Standalone file manager Yii 1.x

Flavours ¶

• TinyMCE all versions up to latest v4.x.
• CKEditor v4.x
• RedactorJs Redactor v9.x.

Demo ¶

• Click here to see the TinyMCE Demo
• Click here to see the CKEditor Demo
• Click here to see the RedactorJs Demo

Features ¶

• Upload Files

  • Supported File Types jpg, gif, png, bmp, zip, gif, jpeg, tiff, mp4, flv, doc, docx, pdf, ppt, xls, xlsx, pptx, txt, zip, gzip, rar.

  _Note: you might need to update the upload_max_filesize in your php.ini if it is below 2MB as the allowed upload filesize is 2MB in the protected/models/TinyiiAssetUploadForm.php._

• Delete File(s) / Folder(s)

  • You can Delete Multiple files at a time by selecting them and using settings menu from the top toolbar that appears after selecting any file, or a single file by right-clicking on it and using the context menu.

  Delete Multiple Files

  

  Delete Single File

  

  Note: Multiple folder deletions is not supported yet.

• Copy File(s) / Folder(s)

  • You can Copy Multiple files at a time by selecting them and using settings menu from the top toolbar that appears after selection, or a single file by right-clicking on it and using the context menu.
  • For folders you can copy one folder at a time multiple folder copy pasting is not supported, you can copy & paste a folder to another by using right-click context menu.

  See below for screen grabs

  COPY Multiple Files

  

  Copy Single File

  

• Cut / Drag- Drop File(s) / Folder(s)

  • You can "Cut" Multiple files at a time by selecting them and using settings menu from the top toolbar that appears after selection, or a single file by right-clicking on it and using the context menu.
  • You can also drag-drop files on to folders to move them inside the folder one by one at a time. Selecting multiple files and dragging them on to the folder is not supported.
  • For folders multiple selections is not supported you can cut & paste a folder by using right-click context menu or you can drag & drop a folder on to another folder to move it.

  Note: You can move a file or folder 1 level up to the previous directory by dragging & dropping it over the previous directory link when you are inside a subdirectory.

  See below for screenshots.

  Cut Multiple Files

  

  Cut Single File

  

  Drag Drop Files

  

• Pasting

  Once you Copy or Cut a file by selecting the context menu, you can paste files by right-clicking on any blank area inside the file manager. See below.

  

• Rename File(s) / Folder(s)

  You can Rename files by right-clicking on it and using the context menu.

  

• Add Folder

  You can Create a folder Using create Folder button from the top toolbar.

  

• List View

  You can view the files in list view mode using Listview icon in the toolbar.

  

• Thumbnail View

  You can view the files in Thumbnail mode using thumbnails icon in the toolbar.

  

• Sort Files

  You can Sort files in the current directory by using sort drop-down on the top right of the file manager toolbar and choosing sort option.

  

• Filter Files

  You can Filter files in the current directory by Typing in the filter box on top right of the file manager toolbar.

  

• Download Files

  You can download a single file or multiple files by selecting them. The selected files are compressed into a single zip file and then provided for download.

• Preview Files

  You can preview all file types listed above in the supported file types for File Uploads section.

  You can click the file to preview it if you are in Listview Mode, and right-click on file to open the context menu and select preview to preview the file if you are in Thumbview Mode.

  

  Preview Categories

  The file preview is categorized into the following sections.

  • Images (jpg, gif, png, bmp, zip, gif, jpeg, tiff,)

    + Uses fancyBox preview window to show the supported image file types.   
    

  • Documents (doc, docx, pdf, ppt, xls, xlsx, pptx, txt)

    + Uses google docs viewer inside fancybox window to preview the supported document file types.
    

  • Media (mp4, flv)

    + So far the media types supported are video only and the plugin uses video js to preview the video file types inside the fancybox window.
    

    • Compressed Files (zip, gzip, rar)
      • You can preview the contents of a compressed file inside a fancybox window.

    See below for screenshots.

    Image Preview

    

    Compressed Files Preview

    

    Video Preview

    

• Insert Files To Editor

  You can insert the files into the editor by double-clicking them. The file insertion tag for the editor varies on their types.

  • Media Tags

    Media files are inserted as a video tag inside the editor you can preview the media file with the editor preview function.

  • Anchor Tags

    Documents and Compressed files are inserted as a download link inside the editor.

  • Image Tags

    All images are added as an image tag inside the editor.

How do I get set up? ¶

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

• Editor Plugin
• Standalone (For Admin Only)

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.

• Github
• YiiFramework
• Idowstech

Copy the following to the relevant directories as described below.

• protected/config/params.php -> protected/config (if you have an existing params.php file add the contents from this file to your params.php file)
• protected/controllers/FilemanagerController -> protected/controllers/
• protected/views/filemanager -> protected/views
• protected/models/*.* -> protected/models/*.*

• protected/components/Helper.php -> protected/components (if you have an existing Helper.php class file add all the static methods from this file to your Helper.php class file)

• protected/components/WebUser.php -> protected/components/ make sure you have a user model associated with your DB table user.

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. ¶

• plugins/idowsfilemanager -> _copy to the plugins directory inside the tinymce plugin source my path is my_app_webroot/js/tinymce/plugins/idowsfilemanager_

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

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. ¶

• plugins/idowsfilemanager -> _copy to the plugins directory inside the ckeditor plugin source directory my path is my_app_webroot/js/ckeditor/plugins/idowsfilemanager_

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.

• Download YiiBooster Extension or copy the added sources to your applications extensions directory.

• protected/extensions/booster -> protected/extensions/

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',
    ),` 

• Then copy files from plugins/redactor/idowsfilemanager -> to the plugins directory inside the redactorjs plugin source directory my path is protected/extensions/booster/assets/redactor/plugins/idowsfilemanager

After you have copied all the sources you need to initialize 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']
            ] ,
        ]
    );

• Important Please note that the name is set to "content", which is required for Redactor plugin to fetch the original data from the input and paste it into its editor view. If you do not set "name" or set it to any other value, the value of value property of this widget will be completely ignored!

• Important In addition to the previous note, if you have several Redactor instances on the same page, you must use the htmlOptions property to set the HTML ID of each Redactor instance to different values.

Enable Pretty URLs

Note: After configuring any of the editors above you should go to your protected/config/main.php and turn on pretty 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.

For Standalone Usage ¶

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

http://yourdomain.com/filemanager/index

Who do I talk to? ¶

• buttflattery@hotmail.com
• buttflattery@gmail.com
• omeraslam@idowstech.com