Image Preview Upload logo

Image Preview Upload plugin

Insert preview of image linked to the original image
Image Preview Upload screenshot
Image Preview Upload screenshotImage Preview Upload uploaded files screenshot
Image Preview Upload logo

Use Image Preview Upload to quickly upload your images to server without using any server file manager. All files are uploaded in their original size, but only preview is inserted into the document. After clicking the preview visitor will see original image.

This plugin is automatically works with LightBox, ShadowBox or other JS components link these two. Integration with LightBox/ShadowBox is built-it, integration with others is very simple.

CKEditor 4 logo CKEditor 4
TinyMCE 6 logo TinyMCE 6
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Image Preview Upload plugin in CKEditor 4

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

Then do these simple steps:

  1. Copy ImagePreviewUpload directory to ckeditor/plugins/.
  2. Edit CKEditor config and add ImagePreviewUpload 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 = "ImagePreviewUpload";
};

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: "ImagePreviewUpload",
});

Install Image Preview Upload plugin in TinyMCE 6

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

Install the plugin to TinyMCE 6 hosted on your server

  1. Copy ImagePreviewUpload directory to tinymce/plugins/.
  2. Edit TinyMCE config and add ImagePreviewUpload 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: "ImagePreviewUpload",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 6

  1. Copy ImagePreviewUpload directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Image Preview Upload plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add ImagePreviewUpload 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: "ImagePreviewUpload",
    external_plugins: {
        "ImagePreviewUpload": "http://example.com/public/ImagePreviewUpload/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Image Preview Upload plugin in TinyMCE 5

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

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy ImagePreviewUpload directory to tinymce/plugins/.
  2. Edit TinyMCE config and add ImagePreviewUpload 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: "ImagePreviewUpload",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 5

  1. Copy ImagePreviewUpload directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Image Preview Upload plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add ImagePreviewUpload 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: "ImagePreviewUpload",
    external_plugins: {
        "ImagePreviewUpload": "http://example.com/public/ImagePreviewUpload/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Image Preview Upload plugin in TinyMCE 4

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

Then do these simple steps:

  1. Copy ImagePreviewUpload directory to tinymce/plugins/.
  2. Edit TinyMCE config and add ImagePreviewUpload 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: "ImagePreviewUpload",
});

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 Image Preview Upload

Send