CKEditor 3.6 Released!

We are proud to announce the latest major CKEditor release. CKEditor 3.6 brings some really exciting new features, like toolbar accessibility enhancements, read-only mode, and a BBCode sample that shows how to configure CKEditor to output BBCode instead of HTML. Do not miss the new plugins, too: Document Properties, Stylesheet Parser and Developer Tools can really make developer's life easier!

Toolbar a11y Enhancement

Strong accessibility support remains one of our strategic goals and we stated it clearly many times already. CKEditor 3.6 brings yet another improvement in this area, with the possibility to group toolbar buttons to make it easier to navigate between them with the Tab key. Each button group contains a separate label which enables users with visual impairment to use the toolbar more efficiently. In order to navigate between the buttons themselves, use the Arrow keys.

A full list of CKEditor keyboard shortcuts can be found in the User's Guide. Check Accessibility Guide for more information about a11y support in CKEditor.

Read-only Mode

This feature was introduced for the developers who would like to programmatically disable the editor without hiding it. It works by using the setReadOnly method to block the editor content from being modified.

// Turning the read-only mode on.
editor.setReadOnly( true );

// Turning the read-only mode off.
editor.setReadOnly( false );

For an example of this usage scenario check the "Read-only mode" (readonly.html) sample from the _samples folder.

Document Properties Plugin

This plugin makes it possible to set the metadata and styles of the edited page with a special CKEditor dialog window. Please note that it is designed to work with the Full Page mode only. Among the properties that you can set are:

• Text color and background color,
• Page margins,
• Page title and meta tags like keywords or description,
• Character set encoding and language direction.

For an example of this usage scenario check the "Full Page support with the Document Properties plugin" (fullpage.html) sample from the _samples folder.

Stylesheet Parser Plugin

This plugin makes it easier to use the existing CSS stylesheets in the CKEditor Styles drop-down list. When enabled, CKEditor will detect the styles available on the page (using the stylesheets that are defined in the contentsCss setting) and will display them to the user in the Styles menu.

Up till now, when you wanted to define a list of styles available in CKEditor, you had to use the stylesSet configuration setting. This was not always convenient, because apart from creating a CSS styles for the website to use, you had to write a separate style definition for CKEditor. On the other hand, this approach offers more control over which styles are available for the users, so both solutions can be employed interchangeably, according to your needs.

For an example of this usage scenario check the "Stylesheet Parser plugin" (stylesheetparser.html) sample from the _samples folder.

BBCode Sample

This plugin was created for users who are looking for a WYSIWYG BBCode editor. The architecture of CKEditor makes it possible to create content in any format and translate it to HTML. This also lets you use CKEditor to create an editor that outputs any pseudolanguage like BBCode or Wikitext instead of pure HTML.

Since BBCode implementation differs between various platforms and applications, the sample plugin that is available in CKEditor supports just some most common BBCode tags. You can now extend it with additional tags that suit your needs.

If you have ever thought about integrating the most popular WYSIWYG editor with your application that employs BBCode tags (like a blog or a discussion board), are tired of having to enter the BBCode text manually, miss live preview, and would like to provide your users with an easy to use and highly customizable editor, CKEditor can now solve all these problems for you.

For an example of this usage scenario check the "Output for BBCode" (bbcode.html) sample from the _samples folder.

Developer Tools

At CKSource one of our priorities is to provide not just the users but also the developers with the best tools that can make working with CKEditor as problem-free and pleasant as possible. The editor documentation is constantly being improved, the JavaScript API is being enhanced.

Some developers reported that while customizing CKEditor, they found it difficult to find the IDs of the dialog window elements that they wanted to hide, assign a default value, or when they wanted to create a plugin that would get the value of the element while working with the editor.

Since finding element IDs was indeed a bit problematic and meant that you had to search for them in the editor source code, we created the Developer Tools plugin that makes this information available to anyone, displaying it in a tooltip.

We would love to extend the functionality of the Developer Tools plugin since as the name suggests, its purpose is to provide CKEditor developers with the tools that make their life easier. If you have any ideas and suggestions on what other features should be introduced, you are most welcome to share them with us!

For an example of this usage scenario check the "Developer Tools plugin" (devtools.html) sample from the _samples folder.

Changelog

CKEditor 3.6 includes other minor enhancements and fixes. Check out the What's New? page for the full list of changes.

Download

Download CKEditor now!

License

CKEditor is available under Open Source and Commercial licenses. Full details can be found at 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.