The Classic editor offers a toolbar with an editing area placed in a specific position on the page. The toolbar remains visible as you scroll down the page, while the editor expands to fit your content.
BeBold
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 Document editor offers a familiar editing experience akin to native word processors like Microsoft Word, featuring a user interface reminiscent of a traditional paper document.
BeBold
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 Balloon editor includes a floating toolbar that pops up when you select content for editing. It lets you edit content right where it appears on the webpage, without the hassle of navigating to a separate administration section.
BeBold
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 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.
BeBold
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 Inline editor comes with a floating toolbar that becomes visible when the editor is focused (e.g. with a click of your mouse). It lets you edit content right where it appears on the webpage, without the hassle of navigating to a separate administration section.
BeBold
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 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