This demo showcases many of CKEditor’s features, alongside a selection of premium addons: CKBox, Export to PDF/Word, Import from Word, and WProofreader.
BeBold
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 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.
🖼️ Inserting Images and Image Editing
Inserting and editing images is seamless and efficient, thanks to the powerful capabilities and the intuitive interface of the CKBox integration. Click the CKBox icon to manage or edit images and other files in this demo.
Effortless Image Insertion:
- Drag and Drop: Simply drag images from your device or directly from web sources into the editor.
- URL Uploading: Paste image URLs for quick embedding without leaving the editor.
Advanced Image Editing:
- Editing: Resize, crop, and rotate directly from the editor, ensuring perfect placement every time.
- Customizable Styles: Apply various presets to format your image according to social media standards.
🚀 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