CKEditor 4

Color Input

This is a new color input element that can be defined in the dialog definition.

  • Use getValue, setValue, setup, commit, just like you would with a text input.
  • Three layouts: expanded, compact, or minimal.
  • All layouts use and depend on the color dialog plugin.
  • Extract to your plugins directory and add the 'colorinput' plugin.
  • Add type: "color" elements to your dialogs. Example:
CKEDITOR.dialog.add('colorinputdialog', function(editor) {
    return {
        title: 'Color Input View',
        contents: [{
            id: 'info',
            label: 'Info',
            elements: [{
                id: 'color',
                type: 'color',
                'default': 'red', //optional
                layout: 'expanded', // optional: 'expanded' (default), 'compact', or 'minimal'
                label: 'Background Color'
            }]
        }]
    }
});

 

Screenshots

carousel
carousel
Download Add to my editor
colorinput

8,340 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0.4

Download• Release notes

Tested on CKEditor 4.16

PayPal Payment Button

Make it easy to buy one or more of a single item. Sell multiple items with one payment button.

Available Buttons:

  • Buy Now/Pay Now
  • Add to Cart

 

DEPENDENCIES:

It requires the following plugins to work: Widget and Line Utilities.

 

NOTE: You can send your suggestions, comments, concerns, or inquiries through mj.plugins.info@gmail.com or by filling up the contact form of my website. I'm having trouble using Disqus lol.

Screenshots

carousel
carousel
carousel
carousel

Product Page

Grouped Placeholder Selector

Grouped Placeholder Selector

Screenshots

carousel
carousel
Download Add to my editor
group_placeholder_select

1,559 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 0.1

Download• Release notes

分组占位符选择器

Grouped placeholder selector

Export to PDF

The Export to PDF CKEditor 4 plugin allows you to easily print the WYSIWYG editor content to a PDF file. When enabled, this feature sends the content of your editor together with the styles that are used to display it to the CKEditor Cloud Services HTML to PDF converter service. The service then generates a PDF document that can be downloaded by the user.

Thanks to this plugin, it takes exactly one button click to get a PDF file with content formatted in the same way as the one visible in CKEditor 4.

CKEditor 4 Export to PDF also allows various customizations like changing the page size and margin, setting additional styling, adding custom headers and footers and pre-processing content. This gives great flexibility and control over the PDF output and allows to keep all the PDF documents consistent when it comes to styling.

The CKEditor 4 Export to PDF plugin is really simple to use and works out-of-the-box. It does not require any additional configuration and due to its flexible nature, it covers a lot of cases internally while also providing an easy way to customize output PDF files.

The most important features are:

The CKEditor 4 Export to PDF plugin works in all the browsers supported by CKEditor 4 except for Internet Explorer versions older than version 11. The plugin is compatible with CKEditor 4 versions starting from 4.6.1.

This is a premium feature. Please contact us if you would like to purchase a license. Let us know if you have any feedback or questions! You can also sign up for the CKEditor Premium Features 30-day Free Trial .

Screenshots

carousel
carousel
carousel
carousel
carousel

Product Page

Download Add to my editor

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.24 4.23 4.22

Version: 4.23.0-lts

Download• Release notes

First major release of CKEditor 4.23.0-lts

Version: 4.22.1

Download• Release notes

First minor release of CKEditor 4.22.1

Font Awesome 5 (Pro and Free)

Font Awesome 5 Icons plugin for CKeditor 4. Includes all the icons of Font awesome 5.13.0

Now supports the pro and free edition. When you uses an older version you can give the version number in de configs and the icons which are not present in this version wil not be shown.

Installation:

  • Add the fontawesome5 directory in the plugins folder of CKeditor 4.
  • Add 'fontawesome5' item to your toolbar
  • Add 'fontawesome5' item to your extra plugins
  • Configure the fontawesome settings in: config.fontawesome : { }
  • config.allowedContent = true;
  • $removeEmpty['span'] = false; Thats it.

Config options:
config.fontawesome : {

'path': 'path-to-you-all.css-file',
'version': '5.13.0',
'edition': 'pro', (default: pro, options: free,pro)
'element': 'span' (default span, options, all html elements such as i,div,span,a,p, etc..)

}

When you use an other element, don't forget to use $removeEmpty for the element.

Example:

  • config.toolbar = [['Source', '-', 'NewPage', '-', 'Templates','fontawesome5']];
  • config.extraPlugins = 'fontawesome5';
  • config.fontawesome = { 'path':'/path/to/your/font-awesome-5/all.css', 'version':'5.13.0', 'edition':'pro', 'element':'i' };
  • CKEDITOR.replace(editorname, config);
  • CKEDITOR.dtd.$removeEmpty['i'] = false;

For the latest version, go to my github:

https://github.com/daanwilson/cke-fontawesome5

Like the plugin? Please by me a beer

 

Screenshots

carousel
carousel
carousel
Download Add to my editor
fontawesome5

4,851 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.1.3

Download• Release notes

Stylesheet modification for icons presentation

Block image paste

Inhibit image paste event.

In Firefox image copy & paste create a temporary image with 'src' attribute in base64. This plugin inhibit the paste event permitting you to have more control about image upload.

Download Add to my editor
blockimagepaste

4,276 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0.0

Download• Release notes

First release

placeholder list custom labels

Custom placeholder menu.

Download Add to my editor
placeholder_custom_labels

2,043 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 0.2

Download• Release notes

Added more configuration options.

  • config.valueSuffix;
  • config.valuePreffix;
  • config.menuItemPreffix;
  • config.menuItemSuffix.

Paste from LibreOffice

This plugin allows you to paste content from LibreOffice Writer and maintain original content formatting.

Paste from LibreOffice retains the following features:

  • Text formatting
    • Text and background colors
    • Font family, style and size
    • Basic formatting (bold, italic, underline)
    • Font effects (strikethrough, superscript, subscript)
    • Heading levels
    • Text alignment
  • Lists
    • Numbered and bulleted lists
    • Multilevel lists
    • Different numbering formats (Roman, decimal, alphanumeric)
    • Custom start number (e.g. you can start the list from number 4)
  • Tables
    • Borders and shading
    • Cell size (width and height)
    • Cell alignment
  • Images

 

Screenshots

carousel
carousel
Download Remove
pastefromlibreoffice

591,994 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.24 4.23 4.22

Version: 4.23.0-lts

Download• Release notes

First major release of CKEditor 4.23.0-lts

Version: 4.22.1

Download• Release notes

First minor release of CKEditor 4.22.1

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

carousel
carousel
Download Add to my editor
katex

202 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0.0

Download• Release notes

Initial release.

FontAwesome5

FontAwesome5 (free) 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 = 'ckeditorfa';
  • config.allowedContent = true;
  • config.contentsCss = '/{your_path}/all.min.css';

CKEDITOR.dtd.$removeEmpty['span'] = false;
 

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

For Font Awesome 6.x use this plugin: https://ckeditor.com/cke4/addon/ckeditorfasix

Screenshots

carousel
Download Add to my editor
ckeditorfa5

6,981 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 5.18

Download• Release notes

Compatible with Font Awesome 5.15.x

Modified select icon function

Online builder

Your plugins

  • 39 from preset
  • 0 selected
  • 22 required

Your skin

Moono-Lisa

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