Feature-rich editor
Tailor your Rich Text toolkit from 300+ CKEditor features
This demo showcases many of CKEditor’s features, alongside a selection of premium addons: CKBox, Export to PDF/Word, Import from Word, and WProofreader.
Discover the riches of our editor ✨
Read on to better understand the functionalities you can test with this demo.
💡 Did you know that…
- CKEditor is customizable. You can fine-tune the set of enabled plugins, available toolbar buttons, and the behavior of features.
-
The editor supports @mentions. Start typing
@An
to see available suggestions. -
You can also insert dynamic placeholders within the content using
merge fields! Start typing
{{
or use thebutton to insert them. Use the
button to preview values. {{mergeFieldExample}}
- You can paste content from Word or Google Docs, retaining the original document structure and formatting.
-
Thanks to Import from Word
, you can convert a DOCX document into HTML and edit it in CKEditor 5.
-
You can
export your document
to PDF
or Word
with a single click.
-
This demo showcases
CKBox
to manage images and other files. You can enable your own upload adapter instead.
🚀 Autoformatting in CKEditor 5
Some features of CKEditor 5 might be hard to spot at first glance. Thanks to autoformatting, you can use handy shortcuts in the editor to format the text on the fly:
Block formatting | Bulleted list |
Start a line with
*
or
-
followed by a space.
|
Numbered list |
Start a line with
1.
or
1)
followed by a space.
|
|
To-do list |
Start a line with
[ ]
or
[x]
followed by a space to insert an unchecked or checked list
item.
|
|
Headings |
Start a line with
# , ## , or
###
followed by a space to create a heading 1, heading 2, or
heading 3.
|
|
Block quote |
Start a line with
>
followed by a space.
|
|
Code block |
Start a line with
``` .
|
|
Horizontal line |
Start a line with
--- .
|
|
Inline formatting | Bold |
Type
**
or
__
around your text.
|
Italic |
Type
*
or
_
around your text.
|
|
Code
|
Type
`
around your text.
|
|
|
Type
~~
around your text.
|
Discover the riches of our editor ✨
Read on to better understand the functionalities you can test with this demo.
💡 Did you know that…
- CKEditor is customizable. You can fine-tune the set of enabled plugins, available toolbar buttons, and the behavior of features.
- The editor supports @mentions. Start typing
@An
to see available suggestions. - You can also insert dynamic placeholders within the content using merge fields! Start typing
{{
or use thebutton to insert them. Use the
button to preview values. {{Merge Field Example}}
- You can paste content from Word or Google Docs, retaining the original document structure and formatting.
- Thanks to Import from Word
, you can convert a DOCX document into HTML and edit it in CKEditor 5.
- You can export your document to PDF
or Word
with a single click.
- This demo showcases CKBox
to manage images and other files. You can enable your own upload adapter instead.
🚀 Autoformatting in CKEditor 5
Some features of CKEditor 5 might be hard to spot at first glance. Thanks to autoformatting, you can use handy shortcuts in the editor to format the text on the fly:
Block formatting | Bulleted list | Start a line with * or - followed by a space. |
Numbered list | Start a line with 1. or 1) followed by a space. | |
To-do list | Start a line with [ ] or [x] followed by a space to insert an unchecked or checked list item. | |
Headings | Start a line with # , ## , or ### followed by a space to create a heading 1, heading 2, or heading 3. | |
Block quote | Start a line with > followed by a space. | |
Code block | Start a line with ``` . | |
Horizontal line | Start a line with --- . | |
Inline formatting | Bold | Type ** or __ around your text. |
Italic | Type * or _ around your text. | |
Code | Type ` around your text. | |
Type ~~ around your text. |
While this demo highlights many features in CKEditor 5, we couldn’t show them all. For a complete list of all CKEditor 5 features, explore the full feature overview page and detailed documentation.
CKEditor can also be configured to accommodate additional HTML elements, attributes, and styles.
Check the source code for this demo.
Trusted and approved by
Can’t see what you’re looking for?
Talk to our Sales Representative to discuss your use case
and learn what more CKEditor can do for you.