Home » Drupal original modules

pict-drupal-module.pngTinyBrowser module is a Drupal module which integrates TinyBrowser with TinyMCE or FCKeditor.

What is TinyBrowser?

TinyBrowser is a custom file browser plugin developed for the TinyMCE WYSIWYG content editor. It is developed by Bryn Jones at Lunarvis, and distributed under the GNU General Public License.

Feature of TinyBrowser

  • Integrates as a custom file browser within TinyMCE for image, media and 'all' file types
  • Adobe Flash based file uploader, supporting multiple file selection and upload with file type and size filtering (permission based)
  • Browse files with a list view or as thumbnails (images only)
  • List view has image thumbnail on hover
  • File display order customizable e.g. by name, type, size, date
  • Find function to filter results by search string
  • Display detailed file information such as type, size and dimensions (images only)
  • File deletion facility (permission based)
  • File edit facility (permission based) - rename, resize and rotate (last two images only)
  • File storage location user definable for each file type

*NOTE* The feature list above is an extract from original TinyBrowser's web site.

Below is the TinyBrowser's browser window for the image files. As you can see, it uses thumbnails to make the image file browsing easy and intuitive.

ss-tinybrowser-1.png
Below is the file upload panel the TinyBrowser. It uses Flash based front-end program to make it possible to easily upload multiple files at a time. This is the biggest advantage of TinyBrowser compared with other file browsers.

ss-tinybrowser-2.png TinyBrowser module is developed to integrate TinyBrowser to Drupal, with some additional features which are important for CMS like Drupal.

Feature of TinyBrowser module

  • Supports multi-site, multi-user, multi-role environments.
  • Supports directory quota for upload directories.
  • Use the similar modules settings as IMCE module so that IMCE users can easily setup and try it.
  • Supports TinyMCE, FCKeditor and CKEditor
  • Supprots TinyTinyMCE, FCKeditor, CKEditor and Wysiwyg Drupal modules.
  • Adds TinyBrowser menu at user profile page.

Requirement

  1. CleanURL is enabled.
  2. $cookie_domain is enabled and defined in the settings.php of the site.
  3. PHP safe_mode OFF.
  4. No Javascript aggregation and optimization.
    TinyBrowser would work neither Javascript Aggregator module nor Optimize Javascript file setting ON at Administer > Site configuration > Performance setting page.

Usage Limitation

TinyBrowser can be used only by authenticated users for the security reasons.

Installation

  1. First, download the latest archive of TinyBrowser module from the project page at Drupal.org.
    TinyBrowser module
    http://drupal.org/project/tinybrowser

    Extract the archive at the sites/all/modules directory just like any other 3rd party Drupal modules. A new directory named 'tinybrowser' will be created. TinyBrowser module includes the entire source code of TinyBroswer. Therefore, you do not need to download the TinyBrowser separatedly.

  2. If the $cookie_domain is not enabled nor properly set, enable and set it at the settings.php for your Drupal site. You need to change the permission of the settings.php to writable and then edit and reset it back to read-only.

  3. Go to Administer > Site builing > Modules page and enable the TinyBrowser module.

  4. Go to Administer > Site configuration > TinyBrowser page, which is the module settings page.

    First, check the WYSIWYG editor settings. TinyBrowser checks the installation of the WYSIWYG editor modules and WYSIWYG editors and pick up the correct comibination when it first time installed. If the settings is correct, then you do not need to change it. If you use TinyBrowser without using any WYSIWYG editors, leave this selection to 'None'.

    Next, create profiles and assign them to user roles. As default, only admin user (UID=1) can use the TinyBrowser with maximum permissions. If you want authenticated users to use TinyBrowser, create a profile and assign the profile to authenticated (or any other) user role. We tried to make this settings and GUI as close or same as possible with the one for IMCE file browser. So if you are using IMCE, you are already familiar with this settings.

    TinyBrowser supports browsing of three file types, regular files, image files and media files. Thumbnail view and resize, rotate image features are available for image file type only. You can specify directories to be used for these file types.
    In addition you can assign directory quota for these directories. The quota value is applied for each directory. Once it reaches the quota limit, you can not upload files using TinyBrowser. TinyBrowser's upload panel shows the remaining size dynamically. This quota is applied not only to the files uploaded by TinyBrowser but also the files added to the directory or subdirectories by any means (FTP, etc).

    The last but important setting is the permission of operations. Permission of uploading, deleting and subfolder needs to be given carefully since they may cause the security risk.

Installation - setting of WYSIWYG editor modules

To use TinyBrowser with either TinyMCE, FCKeditor or CKEditor, some extra settings are required. Currently, TinyBrowser module supports the following combination of Drupal WYSIWYG editor modules and editors.
  1. TinyTinyMCE module + TinyMCE
  2. Wysiwyg module + TinyMCE
  3. FCKeditor module + FCKeditor
  4. Wysiwyg module + FCKeditor
  5. CKEditor module + CKEditor
  6. Wysiwyg module + CKEditor
