TinyMCE Image Uploader & Manager

TinyMCE Image Uploader & Manager

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

Hide

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
}
Hide

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).

Hide

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).

Hide

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Ā 
You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

3 licenses, starting from From » $19.99 14 day money-back guarantee View Licenses
or Get a quote

for customization or integration services

  • The component is very usefull. I don't need to buy Tiny Image Uploader - it's very expensive for my task. This component more cheaper than original.

    A little bit small documentation. And flash uploader using - is not so good. I cannot change smth in logic there.
    Other things are excellent!
    A Anton
    3 years ago, 0 comments
    Was this helpful?
    Flag 1 of 1 people found this review helpful
  • Love it! TinyMCE should really include an image manager, but for now this is an excellent plug-in as opposed to their expensive alternative
    EG Eran Galperin
    3 years ago, 0 comments
    Was this helpful?
    Flag 1 of 1 people found this review helpful
  • Light weight and easy to integrate, the developer responds fast to questions and fixes issues. It's a handy, simple & user friendly image upload/manage plugin.
    RF Rob Faas
    1 year ago, 0 comments
    Was this helpful?
    Flag
Post a comment

Or enter your name and Email
  • MK Mark Knight License holderPersonal license 1 month 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 Developer 1 month 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 License holderPersonal license 1 month 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 Developer 1 month ago
      I'm afraid that aside from providing technical support, we are not currently developing this plugin further.
  • PP Pedro Pedrosa 2 months ago
    Where I can download the plugin.
    • Lionite Developer 2 months ago
      Hi Pedro, You will get access to download the plugin once you purchase a license.
  • JB James Burden License holderPersonal license 5 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 Developer 5 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.