Quick Image Upload logo

Quick Image Upload plugin

Select image and insert into your content
Quick Image Upload screenshot
Quick Image Upload screenshotQuick Image Upload preview screenshot
Quick Image Upload logo

This plugins lets ability to your WySIWYG editor to upload files and insert links to them with a couple of clicks.

You want to let your site visitors or site administrator a way to upload insert images without typing URLs or navigating in filebrowser/image manager? It was never so easy. User just selects image or images and they are being inserted into TinyMCE editor near the cursor.

Features:

  • Original image inserting
  • Inserting automatically generated image preview linked to original image
  • Multiple images upload
  • Drag'n'drop
  • Beautiful HTML5/HTML4/Flash (depends of browser) clientside part
CKEditor 4 logo CKEditor 4
TinyMCE 6 logo TinyMCE 6
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Quick Image Upload plugin in CKEditor 4

Download Quick Image Upload
ZIP archive of Quick Image Upload for CKEditor 4

Then do these simple steps:

  1. Copy QuickImageUpload directory to ckeditor/plugins/.
  2. Edit CKEditor config and add QuickImageUpload to extraPlugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Using config file
Using initialization script

Example of configuring with config.js

If you prefer to edit config.js config file of CKEditor or when your CKEditor initialization code is placed inside some non-editable part of CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "QuickImageUpload";
};

Example of configuring inside initialization code

Some CMSs do not use config.js file and let to edit CKEditor initialization script only. Do this changes there:

CKEDITOR.replace("#editor", {
    extraPlugins: "QuickImageUpload",
});

Install Quick Image Upload plugin in TinyMCE 6

Download Quick Image Upload
ZIP archive of Quick Image Upload for TinyMCE 6
Self-hosted TinyMCE 6
Cloud TinyMCE 6

Install the plugin to TinyMCE 6 hosted on your server

  1. Copy QuickImageUpload directory to tinymce/plugins/.
  2. Edit TinyMCE config and add QuickImageUpload to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "QuickImageUpload",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 6

  1. Copy QuickImageUpload directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Quick Image Upload plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add QuickImageUpload to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "QuickImageUpload",
    external_plugins: {
        "QuickImageUpload": "http://example.com/public/QuickImageUpload/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Quick Image Upload plugin in TinyMCE 5

Download Quick Image Upload
ZIP archive of Quick Image Upload for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy QuickImageUpload directory to tinymce/plugins/.
  2. Edit TinyMCE config and add QuickImageUpload to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "QuickImageUpload",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 5

  1. Copy QuickImageUpload directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Quick Image Upload plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add QuickImageUpload to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "QuickImageUpload",
    external_plugins: {
        "QuickImageUpload": "http://example.com/public/QuickImageUpload/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Quick Image Upload plugin in TinyMCE 4

Download Quick Image Upload
ZIP archive of Quick Image Upload for TinyMCE 4

Then do these simple steps:

  1. Copy QuickImageUpload directory to tinymce/plugins/.
  2. Edit TinyMCE config and add QuickImageUpload to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "QuickImageUpload",
});

Refer to TinyMCE add-ons installation manual for more details

Reviews

Be the first who will write a feedback for this plugin.

Tell a friend about Quick Image Upload

Send