CKEditor 4

Image Rotate

Allows user to rotate image by adding Rotate Clockwise and Rotate Counter-clockwise to image context menu.

NB! Will work only with:

  1. data uri images
  2. images hosted on same domain as editor
  3. remote images, which have CORS enabled headers.

The output will be data uri image.

 

Desktop Browser Compatibility

canvas and canvas.toDataURL() : IE 9+; Edge 12+; Firefox 3.6+; Chrome 4+; Safari 4+; Opera 9+

 

If you have any issues, please report at https://github.com/liias/imagerotate/issues.

Download Add to my editor
imagerotate

41,758 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.1.1

Download• Release notes

  • Added French translation, thanks to https://github.com/gbastien

Token Insertion

This plugin allows you to insert tokens into the CKEditor for replacement with data. For instance, it can be used for variables in mako or twig templates, or your own custom token replacement code.

The default token style is currently for mako template variables (e.g. - ${tokenName}), as that is what I initially developed this for, but it is configurable for any strings to start/end a token. You can also configure what tokens are available in the dropdown.

This plugin is largely based on the placeholder plugin made by the CKEditor folks. I haven't supplied all of the translations that they did in that plugin, but I will add in any contributed translations that folks would like if they supply them.

Please see the github page for more in-depth documentation.

Screenshots

carousel
Download Add to my editor
token

13,237 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.1

Download• Release notes

Fixed an issue with certain token replacements. Added Russian translation.

Markdown

Markdown Plugin for CKEditor This is a plugin for CKEditor, you can use markdown mode in CKEditor. Moreover, your article in WYSIWYG mode can be translated to markdown.

Screenshots

carousel
carousel
Download Add to my editor
markdown

20,117 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0

Download• Release notes

Usage

  1. Download the source, and uncompress it in ckeditor/plugins;
  2. Edit config.js (such as ckeditor/config.js):
config.extraPlugins = 'markdown'; // add this plugin

Enjoy it!

 

Demo example：

<textarea name="editor1" id="editor1" rows="10"></textarea>
    
<script>
    CKEDITOR.replace('editor1', {
        toolbarGroups: [
            {name: 'tools'},
            {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
            {name: 'styles'},
            {name: 'others'}
        ],
        extraPlugins: 'markdown'
    });
</script>

 

Attachments

This plugin helps you attach/upload files to your server. It is based on the upload feature if CKEditor but is focused on attachments as menu option. Installation is as follows :-

customToolbar:
    [
      { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-', 'Attachments' ] }
    ]

 CKEDITOR.replace('ckeditor',
  { extraPlugins: 'attach',
    toolbar: this.customToolbar,
    filebrowserUploadUrl: '/path/to/upload.php', 
  })

Various configuration options which help you alter the plugin behavior are :-
  1) AutoClose -  To auto close dialog on upload (autoClose: true)
  2) Callback on attachment upload - onAttachmentUpload: function(responseHTML) {}
  3) validateSize - Validate size of file before upload (validateSize: 30) i.e 30mb limit

Sample Code :-

CKEDITOR.replace('ckeditor', {
  filebrowserUploadUrl: '/path/to/upload.php',
  extraPlugins: 'attach', // attachment plugin
  toolbar: this.customToolbar, //use custom toolbar
  autoCloseUpload: true, //autoClose attachment container on attachment upload
  validateSize: 100, //100mb size limit
  on: {
    onAttachmentUpload: function(response) {
      /*
       the following code just utilizes the attachment upload response to generate 
       ticket-attachment on your page
      */
      attachment_id = $(response).attr('data-id');
      if (attachment_id) {
        attachment = $(response).html();
        $closeButton = $('<span class="attachment-close">').text('x').on('click', closeButtonEvent)
        $('.ticket-attachment-container').show()
          .append($('<div>', { class: 'ticket-attachment' }).html(attachment).append($closeButton))
          .append($('<input>', { type: 'hidden', name: 'attachment_ids[]' }).val(attachment_id)
          );
        }
      }
    }
  }
});

 


 

Download Add to my editor
attach

1,109 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0

Download• Release notes

