Standard editor
The following is the standard editor configuration provided with the standard option in the download page.
Note: This demo uses CKFinder to upload and manage files.
CKEditor with lots of features enabled
The following is the standard editor configuration provided with the full option in the download page.
Note: This demo uses CKFinder to upload and manage files.
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.
Note: This demo uses CKFinder to upload and manage files.
Widgets (available in CKEditor 4.3+)
Widgets are easily customizable rich content units that can be freely reused and moved around the CKEditor WYSIWYG area without breaking any of the surrounding content. They can have independent styles and formatting from the rest of the text. They can even be given distinct user permissions.
Simple Box Template
The following demonstrates a simple widget with title and comment fields. This predefined content unit can be easily inserted, deleted, or moved around in the WYSIWYG area. See the Widget Tutorial for step-by-step instructions on how to create this structure.
Code Snippets
The editor instance below uses the Code Snippet widget that was introduced in CKEditor 4.4. It allows you to insert rich code snippets with syntax highlighting into the editor content. See the Code Snippet documentation for more information on how to install, configure, and customize this plugin to your needs.
Enhanced Image
This editor instance uses the Enhanced Image widget that allows for creating captioned images that can be centered in the editor content as well as dynamically resized with the “click and drag” feature.
Note: This demo uses CKFinder to upload and manage files.
Mathematical Formulas
The following editor instance demonstrates the Mathematical Formulas widget that can be used to insert equations using TeX into the editor content. This widget is an example of how external third-party libraries (MathJax, in this case) can be used in the CKEditor WYSIWYG area.
Note: Please note that this plugin is not compatible with Internet Explorer 8.
Note: This demo uses CKFinder to upload and manage files.
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.
Note: All demos use CKFinder to upload and manage files.
UI Color
Click on any of the available colors to customize the editor. Any hexadecimal color (e.g. "#ffdd88") can be used.
Note: This demo uses CKFinder to upload and manage files.
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.
This demo uses CKFinder to upload and manage files.
Toolbar configuration
The following is the standard editor configuration provided with the standard option in the download page.
Simple Toolbar
Standard Toolbar
Full Toolbar
Note: All demos use CKFinder to upload and manage files.
Move the toolbar to the bottom
It is plain easy to have the editor toolbar moved to the bottom of the UI.
Note: This demo uses CKFinder to upload and manage files.
Contents in a DIV
It is possible to have the editing area of CKEditor use a <div> element (by default it is an <iframe>). 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.
Note: This demo uses CKFinder to upload and manage files.
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.
Note: This demo uses CKFinder to upload and manage files.
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
Note: All demos use CKFinder to upload and manage files.
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
Note: This demo uses CKFinder to upload and manage files.
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.
Note: This demo uses CKFinder to upload and manage files.
Advanced Content Filter
This example shows Advanced Content Filter introduced in CKEditor 4.1.
Both instances of CKEditor have the same content loaded on startup. The second instance, however, has fewer features enabled, so all HTML content that is not editable with this instance (to keep things simple) is removed — for example the image and the heading.
Advanced Content Filter will also work during the paste operation. You can try copying content from the Standard instance to the Basic instance and see that the content is still filtered.
The editor with Standard configuration
The editor with Basic configuration
In this demo two additional plugins were enabled in the Basic preset in order to make source mode available: htmlwriter, sourcedialog.
Note: All demos use CKFinder to upload and manage files.
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.
Note: This demo uses CKFinder to upload and manage files.
Contents that work on Flash
In this example CKEditor is configured to produce HTML that works well when loaded inside Flash.
Note: This demo uses CKFinder to upload and manage files.
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.
Note: This demo uses CKFinder to upload and manage files.
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.
Click the Source button to see BBCode produced by the editor.
Note: This demo uses CKFinder to upload and manage files.
It's easy to resize tables
The Table Resize plugin makes it possible to modify table column width. Hover your mouse over the column border to see the cursor change to indicate that the column can be resized. Click and drag your mouse to set the desired width.
This plugin is not a part of the standard package. In order to use it you will need to add it to your custom CKEditor package built with CKBuilder.
Note: This demo uses CKFinder to upload and manage files.
The Magic Line
This example demonstrates the Magic Line feature.
In some contexts it is very difficult to position the caret for typing in specific places, like at the start of the document which begins with a table or between a table and a horizontal rule..
Hover the mouse over some of these hard to focus places and see the red Magic Line appear. Click its button to start typing.
Note: This demo uses CKFinder to upload and manage files.
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:
Note: All demos use CKFinder to upload and manage files.
Enterprise Solutions
CKSource custom solutions are designed for large projects requiring additional non-standard options. Receive end-to-end project care related to CKEditor Premium and CKFinder.
Learn more