Grid Widget

This widgets just serves as a container for multiple instances of other widgets in order to apply certain styles on them, p.e. through flexbox or grid layout.

The resulting HTML will be

<div class="grid">
    ...
</div>

Technical

This widget will only allow other widgets as child elements. The filtering now takes place on downcast.

Screenshots

grid

316 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

N1ED: Bootstrap 4 editor + Dashboard + plugins

N1ED - powerful HTML WYSIWYG editor for your website. Based on CKEditor it cardinally improves it beyond recognition. It supports Drupal 7 and 8, WordPress and Joomla 3, has online Dashboard and perfect Bootstrap 4 support. Most of JS+ add-ons are included in the N1ED.

N1ED plugin for CKEditor 4 lets you to easily try N1ED with your editor.

Screenshots

N1ED

662 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.0

DownloadRelease notes

The first release of N1ED.

See n1ed.com for more.

Browser

This plugin provides a simple and minimal browser API for other plugins to consume (almost identical to the mediabrowser plugin) as an alternative to the filebrowser plugin.

It does absolutely not care about advanced features like file uploads or the likes. If you need those features, stick with the filebrowser. It rather focuses on the easy integration of your application (CMS or whatever), which usually provides a means to upload files anyway.

Unlike the filebrowser plugin it does not use URL parameters to pass values between the editor and the browser windows, but uses the browser-native window.postMessage() functionality to communicate between both. This way you can easily pass more than just the URL of the selected element from the browser to the editor or even multiple elements at once.

Difference between browser and mediabrowser plugin

There is only one difference between the browser and the mediabrowser plugin:

Whilst the mediabrowser plugin offers a config option to set a global browser URL for all plugins that use it, the browser plugin does not have any config option at all, but your plugin surely could have. With the browser plugin you could configure the browser URL for each button individually, if you want.

Plugin Integration

To use the provided API in your plugin, you just have to define a callback function browser and browserUrl in the browse server button configuration of your plugin's dialog, p.e.

{
    id: 'browse',
    type: 'button',
    label: common.browseServer,
    hidden: true,
    browser: function (data) {
        if (data.src) {
            var dialog = this.getDialog();

            ['src', 'type', 'alt'].forEach(function (item) {
                if (!!data[item]) {
                    dialog.getContentElement('info', item).setValue(data[item]);
                }
            });
        }
    },
    browserUrl: '/url/to/browser'
}

Browser Integration

You can implement your browser as you wish, the only requirement is that your browser notifies the editor by posting a message p.e. like

window.opener.postMessage({
    alt: 'Optional alternative text',
    src: '/url/to/media'
}, origin);

The type and structure of your message is complety up to you, p.e. you can use a simple string if you are only interested in one value, an object or an array.

Demo

https://akilli.github.io/rte/ck4

Minimalistic browser example

https://github.com/akilli/rte/tree/master/browser

browser

355 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

HKemoji - custom emoji - smiley

This plugin integrates the custom png/gif emoji and smiley for ckeditor 4 (with exists 4 example emoji package)

  • If you want revenge "emoji dialog" auto close when clicked emoji, open "dialogs/hkemoji.js" and delete line 26: dialog.hide();
  • To add or remove smiley, read documentation.

Screenshots

hkemoji

1,381 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.0

DownloadRelease notes

Maybe work with older version (4.5)

Media Browser

This plugin provides a simple and minimal browser API for other plugins to consume (almost identical to the browser plugin) as an alternative to the filebrowser plugin.

It does absolutely not care about advanced features like file uploads or the likes. If you need those features, stick with the filebrowser. It rather focuses on the easy integration of your application (CMS or whatever), which usually provides a means to upload files anyway.

Unlike the filebrowser plugin it does not use URL parameters to pass values between the editor and the browser windows, but uses the browser-native window.postMessage() functionality to communicate between both. This way you can easily pass more than just the URL of the selected element from the browser to the editor or even multiple elements at once.

Difference between browser and mediabrowser plugin

There is only one difference between the browser and the mediabrowser plugin:

Whilst the mediabrowser plugin offers a config option to set a global browser URL for all plugins that use it, the browser plugin does not have any config option at all, but your plugin surely could have. With the browser plugin you could configure the browser URL for each button individually, if you want.

Plugin Integration

To use the provided API in your plugin, you just have to define a callback function mediabrowser in the browse server button configuration of your plugin's dialog, p.e.