The first version of attachment plugin for CKEditor. Please report any issues faced in the comments section or mail me at sahilbathla1@gmail.com

Chart

This is a proof-of-concept plugin that adds support for injecting charts into CKEditor. To render charts, the Chart.js library is used. The plugin serves as an example of using external JavaScript libraries in CKEditor, using the widgets feature. It has lots of comments inside to help you understand how it was built.

This plugins is not compatible with Internet Explorer 8.

For an installation instruction check README.md

Screenshots

carousel
carousel
Download Add to my editor
chart

39,877 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0.2

Download• Release notes

  • Added Spanish translation thanks to @gabrielepuyao.
  • Updated Chart.js library to the latest stable 1.x version (1.1.1).
  • Fixed typos in the installation instruction.

Imgur

A CKEditor plugin that help you upload images to imgur in easy way.

imgur is a photo storage service for free.

Download Add to my editor
imgur

16,991 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0.0

Download• Release notes

The first stable release.

Table Tools

Are you tired of working with annoying tables? Rows and columns just don’t stay as you want them to? Table Tools saves the day!
Just install Table Tools and receive a full range of possibilities to build a table of any complexity effortlessly.
 
The plugin has its own library that allows any table transformations including creating rows and columns, swapping places, merging and splitting cells.
You can configure styles, classes and cell attributes and apply them to the whole table or just a specific column, row or cell.
 
By the way, the set of plugins integrates to Foundation and Bootstrap frameworks. So you just need to select the framework and Table Tools will take into account its specifics automatically.

 

Screenshots

carousel
carousel
carousel

Product Page

Drag and Drop Image Uploads

Hey! 

This was supposed to be deleted, like, a year ago. Yet... still here! 

 

Stop downloadin' it, people.  It no work-y. 

Download Add to my editor
dragdrop

2,009 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 0.1.0

Download• Release notes

Release V.0.1.0

Drag and Drop uploading of Images

Currently Imgur and S3 are the two upload locations supported, but, since uploading files boils down to submitting a POST towards the general direction of a server, new backends are trivial to implement.

Imgur:

CKEDITOR.editorConfig = function( config ) {
  // rest of config
  config.extraPlugins = 'dragdrop';

  // configure the backend service and credentials
  config.dragdropConfig = {
      backend: 'imgur',
      settings: {
          clientId: 'YourImgurClientID'
      }
  }
});

AWS S3:

CKEDITOR.editorConfig = function( config ) {
  // rest of config
  config.extraPlugins = 'dragdrop';

  // configure the backend service and credentials
  // aws requires a few extra.. 
  config.dragdropConfig = {
      backend: 's3',
      settings: {
          bucket: 'bucketname',
          region: 'your-region',
          accessKeyId: 'key',
          secretAccessKey: 'secret-key'
      }
  };
});

Notification Aggregator

This plugin exposes the NotificationAggregator class which allows you to aggregate multiple tasks (e.g. uploading multiple files) into a single notification.

This addon complements the Notification plugin that lets you create the notifications which are displayed inside CKEditor and can be combined with your website or CMS notifications.

Screenshots

carousel
Download Required
notificationaggregator

1,307,695 downloads (view stats)

This is an official plugin provided and supported by CKEditor developers.

You can submit bug reports directly to its GitHub issues tracker and discuss any integration issues on StackOverflow.

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 4.23.0-lts

Download• Release notes

First major release of CKEditor 4.23.0-lts

Version: 4.22.1

Download• Release notes

First minor release of CKEditor 4.22.1

Notification

This plugin implements methods for creating and displaying various types of notifications – information, warning, success and progress.

It can be combined with the Notification Aggregator plugin to create notifications aggregating many small tasks in one message.

Screenshots

carousel
carousel
Download Required
notification

1,956,680 downloads (view stats)

This is an official plugin provided and supported by CKEditor developers.

You can submit bug reports directly to its GitHub issues tracker and discuss any integration issues on StackOverflow.

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 4.23.0-lts

Download• Release notes

First major release of CKEditor 4.23.0-lts

Version: 4.22.1

Download• Release notes

First minor release of CKEditor 4.22.1
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check