Report: 2024 State of Collaborative Editing

Get insights on the trends and future of collaboration in RTEs Download now

Read now

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.

Loading...

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 the Insert merge field button to insert them. Use the Preview merge field 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 Import from Word, you can convert a DOCX document into HTML and edit it in CKEditor 5.
  • You can export your document to PDF Export to PDF or Word Export to Word with a single click.
  • This demo showcases CKBox Browse files 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.
Strikethrough Type ~~ around your text.

 

Note
  • 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.

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

Form content fields

Form submit

HiddenGatedContent.
Hidden unused field.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });