Docs
Index N1ED tour Widgets and Tables Bootstrap Editor Bootstrap Blocks File Manager Image Editor Translator Mobile support Styling the content Visual configuration Multisite integration Self-hosted version N1ED versioning Changelog Installation API reference Editing configuration N1ED appearance Working with files Call Flmngr from code Set CSS theme Custom Templates Bootstrap Editor Configuration Configuring Translator

Image Editor

Image Editor add-on logo ImgPen image editor used as your main image tool offers all the standard instruments to fine-tune raster images before you publish them on your website, plus a number of artistic effects and nice options like emoticons or freehand drawing – all directly from your content editor or upon uploading images with File Manager.

Image editor toolbar screenshot
Crop tool in image editor screenshot
Transfrom tools: flip vertical screenshot
Tools to add text, color picker and font family screenshot

Easy call from everywhere

ImgPen uses the same uploader and the same file manager. It can be called from standard CKEditor or TinyMCE image dialogs, from N1ED edit widget sidebar and from other parts of the editor like when N1ED requests some image to be set when you try to create a new widget.

Customize your image editor

Add custom shapes, stickers, include custom fonts and define colors for custom palette to your editor to fit your editor for your own users. You can configure ImgPen using visual configuration panel in your dashboard or from N1ED.

Image editor configure options
Customizing image editor screenshot

Developer friendly

Need to use ImgPen image editor not only from CKEditor or TinyMCE, but also from your own app? We now offer ImgPen SDK for those who want to include a self-hosted version of the image editor into your product. This is a separate solution for those who need special integration, and N1ED users can continue using this SDK already integrated inside WYSIWYS editor.

Image editor toolset

Crop icon Crop Crop photo to one of specified aspect ratios or let user select custom crop zone via UI
Resize icon Resize Use pixel-by-pixel control with maintaining pixel aspect ratio to adjust an image to the exact dimensions you need
  • Maintain Aspect Ratio
  • Use Percenteges
Transform icon Transform Rotate an image clockwise or counter-clockwise, flip horizontally or vertically
  • Free rotation of the image using a slider
  • Rotate 90° CW Rotate 90° CW icon
  • Rotate 90° CCW Rotate 90° CCW icon
  • Flip Horizontal Flip Horizontal icon
  • Flip Vertical Flip Vertical icon
Corners icon Corners Round corners of the image using UI
Filters icon Filters Adds effects to an image such as grayscale, sharpen, vintage, sepia, blur and more
 Custom filter settings:
  • Remove Color (the filter offers the color picker and distance options)
  • Brightness (adjust brightness level using the slider)
  • Gamma (manual correction of Blue, Green, Red channels)
  • Noise (noise intensity)
  • Pixelate (sets the level of pixelation for an image)
  • Blend (configures the alpha-channel)
Draw icon Draw A tool for freehand drawing
  • Color picker
  • Brush types
  • Brush size
Text icon Text A tool to add text
  • Color picker
  • Font family
 All objects are in their own layers and can be easily moved, deleted or modified.
Additional settings:
  • Flip horizontally/vertically
  • Shadow Shadow icon
  • Outline Outline icon
  • Color Color icon
  • Background Background icon
  • Texture Texture icon
  • Gradient Gradient icon
  • Opacity Opacity icon
  • Text style Text icon
Shapes icon Shapes A tool to add shapes (circle, rectangle, triangle, ellipse, line, etc.)
Stickers icon Stickers Available categories: emoticons, doodles, landmarks, stars, clouds, bubbles, transport, beach
Frames icon Frames Add built-in responsive frames to photo of any size. Type of frames: basic, pine, oak, rainbow, grunge, ebony, artt
  • Color picker
  • Size
Save mode A mode to save all changes in the image save/cancel
Zoom The canvas can be scaled using the mouse and also with the +/- button on the top panel
Undo icon Redo icon Undo/Redo Any changes in the image can be undone or redone