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.
1.0.0
- php >5.0
- php Extensions
- php_bz2.dll
- php_fileinfo.dll
- php_intl.dll
- 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
- 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)
- Text Editors
- Standalone file manager Yii 1.x
- TinyMCE all versions up to latest v4.x.
- CKEditor v4.x
- RedactorJs Redactor v9.x. YiiBooster Only
- Click here to see the TinyMCE Demo
- Click here to see the CKEditor Demo
- Click here to see the RedactorJs Demo
-
Uplaod 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 yourphp.ini
if it is below 2MB as the allowed upload filesize is 2MB in theprotected/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 selecing 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 deletion 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 selection is not supported you can
cut & paste
a folder by using right-click context menu or you candrag & drop
a folder on to another folder to move it.
Note: You can move a file or folder 1 level up to 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 top toolbar.
-
List View
You can view the files in list view mode using Listview icon in toolbar.
-
Thumbnail View
You can view the files in Thumbnail mode using thumbnails icon in toolbar.
-
Sort Files
You can Sort files in the current directory by using sort drop-down on top right of the filemanager 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 filemanager ttoolbar.
-
Download Files
You can download 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 in 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 screeshots.
Image Preview
Compressed Files Preview
Video Preview
-
-
Insert Files To Editor
You can insert the files inside the editor by double clicking them. The file insertion tag for the editor vary 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.
-
Filemanager can be configured to be used in 2 different ways.
- Editor Plugin
- Standalone (For Admin Only)
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.
-
protected/config/params.php
->protected/config
(if you have an existingparams.php
file add the contents from this file to yourparams.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 existingHelper.php
class file add all the static methods from this file to yourHelper.php
class file) -
protected/components/WebUser.php
->protected/components/
make sure you have a user model associated with you 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.
####1. TinyMCE 3.x, 4.x.####
plugins/idowsfilemanager
-> copy to the plugins directory inside the tinymce plugin source my path ismy_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 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.####
plugins/idowsfilemanager
-> copy to the plugins directory inside the ckeditor plugin source directory my path ismy_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 isprotected/extensions/booster/assets/redactor/plugins/idowsfilemanager
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']
] ,
]
);
-
Important Please note that the name is set to "content", which is required for Redactor plugin to fetch the original data from 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 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 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.
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.