{
    id: 'browse',
    type: 'button',
    label: common.browseServer,
    hidden: true,
    mediabrowser: function (data) {
        if (data.src) {
            var dialog = this.getDialog();

            ['src', 'type', 'alt'].forEach(function (item) {
                if (!!data[item]) {
                    dialog.getContentElement('info', item).setValue(data[item]);
                }
            });
        }
    }
}

Browser Integration

You can implement your browser as you wish, the only two requirements are that you configure the URL to your browser as mediabrowserUrl p.e.

config.mediabrowserUrl: '/url/to/browser';

and that your browser notifies the editor by posting a message p.e. like

window.opener.postMessage({
    alt: 'Optional alternative text',
    src: '/url/to/media'
}, origin);

The type and structure of your message is complety up to you, p.e. you can use a simple string if you are only interested in one value, an object or an array.

Demo

https://akilli.github.io/rte/ck4

Minimalistic browser example

https://github.com/akilli/rte/tree/master/browser

mediabrowser

1,858 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

Version: 1.1

DownloadRelease notes

Use window.location.origin as first fallback for Edge

OpenStreet-Map

Since google map now require to pay for API key, I was decide to change all my maps to something else.

End now, we have OpenStreet map. For this I was use MapQuest library...

Please check "https://developer.mapquest.com/documentation/ " for more.

Yes and OpernStreet require API key, buy it's free of charge.

So, please go to "https://developer.mapquest.com/plan_purchase/steps/business_edition/business_edition_free/register

and GRAB your free API key.

You need just first time to add this key, will be saved for future time.

About Plugin, in short...

1: you need your API key . grab it.

2: you can put one or two marker on the map

3: you must to know lattitude and longitude of marker places, you have for taht purpose link to click on top of plugin window.

4:select type of marker, there is several.. try it..

5: select type of map, try, and select what you need.

6: select zoom... (this works perfect with one marker, with two you will got best fit in window.

7: Choose window size...

press OK.

That is..

Installation:

1:Unzip OpenStreet.zip to "CKEditor.plugins/"

2:In config.js add OpenStreet on line

 config.extraPlugins = "OpenStreet";

That is.. save, reload, try :)

If you have and other plugins in this line than add OpenStreet as

 config.extraPlugins = "inlinesave,zsmanager,OpenStreet";

or in similar order..

enjou.

Screenshots

OpenStreet

1,276 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.1

DownloadRelease notes

Nothing special required, but please..

I did not have time to test this plugin in all situation..

So, if you have a problem please tell me.

LoopIndex Track Changes (Commercial License)

The plugin provides the option to track the changes (additions/deletions) made to your editor's text, with the support of multi-user changes, meaning, changes will be colored differently for each user and will show the user information, enabeling you to see exactly who is the change owner. 
Changes are marked as added or deleted.

The operations supported by the plugin are:

  • Enable / Disable Track Changes

  • Show / Hide Track Changes

  • Accept / Reject All Changes

  • Accept / Reject A Single Change

  • Displays The Changed Text Author

  • Displays The Change Timestamp  

Screenshots

Product Page Commercial plugin

Google Search

A simple ckeditor plugin to add a google search button to search selected word.

 

Installation:

add "googlesearch" to your ckeditor's extraPlugins variable.

Screenshots

googlesearch

2,920 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.1

DownloadRelease notes

minor bug fixes

Open Link

Open Link is a very simple plugin, extending the editor context menu with a possibility to open the link in a new tab. It has the following features:

  • It extends the context menu with a possibility to open the link in a new tab.
  • It allows you to open the link with a Ctrl/Cmd click.

The plugin also integrates with linked Enhanced Image widgets.

Screenshots

openlink

4,200 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.0.4

DownloadRelease notes

Added Ukrainian language thanks to Sensetivity.

Balloon Toolbar

This plugin provides an API to create floating toolbars pointing at a given element.

It also allows you to specify context-aware toolbars, providing a very easy way of defining a customized toolbar for a given content type.

See the Ballon Toolbar plugin documentation for more technical information.

 

Screenshots

balloontoolbar

22,092 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.11 4.10 4.9

Version: 4.11.4

DownloadRelease notes

The fourth bug fixing release for CKEditor 4.11.

Version: 4.10.1

DownloadRelease notes

The first bug-fixing release for release for CKEditor 4.10.

Version: 4.9.2

DownloadRelease notes

The second bug fixing release after the CKEditor 4.9 major release.

Twitter Facebook Facebook Instagram Medium Google+ GitHub Arrow down Phone Menu Close icon Check