ccSimpleUploader – Very Simple File Upload Plugin for TinyMCE 3.x

ccSimpleUploader is a very basic plugin for TinyMCE 3.x platform. In it’s current form, it is not a file manager or manipulator of any kind. It simply allows a user to browse their computer and upload a file using a PHP script. The script can be invoked directly from the TinyMCE editor, or from the context of AdvImg and AdvLink plugins.

Basic Features:

  • Free
  • Easy to configure and integrate with TinyMCE
  • Uploads file to server using PHP file upload. Note: There are currently no restrictions on the types of files that can be uploaded, which poses a security threat! This is how I wanted to have it, you can change that by modifying uploader.php script if you like.
  • Integrates with AdvImg and AdvLink plugins
Technical discussion regarding development and functionality of this code can be found here.

Installation:

  • Download and unzip ccSimpleUploader plugin into your ‘tiny_mce/plugins’ directory
  • Modify your tinyMCE init function (this can be in its own js file, or in the header of the HTML file that hosts the editor):
tinyMCE.init:

1. Add the plugin to the plugins list:

plugins: "ccSimpleUploader,safari,pagebrea.."

2. If you want download functionality available directly from the TinyMCE editor, add the plugin to the desired button bar:

theme_advanced_buttons3: "ccSimpleUploader,ablecontrols,|,hr,..."

3. Create a directory on your site where you would like to have the files uploaded (i.e. /my_uploads)

4. Add configurations for the plugin as follows:

relative_urls : false,
file_browser_callback: "ccSimpleUploader",
plugin_ccSimpleUploader_upload_path: '../../../../uploads',                 
plugin_ccSimpleUploader_upload_substitute_path: '/tinymce/uploads/',

Change ‘plugin_ccSimpleUploader_upload_path’ variable to represent the relative path from the ccSimpleUploader plugin directory to your upload directory.

Change ‘plugin_ccSimpleUploader_upload_substitute_path’ to represent the aboslute path to your upload directory from the root of your site (i.e. if you create a directory ‘uploads’ in your ‘public_html’ directory, the absolute path would simply be ‘/uploads’)

Cross fingers, load/re-load the page hosting your tinyMCE editor, and hopefully enjoy the added functionality.

Screenshot:

ccSimpleUploader Screenshot

Revision History:

v0.1 – Initial Revision

Update:

I got a couple of questions regarding Drupal integration, so here is the skinny. I don’t think I have the “proper” way of doing this, and I shall revisit eventually (unless someone want to chime in).. Anyway, so if you have the WYSIWYG plugin in your Drupal installation and you have tinyMCE as your editor, these are the steps:

1. Modify the tinymce.inc file in the WYSIWYG module (in sites/all/modules/wysiwyg/editors):

at the bottom of wysiwyg_tinymce_plugins($editor) function add code right before ‘return $plugins;’:
</div>
<div>
<p class="code_snippet">$plugins['ccSimpleUploader'] = array(
'path' =&gt; $editor['library path'] . '/plugins/ccSimpleUploader',
'extensions' =&gt; array('ccSimpleUploader' =&gt; t('Simple File Uploader')),
'url' =&gt; 'http://www.creativecodedesign.com',
'internal' =&gt; TRUE,
'load' =&gt; TRUE,);</p>
<p class="code_snippet">

Then, at the bottom of wysiwyg_tinymce_settings($editor, $config, $theme) right before ‘return $settings;’ add:

<div class="code_snippet">$settings["file_browser_callback"] = "ccSimpleUploader";
$settings["theme_advanced_buttons1"] .= ",ccSimpleUploader";
$settings["plugin_ccSimpleUploader_upload_path"] = "../../../../../../../../uploads";
$settings["plugin_ccSimpleUploader_upload_substitute_path"] = "/uploads/";</div>
<div class="code_snippet"></div>
<div class="code_snippet">

 

Obviously, you need to change the upload paths to suit your directory layout. Remember that the relative path is relative to the uploader.php script itself.

Finally, go to the WYSIWYG module configuration, and under “Buttons and Plugins” check off “Simple File Uploader”.

That should do it.

Cheers!