Since the extra settings differs for all these cases, we will explain them for each cases.

  1. TinyTinyMCE module + TinyMCE

    Go to module settings page at Administer > Site configuration > TinyTinyMCE. The edit the TinyMCE.init script for the Advanced mode, and add the following one line. (if the line exists, then replace it)

    file_browser_callback: tinyBrowser

    Below is the example of the top part of tinyMCE.init script for Advanced mode after adding file_browser_callback parameter.
    1.   tinyMCE.init({
    2.     mode : "exact",
    3.     file_browser_callback: "tinyBrowser",  // Added Here!!!
    4.     init_instance_callback: "resizeEditorBox",
    5.     theme: "advanced",
    6.     convert_urls: flase,
    7.     plugins: "safari,pagebreak ....
    8.      :
    9.    theme_advanced_buttons1: "bold,italic,underline ...
    10.       :
    11.   });
    This line is case sensitive. Be sure to use "tinyBrowser", not "tinybrowser". Currently, TinyTinyMCE module supports IMCE and automatically adds 'file_browser_callback: "imceImageBrowser" if IMCE module exists. We needs to do the same thing manually for the TinyBrowser. Do not forget to enable toolbar icons for image/media/link files if there are not there.

  2. Wysiwyg module + TinyMCE

    Go to the module settins page at Administer > Site configuration > Wysiwyg. Then edit the input format which you assigned to use TinyMCE editor. Go to the Buttons and Plugins section and you should see a new checkbox 'TinyBrowser' is added there. Check the checkbox and save the settings.
    Do not forget to enable toolbar icons for image/media/link files if there are not there.

  3. FCKeditor module + FCKeditor

    This is a bit difficult steps. Currently, you should apply a patch to the FCKeditor modules main source file 'fckeditor.module' to use TinyBrowser. You can download the patch from the bottom of this page. The patch distributed now is for FCKeditor 6.x-1.4, which is the latest version of FCKeditor module.
    Once you applied the patch, go to the module settings pat at Administer > Site configuration > FCKeditor. Then go to the File browser settings section and you should see the TinyBrowser is added to the valid file browser list. Select TinyBrowser and save the settings. Besides, the directories fields below this file browser selection is not used for the TinyBrowser. If you want to use TinyBrowser's file uploader, do not forget to give the upload permission to the role who uses FCKeditor at User Permission page.
    Do not forget to enable toolbar icons for image/media/link files if there are not there.

  4. Wysiwyg module + FCKeditor

    Go to the module settins page at Administer > Site configuration > Wysiwyg. Then edit the input format which you assigned to use FCKeditor. Go to the Buttons and Plugins section and you should see a new checkbox 'TinyBrowser' is added there. Check the checkbox and save the settings. If you want to use TinyBrowser's file uploader, do not forget to give the upload permission to the role who uses FCKeditor at User Permission page.
    Do not forget to enable toolbar icons for image/media/link files if there are not there.

  5. CKEditor module + CKEditor

    Current development version of CKEditor module has added the support for TinyBrowser. So unlike the case of the FCKeditor module, no patch is required for the CKEditor module. However, you need to apply a patch to ckeditor.js file under sites/all/libraries/ckeditor directory. You can download the patch from the bottom of this page.
    Once you applied the patch, go to the module settings pat at Administer > Site configuration > CKEditor. Then go to the File browser settings section and you should see the TinyBrowser is added to the valid file browser list. Select TinyBrowser and save the settings. Besides, the directories fields below this file browser selection is not used for the TinyBrowser. If you want to use TinyBrowser's file uploader, do not forget to give the upload permission to the role who uses CKEditor at User Permission page.
    Do not forget to enable toolbar icons for image/media/link files if there are not there.

  6. Wysiwyg module + CKEditor

    You need to apply a patch to ckeditor.js file under sites/all/libraries/ckeditor directory. You can download the patch from the bottom of this page.

    Next, go to the module settins page at Administer > Site configuration > Wysiwyg. Then edit the input format which you assigned to use CKEditor. Go to the Buttons and Plugins section and you should see a new checkbox 'TinyBrowser' is added there. Check the checkbox and save the settings. If you want to use TinyBrowser's file uploader, do not forget to give the upload permission to the role who uses CKEditor at User Permission page.
    Do not forget to enable toolbar icons for image/media/link files if there are not there.

That's all for the installation and set-up of the TinyBrowser module. We will explain how to use TinyBrowser in the next page.


Problems?

If you have difficulty using TinyBrowser, please check this page first.
TinyBrowser (3) Troubleshooting
http://www.pixture.com/drupal/node/238


Related links

TinyBrowser (original author's site)
http://www.lunarvis.com/products/tinymcefilebrowserwithupload.php
TinyBrowser Google Group (support forum)
http://groups.google.com/group/tinybrowser

TinyMCE
http://tinymce.moxiecode.com
FCKeditor and CKEditor
http://ckeditor.com
TinyTinyMCE module
http://drupal.org/project/tinytinymce
FCKeditor module
http://drupal.org/project/fckeditor
CKEditor module
http://drupal.org/project/ckeditor
Wysiwyg module
http://drupal.org/project/wysiwyg

 

AttachmentSize
fckeditor-6.x-1.4.module.patch2.35 KB
ckeditor.js_.patch20.05 KB
No votes yet