TinyMCE Image Uploader & Manager

TinyMCE Image Uploader & Manager

Released 4 years ago , Last update 2 years 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

Requirements

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

Pricing

$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
  • MK Mark Knight License holderPersonal license
    Purchased on Aug 17, 2014
    4 months ago
    Hi, your plugin looks perfect for my requirements. Just one question.. Can I specify an upload URL with each instance? For example, I'll be using this in an admin backend, and each time TinyMCE loads it will need to upload images to a specific path relative to the content that's been loaded. Thanks
    • Lionite Publisher 4 months ago
      Hi Mark, I'm afraid that use-case isn't really planned for. You can add logic to the upload directory based on user state (in the session or cookie) - which is something I do often with it, but if you need to pass information from the page, some modification to the upload Javascript would be needed. So if you're worried about that, this might not be the best solution for you.
    • MK Mark Knight 4 months ago
      Thanks for your reply. Is this a tweak you would be interested in implementing? I would have the value of the upload dir accessible on the page the TimyMCE editor would be on.
    • Lionite Publisher 4 months ago
      I'm afraid that aside from providing technical support, we are not currently developing this plugin further.
  • PP Pedro Pedrosa 5 months ago
    Where I can download the plugin.
    • Lionite Publisher 5 months ago
      Hi Pedro, You will get access to download the plugin once you purchase a license.
  • JB James Burden License holderPersonal license
    Purchased on Mar 27, 2014
    9 months ago
    Plugin is great - thanks. Is there an easy way to add a padding style to an image, so surrounding text doesn't run up to edge of image? Thanks, James
    • Lionite Publisher 9 months ago
      Hi James, You can add padding to images in the CSS of your page. That's not related to this plug-in, it just handles inserting the images into your editor.