Easy Preview Upload logo

Easy Preview Upload plugin

Instant upload image and insert its preview
Easy Preview Upload screenshot
Easy Preview Upload screenshotPreview screenshot
Easy Preview Upload logo

The best way to place a preview of the image linked to original image is to use Easy Preview upload add-on. The HTML code inserted into TinyMCE or CKEditor document will be fully compatible with such popular preview scripts like LightBox, FancyBox and ShadowBox and of course you can change it in the configuration file.

The plugin is very simple but for install and use but has ability to work on any PHP or ASP.NET server and has many features which will help you resize image original or set a size of its preview.

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

Install Easy Preview Upload plugin in CKEditor 4

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

Then do these simple steps:

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

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

Install Easy Preview Upload plugin in TinyMCE 6

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

Install the plugin to TinyMCE 6 hosted on your server

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

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 6

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

Refer to TinyMCE add-ons installation manual for more details

Install Easy Preview Upload plugin in TinyMCE 5

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

Install the plugin to TinyMCE 5 hosted on your server

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

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 5

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

Refer to TinyMCE add-ons installation manual for more details

Install Easy Preview Upload plugin in TinyMCE 4

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

Then do these simple steps:

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

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

Send