API

This plugin provides APIs for other plugins to work with browser windows, dialog UI elements, media elements, htmlParser elements, URLs and XMLHttpRequests.

api

1,067 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

Quote Widget

This widget can be used as an alternative to the Blockquote Plugin. It allows to wrap a blockquote element within a figure element with the CSS class quote and to add a caption in order to "clearly relate a quote to its attribution" (see WHATWG).

So the resulting HTML will be

<figure class="quote>
    <blockquote>
        ...
    </blockquote>
    <figcaption>
        ...
    </figcaption>
</figure>

If the caption is empty, the blockquote element will be unwrapped, so the resulting HTML will just be

<blockquote>
    ...
</blockquote>

 

Screenshots

quote

253 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

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

317 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.

Block Widget

This widget lets you create and edit non-editable and optionally previewable placeholder blocks.

You can edit the placeholder block through a simple dialog where you can enter the ID of the block into a text input field. How you use the ID-field is completely up to you. Whatever makes sense for you or rather your application is fine.

Additionally, you can integrate a block browser similar to a file/media browser and select the block through that. Your block browser implementation can pass the id and optionally the content of the selected block. If the content is passed, the selected block will be previewable.

In order to make blocks previewable that are already in the initial content when you load the editor, you have to provide an URL to a block API that will return the content for a requested id.

Block Browser

To enable the block browser option, you need the browser plugin, a browser implementation that uses the browser plugin and have to configure the URL to the browser implementation, p.e.

config.blockBrowser = '/example/url/to/browser';

Your block browser implementation can currently send following keys with the message:

{
    id: ..., // required, the ID of the block,
    content: '...', // optional, the HTML for the preview
}

Block API

To enable the block API option, you just have to configure an URL callback function that will receive the ID of the block and must return the final URL to the block API, p.e.

config.blockApi = function (id) {
    return '/example/url/to/api/' + id ;
};

This widget will then issue a GET request to the final URL. The block API must only return the HTML content for the preview if the block with the requested ID exists.

Technical

When you save the editor content, i.e. on downcast, the resulting placeholder will be a block-element with an id attribute

<block id=""/>

When you load your content into the editor, i.e. on upcast, the block-element will be tranformed to a div-element with a data-block-attribute

<div data-block=""></div>

This widget will add some minimal CSS to the editor to make the placeholder somehow visible. You likely want add more styles to adjust the look to your needs, especially if you make use of the block browser and API options.

Demo

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

Minimalistic browser example

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

Screenshots

block

308 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

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

357 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 2.9

DownloadRelease notes

Technical release

Links Split - URL & Domain

Help you split domain name and url.

Install : 

  1. Download source and extract to "ckeditor/plugins" folder.
  2. in config.toolbarGroups (groups) add "HkUrlSplit"
  3. in config.extraPlugins add "hkurlsplit"

Screenshots

hkurlsplit

602 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.0

DownloadRelease notes

Work with Ckeditor 4x

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)

Spacing Sliders

Combined slider controls to adjust 'line-height' and 'letter-spacing' CSS values of text.

Screenshots

spacingsliders

1,132 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.3

DownloadRelease notes

* Make slider ranges configurable.

* Fixes an error when attempting to move sliders before focusing the editing area.

Computed Font

Modified version of Font addon to use computed style information to handle inherited text styles better.
 
Now both font family and size combo show actual CSS values applied to the selection, regardless of whether the style was explicitly overriden or not.

computedfont

2,240 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.2

DownloadRelease notes

  • Fixed a regression with missing font size unit.
  • Remove quotation marks from font family names.
Twitter Facebook Facebook Instagram Medium Google+ GitHub Arrow down Phone Menu Close icon Check