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

Save to PDF

Use AWS Lambda to Generate PDFs using the  Api2Pdf REST API

Api2Pdf.com is a REST API for instantly generating PDF documents from HTML, URLs, Microsoft Office Documents (Word, Excel, PPT), and images. The API also supports merge / concatenation of two or more PDFs. Api2Pdf is a wrapper for popular libraries such as wkhtmltopdfHeadless Chrome, and LibreOffice.

This plugin adds a Save to PDF functionality to CKEditor4. It will take the HTML contents of your editor, convert it to PDF, and request the web browser to download it.

The plugin will add an icon to the toolbar to Save to PDF. 

A server side handler is required, sample code is provided for PHP and .NET

Screenshots

save-to-pdf

4,563 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 4.10

DownloadRelease notes

MathEx

MathEx

A CKEditor Plugin for MathML and Latex Mathemathical Expressions

Editor accepted string format from input default class was math if you change this you need to configure through mathexClass

<span class="math">\({ MathML or Tex Mathemathical expressions }\)</span>

Encoder Helper

let str = "<span class="math"><math><mrow><msup><mfenced><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></mfenced><mn>2</mn></msup></mrow></math></span>" 

this helper function added escape character before <math /> and html Decode for editor readable format

decoder(str) // <span class="math">\( &gt;math&lt;&gt;mrow&lt;&gt;msup&lt;&gt;mfenced&lt;&gt;mrow&lt;&gt;mi&lt;a&gt;/mi&lt;&gt;mo&lt;+&gt;/mo&lt;&gt;mi&lt;b&gt;/mi&lt;&gt;/mrow&lt;&gt;/mfenced&lt;&gt;mn>2&gt/mn&lt;&gt;/msup&lt;&gt;/mrow&lt;&gt;/math> \) </span>
function encoder(text){
    if (text){
        var myregexp = /<span[^>]+?class="math".*?>([\s\S]*?)<\/span>/g;
        return text.replace(myregexp, function replacer(match) {
            return match.replace(/<math>([\s\S]*?)<\/math>/g , function replacerData(match) {
                let tempString = match.replace(/<math>/g, "\\(<math>");
                return this.htmlEncode(tempString.replace(/<\/math>/g, "</math>\\)"))
            }.bind(this))
        }.bind(this))
    }
}

Decoder Helper

let str = "<span class="math">\({ MathML or Tex Mathemathical expressions }\)</span>" 

this helper function removed escape character before <math />

decoder(str) // <span class="math"> MathML or Tex Mathemathical expressions </span> 
function decoder(str) {
    let tempString = str.replace(/\\\(<math>/g, "<math>");
    return tempString.replace(/<\/math>\\\)/g, "</math>");
}

htmlEncode Helper

htmlEncode( 'A > B & C < D' )  // 'A &gt; B &amp; C &lt; D' 
var ampRegex = /&amp;/g,
gtRegex = /&gt;/g,
ltRegex = /&lt;/g,
quoteRegex = /&quot;/g,
tokenCharset = &#39;abcdefghijklmnopqrstuvwxyz0123456789&#39;,

/**
 * Replaces special HTML characters in a string with their relative HTML
 * entity values.
 *
 *		console.log( htmlEncode( &#39;A &gt; B &amp; C &lt; D&#39; ) ); // &#39;A &amp;gt; B &amp;amp; C &amp;lt; D&#39;
 *
 * @param {String} text The string to be encoded.
 * @returns {String} The encoded string.
 */
htmlEncode = text =&gt; {
	// Backwards compatibility - accept also non-string values (casting is done below).
	// Since 4.4.8 we return empty string for null and undefined because these values make no sense.
	if (text === undefined || text === null) {
		return &#39;&#39;;
	}

	return String(text).replace(ampRegex, &#39;&amp;amp;&#39;).replace(gtRegex, &#39;&amp;gt;&#39;).replace(ltRegex, &#39;&amp;lt;&#39;);
}

htmlDecode Helper

htmlDecode( '&lt;a &amp; b &gt;' ) // '<a & b >' 
var ampRegex = /&/g,
gtRegex = />/g,
ltRegex = /</g,
quoteRegex = /"/g,
tokenCharset = 'abcdefghijklmnopqrstuvwxyz0123456789',

allEscRegex = /&(lt|gt|amp|quot|nbsp|shy|#\d{1,5});/g,
namedEntities = {
	lt: '<',
	gt: '>',
	amp: '&',
	quot: '"',
	nbsp: '\u00a0',
	shy: '\u00ad'
}

allEscDecode(match, code) {
	if (code[0] == '#') {
		return String.fromCharCode(parseInt(code.slice(1), 10));
	} else {
		return namedEntities[code];
	}
}

/**
  * Decodes HTML entities that browsers tend to encode when used in text nodes.
  *
  *		console.log( htmlDecode( '&lt;a &amp; b &gt;' ) ); // '<a & b >'
  *
  * Read more about chosen entities in the [research].
  *
  * @param {String} The string to be decoded.
  * @returns {String} The decoded string.
  */
htmlDecode = text => {
	// See:
	// * http://jsperf.com/wth-is-going-on-with-jsperf JSPerf has some serious problems, but you can observe
	// that combined regexp tends to be quicker (except on V8). It will also not be prone to fail on '&amp;lt;'
	return text.replace(allEscRegex, this.allEscDecode);
}

 

MathEx

1,551 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.3

DownloadRelease notes

MathEx

Ckeditor addon for Mathematical Expressions

Changelog

  • Supports MathML and Latex
  • Optimised Version
  • Helpers included
  • README Updated
     

Bootstrap Widgets

Bootstrap widgets are very important for content management, but using them in CKEditor is not exactly simple. Well, now, you can effortlessly work with Bootstrap components directly in CKEditor!

Meet the Bootstrap Widgets add-on! It allows inserting the components provided by Bootstrap and Foundation CSS frameworks into your editor.

The set significantly extends the functionality of CKEditor. It offers all standard widgets like buttons, links, image galleries, icons, information messages, breadcrumbs, labels, badges, and so on. Try it and see how your work gets simpler.

You get the Bootstrap Include CSS/JS add-on for free to plug-in the framework to the content editor.

Product Page Commercial plugin
Twitter Facebook Facebook Instagram Medium Google+ GitHub Arrow down Phone Menu Close icon Check