ImgPen image editor logo

ImgPen image editor plugin

Crop, resize, transform, filter tools for editing images
Image Editor crop tool screenshot
Image Editor crop tool screenshotImage Editor toolbar screenshotImage Editor rotate tool screenshotAdd text for picture screenshot
ImgPen image editor logo

Image editor ideally integrates to your WYSIWYG editor (with or without N1ED) and allows you to edit all types of raster images you typically use in your articles, product cards in your online store and so on.

With the image editor you can adjust the size of the image, lighten it up, raise contrast and many more. ImgPen features all standard tools: crop, rotate, add text, draw, apply filter, etc.

All edited images will be uploaded to the website and stored in the same place. Using image editor well fits the file manager that helps storing versions of the edited images.

ImgPen works with PHP, Java or Node websites. And if N1ED or Flmngr file manager are installed, no additional server-side configuring is required.

Get more info on ImgPen image editor home page: https://imgpen.com

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

Install ImgPen image editor plugin in CKEditor 4

Download ImgPen image editor
ZIP archive of ImgPen image editor for CKEditor 4

Then do these simple steps:

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

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

Install ImgPen image editor plugin in TinyMCE 6

Download ImgPen image editor
ZIP archive of ImgPen image editor for TinyMCE 6
Self-hosted TinyMCE 6
Cloud TinyMCE 6

Install the plugin to TinyMCE 6 hosted on your server

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

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 6

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

Refer to TinyMCE add-ons installation manual for more details

Install ImgPen image editor plugin in TinyMCE 5

Download ImgPen image editor
ZIP archive of ImgPen image editor for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

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

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 5

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

Refer to TinyMCE add-ons installation manual for more details

Install ImgPen image editor plugin in TinyMCE 4

Download ImgPen image editor
ZIP archive of ImgPen image editor for TinyMCE 4

Then do these simple steps:

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

Refer to TinyMCE add-ons installation manual for more details

Install ImgPen image editor plugin in Froala

Download ImgPen image editor
ImgPen image editor plugin for Froala

Then go through these steps:

  1. Copy ImageEditor JS file somewhere to your server and add it as a <script> tag to the page.
  2. Alternativaly you can use CDN version of this plugin and do not download it, URL is
    //cdn.jsdelivr.net/gh/edsdk/froala-image-editor@latest/js/froala-image-editor.js

Example

After installing the plugin you will have similar code on your page with Froala:

<script src="/path/to/froala.js"></script>
<script src="//cdn.jsdelivr.net/gh/edsdk/froala-image-editor@latest/js/froala-image-editor.js"></script>
    
<script>
    FroalaEditor('#editor', {
    });    
</script>

Reviews

We were looking for a new image editor after Aviary has gone. And have found this great add-on. We use it for regular CKEditor for many years.

User icon
Baard E.
Agency

We were migrating our editor to Froala and were looking for 3-rd party addons for work with media. We needed in file manager and image editor. This is awesome that we found Flmngr and ImgPen. They work great in conjunction. Integration wasn't a problem in Froala. I really love these tools.

User icon
Philip L.
Agency

I had implemented ImgPen photo editor in my project nearly 3-4 months ago and it's working perfectly: many tools, the editor is customizable and no editing restrictions.

User icon
Adam D.
Individual

Tell a friend about ImgPen image editor

Send