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

1. Download distribution pack. Unzip it into TinyMCE’s plugins folder.
2. 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.
3. 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:

1. Move the contents of jbimages/ci/application/views & controllers to your CI app’s folders
2. 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
3. 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)
4. 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)
5. 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).