Image Preview Upload plugin

Install the plugin to Editor42 hosted on your server

1. Copy ImagePreviewUpload directory to editor42/plugins/.
2. Edit Editor42 config and add ImagePreviewUpload to plugins parameter.

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

Example

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

editor42.init({
    selector: "#editor",
    plugins: "ImagePreviewUpload",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to Editor42 loaded from CDN

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 Editor42 config parameter.
3. Edit Editor42 config and add ImagePreviewUpload to plugins parameter.

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

Example

Here you can see sample initialization code of Editor42 loaded from CDN with config inside it:

editor42.init({
    selector: "#editor",
    plugins: "ImagePreviewUpload",
    external_plugins: {
        "ImagePreviewUpload": "http://example.com/public/ImagePreviewUpload/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to TinyMCE 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",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to cloud edition of TinyMCE

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",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

If you prefer to edit config.js of CKEditor, or your CKEditor is initialized in some non-editable part of your CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "ImagePreviewUpload";
    config.skin = "n1theme";                   // N1ED's own theme for CKEditor
    config.allowedContent = true;              // keep the classes and attributes N1ED writes
    config.removePlugins = "iframe,magicline"; // N1ED has better support of this
    config.versionCheck = false;               // skip its upgrade notice of CKEditor itself

    // config.apiKey = "...";
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
};

Some CMSs do not use config.js and let you edit only the CKEditor initialization script. Make these changes there:

CKEDITOR.replace("editorId", {
    extraPlugins: "ImagePreviewUpload",
    skin: "n1theme",                   // N1ED's own theme for CKEditor
    allowedContent: true,              // keep the classes and attributes N1ED writes
    removePlugins: "iframe,magicline", // N1ED has better support of this
    versionCheck: false,               // skip its upgrade notice of CKEditor itself

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

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",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

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",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});