KaTeX

Installation:

  • Copy files to the "plugins" folder of CKEditor, then add `config.extraPlugins = 'katex';` in config.js.
    Please note, source code is ECMAScript 2016+. If you need to support old browsers, transpile the code on your own.
  • Or use official builder "https://ckeditor.com/cke4/builder".

Configuration:

// [Required] Pathes to the CSS and JS files of katex library.
config.katexLibCss = '';
config.katexLibJs = '';

// Default class of an element that will be converted into a widget.
config.katexClass = 'math-tex';

// List of delimiters to look for math. Each delimiter is array of:
// left delimiter (String), right delimiter (String), display mode (Boolean).
// By default `\(` and `\[` are used, but `$` and `$$` are also supported.
config.katexDelimiters = [...];

// Additional options to pass into `katex.renderToString`.
config.katexOptions = {...};

 

Screenshots

katex

202 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.14 4.13 4.12

Version: 1.0.0

DownloadRelease notes

Initial release.

FontAwesome5

FontAwesome5 allows you to insert formatted Font Awesome 5.x into your text in CKEditor.

Install:

  1. add in your html page all.min.css
  2. add in your config.js from ckeditor folder:
  • config.extraPlugins = 'ckeditorfa5';
  • config.allowedContent = true;
  • config.contentsCss = '/{your_path}/all.min.css';

For Font Awesome 4.7 use this plugin: https://ckeditor.com/cke4/addon/ckeditorfa-0

Screenshots

ckeditorfa5

2,076 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.14 4.13 4.12

Version: 5.9

DownloadRelease notes

Update to Font Awesome 5.13.0

Spreadsheet

This plugin offers Excel-like functionality available right inside CKEditor 4. It allows you to create intelligent, data-driven documents in your WYSIWYG editor. This makes it a perfect solution for financial, auditing, engineering, technical and science industries.

When enabled, the Spreadsheet plugin allows you to insert advanced spreadsheet widgets into your rich-text content and provides the following features:

  • Inserting spreadsheets with and without a header row or column and with any number of rows and columns.
  • Creating auto-updating references to spreadsheet cells right inside editor content.
  • Autoconverting data pasted from Microsoft Excel and Google Sheets into a spreadsheet instance.
  • Converting existing tables to spreadsheet instances and vice versa.
  • Inserting spreadsheets using predefined templates.
  • Spreadsheet structure manipulation (adding, removing or resizing rows and columns).
  • Renaming row and column headers.
  • Single and multi-column sorting.
  • Basic data styling like bold, italic, underline and so on.
  • Changing cell alignment, text and background color, font size and font family.
  • Selecting cell type and formatting with data validation support.
  • Using formulas.
  • Auto filling rows and columns.
  • Applying various conditional formatting rules to single and multiple cells, entire columns or spreadsheets.
  • Advanced copying and pasting.

For a more detailed Spreadsheet plugin functionality overview, refer to the Creating Data Grids with Spreadsheet Plugin article. See the Spreadsheets Integration guide for information about how to install and configure the plugin.

This feature is provided as a commercial product and provides integration with our partner solution, Handsontable. A license can be purchased here.

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.14 4.13 4.12

Version: 1.2.0

DownloadRelease notes

New Features:

Fixed Issues:

  • Fixed: Converting a regular HTML table with colspan or rowspan attributes fails, freezing the browser window.
  • Fixed: Frontend adapter fails without the CKEDITOR namespace.

API Changes:

Version: 1.1.0

DownloadRelease notes

Added support for renaming row and columns headers.

Paste Tools

This plugin allows to create custom paste handling logic for a given paste type. It is used in the Paste from Word and Paste from Google Docs implementations.

It supports filtering content with Advanced Content Filter and custom filter files.

pastetools

83,395 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.14 4.13 4.12

Version: 4.14.0

DownloadRelease notes

The first major release of CKEditor 4.14.

