Docs
JustBoil.me Images is a simple, elegant image upload plugin for TinyMCE. It is free, opensource and licensed under Creative Commons Attribution 3.0 Unported License.
Download @Github Donate Donation gives you the right to remove attribution.
Features
JustBoil.me TinyMCE Images Upload plugin is cool for this features:
- Allows to upload images in 2 clicks;
- Optional image auto-resize (the maximum width and height of an image can be specified in config file);
- Optionally prohibits uploads that exceed the maximum image width, height or the maximum file size (all set in config file);
- Optionally disables uploads of image file formats that are not marked as allowed.
Requirements
- PHP5. Application has been tested on PHP 5.2 / 5.3 / 5.4. (PHP4 will not work)
- TinyMCE (works fine with 3.5.x branch; works fine with new TinyMCE 4.x)
- GD2 Library (optional, if you don’t need image size-control/resize)
Setup
- Download distribution pack. Unzip it into TinyMCE’s plugins folder.
- Edit config.php file found in plugins/jbimages. Minimally, you should only specify a target directory for your uploads. Every block of config.php is well-commented, so I think everything should go right.
- Activate jbimages plugin and add jbimages button in TinyMCE. Don’t forget to set theme:advanced and relative_urls:false.
TinyMCE 4.x Example
<!-- TinyMCE 4.x --> <script type="text/javascript" src="/tinymce_4.x/tinymce/js/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", // =========================================== // INCLUDE THE PLUGIN // =========================================== plugins: [ "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste jbimages" ], // =========================================== // PUT PLUGIN'S BUTTON on the toolbar // =========================================== toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages", // =========================================== // SET RELATIVE_URLS to FALSE (This is required for images to display properly) // =========================================== relative_urls: false }); </script> <!-- /TinyMCE -->
TinyMCE 3.x Example
<!-- TinyMCE 3.x --> <script type="text/javascript" src="tiny_mce-3.x/tiny_mce_src.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", // =========================================== // Set THEME to ADVANCED // =========================================== theme : "advanced", // =========================================== // INCLUDE the PLUGIN // =========================================== plugins : "jbimages,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave", // =========================================== // Set LANGUAGE to EN (Otherwise, you have to use plugin's translation file) // =========================================== language : "en", theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", // =========================================== // Put PLUGIN'S BUTTON on the toolbar // =========================================== theme_advanced_buttons4 : "jbimages,|,insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // =========================================== // Set RELATIVE_URLS to FALSE (This is required for images to display properly) // =========================================== relative_urls : false }); </script> <!-- /TinyMCE -->
Protect the script from external access
In case, the TinyMCE’s folder is not protected with HTTP Authorisation, you should require is_allowed() function to return `TRUE` if user is authorised, `FALSE` - otherwise. is_allowed() is found at plugins/jbimages/is_allowed.php of your TinyMCE installation.
The simplest example is below:
<?php function is_allowed() { global $_COOKIE, $_SERVER; $allow_login = "admin"; $allow_pass = "george12345"; $ip = $_SERVER["REMOTE_ADDR"]; if ( isset($_COOKIE["login"], $_COOKIE["passhash"]) and $_COOKIE["login"] == $allow_login and $_COOKIE["passhash"] == md5(md5($ip).md5($allow_pass)) ) { return TRUE; } return FALSE; } ?>
How-to video (for TinyMCE 3.x)
UPD 03/2013. Thanks to Niels Harbo, a multimedia designer from Copenhagen, Denmark.
Troubleshooting [UPD 04/2013]
Here is a list of common errors.
The upload directory does not appear to be valid – By default, JustBoil.me guesses the physical path to your upload directory based on your img_path setting. If you see this error, probably the plugin was not able to guess the right path. The solution is to set the physical path manually ($config['upload_path']).
Inserted images are relative to site’s admin page. Usually something like <img src=”../../../images/yourimage.jpg”> instead of <img src=”/images/yourimage.jpg”>. You should set relative_urls:false in your TinyMCE init script (see integration code example above).
Codeigniter integration [UPD 04/2013]
Plugin’s PHP-side is built on Codeigniter 2.1.3. So if your project is based on this framework, you can integrate plugin’s PHP routine to your application. Here’s what you should do:
- Move the contents of jbimages/ci/application/views & controllers to your CI app’s folders
- Now unwrap this ‘wrapper’: replace all contents of jbimages/ci/application/config/uploader_settings.php with contents of jbimages/config.php and move the first to your CI app’s config folder
- Do the same with jbimages/ci/application/helpers/jbimages_helper.php (replace with contents of jbimages/is_allowed.php and move to your app’s helpers)
- Move custom language file jbimages/ci/application/language/english/jbstrings_lang.php to your app’s english language folder (the language setting is made on line 31 of the Uploader controller)
- Change links to PHP-side in jbimages/dialog.htm (lines 13 and 30)
Let me know if I forgot something…
Bugreports & support
Please use project’s Github page to discuss all issues. I can’t guarantee support due to the lack of time, but I’ll try to, if I can. Thank’s))
Donate
Please support the project by donating via PayPal. Donating also gives you a right to remove author’s attribution and plugin name (if you want to, of course).