Upload File
A simple plugin that allows you to drag&drop a file into the editor. The editor will then automatically send the file to your pre-configured backend and convert it into a link.
Screenshots
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.25 | 4.24 | 4.23 | ||
|
Version: 4.24.0-lts |
||||
|
First major release of CKEditor 4.24.0-lts |
||||
|
Version: 4.23.0-lts |
||||
|
First major release of CKEditor 4.23.0-lts |
||||
Layout Manager
This plugins adds various grids.
Configuration
config.extraPlugins = "layoutmanager"
config.layoutmanager_loadbootstrap = true/false (false by default - embedded bootstrap.css is not loaded)
config.layoutmanager_allowedContent (all tags are allowed by default)
config.layoutmanager_buttonboxWidth = 58 (the width of each layout-preview button in the dialog).
If the plugin is used in inline instance of the editor and/or with the divarea plugin, the files 'css/style.css' and 'css/bootstrap.css' should be loaded manually.
Name for adding into the toolbar : "AddLayout"Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.25 | 4.24 | 4.23 | ||
|
Version: 1.1.0 |
||||
|
Refactor dom manipulation logic to use JQuery Breaking changes: JQuery should be loaded to have the plugin working |
||||
Youtube, Vimeo and Dailymotion plugin
This plugin allows you to insert videos from Youtube, Vimeo or Dailymotion only pasting an URL or embed code. The inserted videos will catch the full CKEditor width and will be fully responsive.
Installation- Download the plugin and put it into the CKEditor plugins folder.
- Enable the plugin adding the following code inside your config.js.
config.extraPlugins = 'videodetector'; - Add the VideoDetector icon to your toolbar.
config.toolbar = ['VideoDetector'];
- Fixed toolbar on top: The toolbar will remain fixed on top when CKEditor touch the browser top on scroll. If you write a long article you will not have to scroll up again to apply a style to selected text. Click here to view a demo of this plugin.
Screenshots
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.25 | 4.24 | 4.23 | ||
|
Version: 1.2 |
||||
|
||||
Auto Link
A simple plugin that turns the pasted or typed URL text into a link. For example, "http://example.com" will become "<a href=“http://example.com”>http://example.com</a>".
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.25 | 4.24 | 4.23 | ||
|
Version: 4.24.0-lts |
||||
|
First major release of CKEditor 4.24.0-lts |
||||
|
Version: 4.23.0-lts |
||||
|
First major release of CKEditor 4.23.0-lts |
||||
Auto Embed
This plugin automatically turns a media resource URL pasted into the editing area into an embedded resource. By default this feature is configured to work with the Media Embed and Semantic Media Embed plugins.
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.25 | 4.24 | 4.23 | ||
|
Version: 4.24.0-lts |
||||
|
First major release of CKEditor 4.24.0-lts |
||||
|
Version: 4.23.0-lts |
||||
|
First major release of CKEditor 4.23.0-lts |
||||
Fixed toolbar on top
This plugin add an awesome functionality to your CKEditor! The toolbar will remain fixed on top when CKEditor touch the browser top on scroll. If you write a long article you will not have to scroll up again to apply a style to selected text. Tested on Chrome, Safari and Firefox.
Installation- Download the plugin and put it into CKEditor plugins folder.
- Enable the plugin adding the following code inside your config.js.
config.extraPlugins = 'fixed';
-
Videodetector: This plugin allows you to insert videos from Youtube, Vimeo or Dailymotion only pasting an URL or embed code. The inserted videos will catch the full CKEditor width and will be fully responsive. Click here to view a demo of this plugin.
Screenshots
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.25 | 4.24 | 4.23 | ||
|
Version: 1.0 |
||||
|
- Fixed toolbar on top when CKEditor is touching the top browser bar. - When CKEditor content finish, hide the toolbar. |
||||
Video Snapshot
Get video snapshot from the url
Add-on Installation InstructionsEnable the plugin by using the extraPlugins configuration setting
config.extraPlugins = 'videosnapshot';
If you use `sourcedialog` plugin, you need to enable `allowedContent` option
config.allowedContent = true;Add item with custom toolbar
config.toolbar = [
...
{ name: 'other', items: ['videosnapshot'] }
]My other plugin
Funding
Thank you for your interest in giving to this plugin. You can make a donation by clicking on the paypal button in my website.
Screenshots
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.25 | 4.24 | 4.23 | ||
|
Version: 0.0.2 |
||||
|
||||
Attachments
- Categories: Tools
- Author: sahilbatla
- License: GPL, LGPL, MPL
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)
);
}
}
}
}
});
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.25 | 4.24 | 4.23 | ||
|
Version: 1.0 |
||||
|
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
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.25 | 4.24 | 4.23 | ||
|
Version: 1.0.2 |
||||
|
||||
Config Helper
Helps in changing behaviour of CK Editor. This is an extension to Config Helper
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.25 | 4.24 | 4.23 | ||
|
Version: 1.0rc |
||||
|
This release contains fixes to Config Helper plugin |
||||