Version: 4.13.1

DownloadRelease notes

The first minor release for CKEditor 4.13.

WProofreader

WProofreader is an external solution for an advanced check of text for any spelling, grammar or style problems. It provides both as you type and on-click proofreading modes in a convenient UI. End users just need to hover on the marked words for instant corrections or have the whole text proofread at once in a separate dialog. 

Here’s why WProofreader:

  • Available as a standalone secure solution on your server or as an annual subscription to the service hosted by WebSpellChecker.
  • Out-of-the-box offer supports spell check in 17 languages and grammar check in 15 out of 17 default languages:  American English, British English, Brazilian Portuguese, Canadian English, Canadian French, Danish, Dutch, Finnish, French, German, Greek, Italian, Norwegian Bokmal, Portuguese, Spanish, Swedish and Ukrainian.
  • There are also over 150 additional languages and specialized dictionaries such as Medical and Legal available. You can check the full list here
  • Personal user dictionaries. Some rare or field-specific words may be not recognized by our proofreading engine and reported as a mistake. If the word is spelled correctly, a user can add it to their own dictionary to prevent it from being reported in the future.
  • Global custom dictionaries are company-wide vocabularies, which are created and set at an admin level on top of the base languages.
  • WAI-compliant, up to WCAG 2.1 and Section 508 accessibility standards.
  • All modern web browsers are supported including the latest stable versions of Chrome, Firefox, Safari, MS Edge, and Internet Explorer 11 and native mobile browsers such as iOS Safari and Chrome for Android.

WProofreader is a commercial solution developed and provided by WebSpellChecker. You can obtain the license here.

N1ED

N1ED - free add-on for CKEditor transforming it into modern page builder with many Widgets, Templates and Mobile support.

N1ED powers up your standard CKEditor with a number of widgets from a typical image gallery to tables and custom templates. The editor is ideal for pro-level content editing as it makes accustomed tasks easier and adds a lot of industry-unique options. For instance, the enhanced fullscreen mode simplifies editing of a complex responsive content.

A galore of widgets covers almost any task you may have: find and embed YouTube videos, visual build HTML table, insert and stylized images, galleries, icons and much more. N1ED has mobile devices simulation is essential built in feature required to create correct webpages. Semantic breadcrumbs are irreplaceable when editing complex content with lots of nested elements as they allow to quickly select any given widget or an HTML element.

Adding your own widgets can be done using visual online dashboard. All changes are applied automatically to your instance.

N1ED can be improved with:
Bootstrap 4 Editor – layout manager and widgets for B4;
Flmngr - file manager and uploader for PHP, Node and Java;
ImgPen – image editor that can save the result on the server;
Translator – automatic translation to 90+ languages.

Screenshots

N1ED-editor

369 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.14 4.13 4.12

Version: 2020.2.0

DownloadRelease notes

Support of passing config to plugin directly to instance in "replace" function.

Bootstrap 3 Editor

Create responsive content in CKEditor like a pro thanks to this powerful content editor based on the native Bootstrap Grid-system. Manage all standard Bootstrap elements like containers, columns and rows in a simple visual way to create any responsive layout of the web page in minutes, completely without code editing.

To make sure the responsive content looks correctly on different devices, use the “on the fly” preview. And thanks to the File Uploader plugin tightly integrated into Bootstrap Editor you can add images to the page in one click.

Bootstrap 3 Editor is absolutely compatible with Foundation and can work in the Foundation-compatibility mode.

If you use Bootstrap 4, we recommend using Bootstrap 4 Editor instead.

Screenshots

API

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

Demo

api

4,128 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.14 4.13 4.12

Version: 2.11

DownloadRelease notes

Adjust origin check

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

browser

1,267 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.14 4.13 4.12

Version: 2.10

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

1,448 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.14 4.13 4.12

Version: 1.0

DownloadRelease notes

Work with Ckeditor 4x

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