The Classic editor offers a toolbar with an editing area placed in a specific position on the page. The toolbar stays visible when you scroll down the page, and the editor grows automatically with the content.
- This demo contains just a small subset of available CKEditor features. You are free to add more features to CKEditor regardless what editor type/toolbar you choose.
- If you wish to build your custom UI, check out our Headless editor demo and documentation.
Check the source code for this demo
BeBold
The Document editor provides a similar editing experience to some native word processors such as Microsoft Word, with the UI that resembles a paper document.
- This demo contains just a small subset of available CKEditor features. You are free to add more features to CKEditor regardless what editor type/toolbar you choose.
- If you wish to build your custom UI, check out our Headless editor demo and documentation.
Check the source code for this demo
BeBold
The Balloon editor comes with a floating toolbar that appears in a balloon once you select part of the content you want to edit. Balloon editor allows you to edit content in its real location on the web page instead of doing it in a separate administration section.
- This demo contains just a small subset of available CKEditor features. You are free to add more features to CKEditor regardless what editor type/toolbar you choose.
- If you wish to build your custom UI, check out our Headless editor demo and documentation.
Check the source code for this demo
BeBold
The Balloon Block editor offers the balloon editor with an extra block toolbar which can be accessed using the button attached to the editable content area and following the selection in the document. The toolbar gives access to additional block–level editing features.
- This demo contains just a small subset of available CKEditor features. You are free to add more features to CKEditor regardless what editor type/toolbar you choose.
- If you wish to build your custom UI, check out our Headless editor demo and documentation.
Check the source code for this demo
BeBold
The Inline editor comes with a floating toolbar that becomes visible when the editor is focused (e.g. with a click of your mouse). Inline editor allows you to edit content in its real location on the web page instead of doing it in a separate administration section.
- This demo contains just a small subset of available CKEditor features. You are free to add more features to CKEditor regardless what editor type/toolbar you choose.
- If you wish to build your custom UI, check out our Headless editor demo and documentation.
Check the source code for this demo
BeBold
The Bottom configuration moves the main toolbar to the bottom of the editing window. This is often applied in email applications, (forum) post editors, chats, or instant messaging, where text creation comes first and formatting is applied occasionally.
- This demo contains just a small subset of available CKEditor features. You are free to add more features to CKEditor regardless what editor type/toolbar you choose.
- If you wish to build your custom UI, check out our Headless editor demo and documentation.
Check the source code for this demo
The Button Grouping option unclutters the main toolbar by merging buttons into expandable groups. This way you can keep the toolbar concise and well-organized, deciding which buttons should be grouped together.
- This demo contains just a small subset of available CKEditor features. You are free to add more features to CKEditor regardless what editor type/toolbar you choose.
- If you wish to build your custom UI, check out our Headless editor demo and documentation.
Check the source code for this demo
Trusted and approved by