- Most wanted
- Standard editor
- Full featured
- Inline editing
- User interface
- Skins
- UI Color
- UI Languages
- Toolbar configuration
- Toolbar position
- DIV based editor
- Accessibility
- Behavior
- ENTER key configuration
- Read-only mode
- TAB key focus
- Data control
- Output XHTML 1.1
- Output for Flash
- Full page editing
- BBCode
- Tools
- Table resizer
- Magic-line
- Auto-grow
Standard editor
The following is the standard editor configuration provided with the standard option in the download page.
CKEditor with lots of features enabled
The following is the standard editor configuration provided with the full option in the download page.
Inline editing
CKEditor 4 brings a new concept of inline editing, which makes it possible to edit html pages that look just like the final ones. That's real WYSIWYG experience.
Just click on the different parts of the following sample (including titles) to edit them in-place.
CKEditor
Goes
Inline!
Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac.
Fusce vitae porttitor
Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.
Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum nisl nulla sem in metus. Maecenas wisi. Donec nec erat volutpat.
Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum
Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.
Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.
Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.
Integer condimentum sit amet
Aenean nonummy a, mattis varius. Cras aliquet.Praesent magna non mattis ac, rhoncus nunc, rhoncus eget, cursus pulvinar mollis.
Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.
Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.
Praesent wisi accumsan sit amet nibh
Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.
Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce gravida, erat vitae augue. Fusce urna fringilla gravida.
In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.
Skins that match your style
The CKEditor Add-Ons repository offers several different skins, for all different needs. You'll certainly find one that matches your style. Here you have a few selected ones.
UI Color
Click on any of the available colors to customize the editor. Any hexadecimal color (e.g. "#ffdd88") can be used.
Select a Color
CKEditor speaks your language
The editor user interface is fully localizable. By default it tries to use a language that matches your system configurations.
Available languages ( languages!). Try "arabic" or
"hebrew" to check RTL support:
Note: If your system doesn't support the selected language, you may see strange characters or squares.
Toolbar configuration
The following is the standard editor configuration provided with the standard option in the download page.
Simple Toolbar
Standard Toolbar
Full Toolbar
Move the toolbar to the bottom
It is plain easy to have the editor toolbar moved to the bottom of the UI.
Contents in a DIV
It is possible to have the editing area of CKEditor use a <div> element (by default it is an <br>). In this way the contents will inherit the CSS styles used in the page containing the editor.
In the following sample, note that fonts and colors match the styles of this website.
The best on Accessibility
CKEditor offers the best accessibility features available on browser based editors. It introduced several innovations that are now becoming market standards, in respect with the WAI-ARIA and Section 508 requirements.
Try out the following keyboard features inside the editor:
- ALT+0: Shows the accessibility help, which is available for users with screen-readers to learn how to use the editor.
- ALT+F10: Moves the keyboard focus to the toolbar. When in the toolbar:
- ARROW-RIGHT and ARROW-LEFT: Move inside a toolbar group.
- TAB: Move to the next toolbar group. With SHIFT, moves back.
- ENTER or SPACE: Activate the selected item.
- ESC: Return to the editing area.
- ALT+F11: Moves the keyboard focus to the elements path. The navigation on it is similar to the above described to the toolbar.
Dialogs provide similar keyboard navigation features.
ENTER key, the way you want it
By default, CKEditor produces high quality contents, with emphasis on correct semantics. Because of this, the paragraph tag (<p>) is properly used to hold blocks of text.
It is still possible to configure the editor to produce <br> or <div> on ENTER. This is not a recommendation (let's make the web good!), but still it may be required on some contests.
Produce <p> on ENTER
Produce <br> on ENTER
Produce <div> on ENTER
Read-only: Put the editor on hold
It is possible to put CKEditor in a read-only state, where editing is not enabled but still some features are available.
Click the following button to toggle the read-only state.
The editor is read-only
TAB key navigation through CKEditor
CKEditor participates on the page TAB order and behavior just like any other for field.
Hit TAB and SHIFT+TAB in the following form to try it out.
Field before:
Field after:
CKEditor also supports defining its order in the TAB navigation though the tabIndex configuration.
Producing XHTML 1.1 Compliant Output
This example shows CKEditor configured to output valid XHTML 1.1 code. Deprecated elements (<font>, <u>) or attributes (size, face) will be replaced with XHTML compliant code.
Contents that work on Flash
In this example CKEditor is configured to produce HTML that works well when loaded inside Flash.
Full Page Editing
This sample shows how to configure CKEditor to edit entire HTML pages, from the <html>
tag to the </html>
tag.
Check the Source button.
BBCode Plugin Demo
This is an example of a custom data processor for CKEditor, which produces BBCode instead of HTML. Note that the editor here accepts BBCode not only on output but also on input.
Data Processing is a powerful feature of CKEditor. By creating plugins, it is possible to make CKEditor handle different data formats transparently, like BBCode, Wiki format, Markdown, etc.
Check the Source button for the BBCode produced by the editor.
It's easy to resize tables
The following is the standard editor configuration provided with the standard option in the download page.
The Magic Line
This example is focused on demonstrating the Magic Line feature.
In some contexts, it is very difficult to position the caret for typing on specific places, like the start of the document when it starts with a table, or between a table and a rule.
Move the mouse on some of this hard to focus places and see the magic-line appearing. Then, just click on its button.
Make it grow
This sample shows CKEditor with the AutoGrow plugin that lets the editor expand and shrink depending on the amount and size of content entered in the editing area.
In its default implementation the AutoGrow feature can expand the CKEditor window infinitely in order to avoid introducing scrollbars to the editing area:
It is also possible to set a maximum height for the editor window. Once the CKEditor editing area reaches that height, scrollbars will be available and the editor window will no longer expand: