TinyMCE Image Uploader & Manager

TinyMCE Image Uploader & Manager

Released 5 years ago , Last update 3 months ago

Upgrade your CMS with this TinyMCE image manager plugin - upload, manage and insert images into TinyMCE editor. Easy to customize and integrate.

A TinyMCE image manager designed as a more minimal (and cheaper) alternative to the official image manager.

  • Gallery management - Image upload (includes multiple file upload) and image removal
  • Insert images into editor from gallery
  • Insert images from URL
  • Completely skinnable - minimal markup and simple stylesheet included
  • Written in object-oriented and uses the jQuery library for concise, easy to extend code

Demo

Requirements

4.6
  • 5 6
  • 4 4
  • 3 0
  • 2 0
  • 1 0
10 Reviews Read Reviews

Pricing

14-day money-back guarantee

$19.99

Personal license

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use

$79.99

Developer license

  • Perpetual license

  • Unlimited projects

  • Can distribute code and binary products

  • Commercial use

Installation

Image manager files

Extract the plug-in zip package into your TinyMCE /plugins directory. It should create a /lioniteimages directory - if not, move the files manually into that directory (/plugins/lioniteimages).

Add the image manager to the TinyMCE configuration

The plug-in name is 'lioniteimages' and needs to be added to the plug-in list:

tinyMCE.init({
    ...
    plugins : "bold,italic,underline,strikethrough,|,lioniteimages",
    ...
});

Image manager configuration

The image manager is packaged with a PHP connector which needs to be configured for the directory structure of your application. If you are using a different server-side language, you will need to port the connector to your language to use the plug-in.

To change the configuration, edit the config.php file that's inside /lioniteimages/connector/php:

// The URL that points to the upload folder on your site. 
// Can be a relative or full URL (include the protocol and domain)
$imageURL = '/demos/http/uploads';

// Full upload system path. Make sure you have write permissions to this folder
$uploadPath = '/var/www/demos/http/uploads';

The image URL value would be used in the HTML 'src' attribute of inserted images, so change it accordingly. Depending on your application, you might separate directories for different users. You can add a dynamic part to the directory names based on user identifier. For example:

$userId = Auth::getId();
$imageURL = '/uploads/' . $userId;
$uploadPath = '/var/www/project/public/uploads/' . $userId;

Authentication

In some cases you want to limit access to image management. Implement your authentication logic inside the isAuth() function.

function isAuth() {
    //Perform your own authorization to make sure user is allowed to upload
    return true; //Return true when authenticated, false when denied
}

Troubleshooting

I cannot upload images

Make sure the value of the upload path parameter is correct and that you have permissions to write to the target directory. Also, in case you have URL rewriting that is affecting the folder containing the plugin, you need to allow requests to reach the connector by disabling rewriting inside the plugin folder (or any folder above it).

Images do not appear when inserted into the editor

Make sure that your image URL value is correct. It should be a publicly accessible directory under your document root folder. Also, if you have URL rewriting enabled (such as Apache's mod-rewrite), you might need to disable it inside the directory (using an .htaccess file with the directive 'RewriteEngine off' in Apache).

Skinning

Changing styles and markup

The plugin styles are located in the /css/styles.css file. You can control the basic look of the plug-in from there. If you want to perform more extensive changes and add / change markup, you can edit the lioniteimages.htm file. Please make sure to leave existing classes as the Javascript functionality depends on it.

Changing images

All the icons (including the TinyMCE interface icon) are located inside the /img directory. The plugin icon used is taken from the famfamfam icon pack (/img/icon.png).

Adding connectors

The plug-in is provided with a PHP connector. To use the plug-in with other server-side languages, you will need to translate the PHP connector scripts to your required language. If you are willing to contribute your code back to the component, I will reimburse your license fee via Paypal (even if you purchased the sublicesnable license).

Connector scripts

There are four connector scripts included with the plug-in:

  • config.php - Directory configuration and authentication logic
  • upload.php - Upload handling and thumbnail generation
  • gallery.php - Gallery generation script. Reads all uploaded files from the configured directory and builds a list of images.
  • remove.php - Image removalĀ 
3 licenses, starting from From » $19.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.


Or enter your name and Email
  • C chandra 2 months ago
    Is it working on IE 9?
    • Lionite Publisher 2 months ago
      Hi Chandra, Should be working on every browser that is supported by TinyMCE. You can check the demo links above with your browser to be certain
  • S Santhosh 2 months ago
    Can I test before I buy the license to check if this suits my requirement?
  • MK Mark Knight License holderPersonal license
    Purchased on Aug 17, 2014
    2 months ago
    Hi, I'm wondering how I can make the plugin use the full url of the image? Including the domain name etc. Thanks