CKEditor 4.1 RC Released

Posted by sebstefanov on JavaScript

The team is proud to announce the release of CKEditor 4.1 RC. This version introduces a variety of new and exciting features that will greatly enhance CKEditor's configurability. Among other things, 4.1 RC includes something we call Advanced Content Filter (ACF) - a set of options that give you more control over content accepted by CKEditor. This Release Candidate should give everyone plenty of time to adjust to the new additions.

Advanced Content Filter (ACF)

New to CKEditor is a set of data filtering, transformation and feature activation options which we dubbed Advanced Content Filter, or ACF for short. The new enhancement isn't security related, but it modifies CKEditor's editing experience by adapting tools and features (toolbar, keystrokes, context menu options, etc.) to prevent disallowed content from being added to articles.

ACF is an awesome new feature that lets you precisely configure what content should be allowed by the editor, giving you more control over the look of your articles. Because we always try to combine both power and simplicity, it is possible to (i) leave CKEditor to filter content automatically based on enabled plugins/buttons, or (ii) define manually the set of allowed content.

The Advanced Content Filter can also be easily activated or disabled through a single configuration option.

How it works

Until now, when a user pasted content directly in the editor's WYSIWYG area or in source mode, CKEditor accepted and displayed everything from the copied content. In many cases, this was undesired because the content might be filtered on the server side. Losing formatting after saving an article is strongly against the “What you see is what you get” principle. As of 4.1 this will no longer be a problem. 

Now, if you configured your toolbar with Bold, Italic, Underline and Link buttons, CKEditor will only preserve those tags, whereas other tags, styles and attributes will be stripped if, generally speaking, appropiate buttons are not in the toolbar.

So, if in the scenario above you paste content from an external site with:

  • flash objects,
  • font and background colors,
  • hundreds of divs,
  • classes used on that web page,
  • some weird attributes and so on,

you will no longer have to clean this mess up manually (what was even more troublesome, some things like attributes and styles could have been only removed in source mode). ACF will enhance the editing experience by adapting input data to the editor configuration, saving you a lot of time.

Please remember that custom or 3rd party plugins need to define their tags or they might be removed by CKEditor. Furthermore, when editing existing content, only tags and attributes/styles that can be inserted in CKEditor will be preserved, so be cautious when editing rich content that was provided using source mode, for example.

Demo

See a live demo of data filtering in CKEditor 4.1 RC (standard version).

Features activation

Apart from letting CKEditor filter the content styles defined by your toolbar buttons, it is possible to do the opposite. Define the allowed content and your toolbar will magically adapt to the new configuration! Best of all, it will also influence keystrokes, context menu options and other parts of CKEditor.

Download any CKEditor package, set allowedContent to the set of tags/attributes/styles you want to allow, and all buttons that generate disallowed code will automatically be removed from the toolbar! No need to adjust the toolbar whenever you change the set of allowed tags. Input elements in dialog windows which were designed to edit disallowed attributes will be removed automatically too!

Content Transformations

This is another feature of which we are particularly proud. If you ever dreamed of having full control over generated content, then 4.1 is exactly the version you’ve been waiting for. It is possible now to define any kind of transformations: element to element, attribute to element, style to element, style to attribute and vice versa!

A quick example: Suppose that for bolded content your intention is to use the <strong> element. Whenever a user provides <span style="font-weight:bold"> or <b>, CKEditor will detect it and convert both into <strong> based on defined transformations. Automatically!

Other new features

Shared spaces available in V4!

Shared Spaces: Reintroduced the ability to display toolbar and bottom space in selected locations and to share them by different editor instances. The same toolbar can be shared by both framed and inline editors! (Plugin not included in default packages.)

Source Dialog plugin with support for inline editing

Sourcedialog: Introduced a plugin that brings raw HTML editing for inline editor instances. (Plugin not included in default packages.)

Replaced obsolete <strike> in favor of <s>

#9796: Introduced <s> as a default tag for the strikethrough feature, which replaces the obsolete <strike> in HTML5.

New features in CKEditor API

CKEditor 4.1 RC comes with three new events to give you even more control over input/output data:

contentPreview

Preview can be now customized. Added contentPreview event for additional preview data manipulation. With this event, the raw HTML content of the preview window can be altered or modified. More here...

toDataFormat

Convert internal HTML to output data HTML. More here... 

toHtml

The ability to purify HTML. By adding listeners with different priorities it is possible to process input HTML on different stages. More here...

Download

Note: Because CKEditor 4.1 will introduce features to which plugins may need adjusting, we decided to release a Release Candidate first. This will give everyone time to understand the new features and to update custom plugins.

Download CKEditor 4.1 RC now!

Basic version | Standard version | Full version

License

CKEditor is available in Open Source and Commercial licenses. Full details can be found on our license page.

Reporting Issues

Please use the CKEditor development website to report issues and suggestions through tickets.

Support

Community support is available through our forums. Visit the support page for additional options.

Enter the discussion and post your comment

Post a comment
  1. The content of this field is kept private and will not be shown publicly.
  1. This is great! It will save me A LOT of work.

    Thanks!

  2. A huge leap forward.  See my post in the forum.  The allowedContent feature is brilliant and (after a few days experimenting with it) flawlessly done.  I eliminated almost all workaround code and much of the configuration of the editor and ui dialogs.

  3. Dmitriy Zasyatkin's picture

    Dmitriy Zasyatkin

    Reply

    Could you please elaborate on what you mean by "custom or 3rd party plugins need to define their tags"?
    I have 4.1rc and I have tried setting allowedContentRules to true and extraAllowedContent to allow a special tag I use, but when I copy and paste within the editor or when I use "insertHtml" instead of "insertElement" it removes the tags. 

    Thanks, I love the new version.

     

  4. Frank's picture

    Frank

    Reply

    Hello community !

    I have a problem with my CKEeditor version 4.1...

    I use the editor for a sales platform to fill in all datas of my auction by copying the sales text and its configurations (such as color, size etc..) and placing it in the editor.

     

    After choosing "OK" the text is in the editor, but all configurations of the text is gone.

     

    Can anyone help me to solve that problem ???

     

    Best regards and thanks in advance,

     

    Frank