Report: 2024 State of Collaborative Editing

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

Read now

You decide - customizability with CKEditor 5

A stylized graphic of different instances of CKEditor 5 with toolbar variations and a link insertion plugin.

When it comes to software applications, having everything in its right place influences how eager your users are to use the chosen software for the job, and therefore to produce output, no matter what field. For example, backlinks are absolutely essential to getting your content to rank well in Google. If your marketing team is tasked with loading up the articles they write with them, then the easier it is, the better. Elsewhere, your administrative department requires rich text capability to help keep invoices and spreadsheets from devolving into a wall of text. Can one text editor be so versatile it can accomplish anything you throw at it? Yes, and its name is CKEditor 5.

There are two manners of customization with our rich text solution. First, the online CKEditor 5 builder (which you can find here) can give you a taste of how our software can be customized. Right out of the box, we give you so many options as to what you can choose to include or leave out of your customized build, from autoformatting and image captioning to some of our more esteemed products like CKFinder and Export to Word. The second dimension of CKEditor’s customizability, however, is entirely up to you. Thanks to our rich API, your developers can use their own creativity to dream up the perfect plugin tailored to your software’s specifications.

Stylize your editor to your needs

We have had numerous clients whose needs were relatively simple. One such case was the project management platform Plutio, which aims to help freelancers keep on top of administrative tasks. Plutio’s preferences were simple; one of the highlights of his CKEditor 5 implementation was the fact that the interface could be customized so that the toolbar (which is typically top-facing) was placed to the side in order to declutter the interface. “CKEditor allows us to customise Plutio to work for our users,” Plutio founder Leo Bassam told us during a recent conversation. “We believe it is best to show our users features when they need them."

And, well, he’s right. Just because it’s cosmetically pleasing, doesn’t mean it can’t also be essential. When Bassam shared his screen with us, he showed how such a seemingly small change has, in fact, a big effect on Plutio’s user experience. See for yourself!

A screenshot of Plutio’s customization of CKEditor 5, which shows a side-facing toolbar.
A screenshot of Plutio’s customization of CKEditor 5, which shows a side-facing toolbar.

Get down to the nitty gritty

Design is essential to a good user experience, but what if you need deeper customization than that? What if you need to give even our most dependable out-of-the box features extensibility that will tailor your own software to meet your output requirements?? When Condé Nast came calling for our rich-text editor, they found that that’s exactly what we could give them with CKEditor 5.

A screenshot of CKEditor 5 in Condé Nast’s content editor, which demonstrates a customized plugin for linking.
A screenshot of CKEditor 5 in Condé Nast’s content editor, which demonstrates a customized plugin for linking.

Condé Nast owns numerous brands such as Vogue, Bon Appetit, and Pitchfork. It’s important for them to have an editor that’s both rich-text and WYSIWYG in nature, as they always need to make their content stand out. For them to do that, they need inventive ways to contextually manipulate in-text multimedia elements for optimal readability. This even extends to things like linking, where Conde Nast was able to customize CKEditor 5 to allow their users to decide whether a link will open in a new browser tab or make it “nofollow”. Condé Nast’s development team also built customizations for video embeds (where you can toggle autoplay, ads, mute, and loop playback).

Most useful of all is their editor’s ability to embed social media posts in the process of writing fresh content. Thanks to our API, Condé Nast built a plugin that allows them to drop a link from a post into the text in order to populate the area with a full visual of said post. Without even having to mouse back up toward the toolbar, their writers can bolster web content with the added benefit of being able to preview the layout in the editor.

A screenshot of a customized plugin for Condé Nast’s CKEditor 5 instance, which allows social media links to be pasted in their editor to become fully visible posts.
A screenshot of a customized plugin for Condé Nast’s CKEditor 5 instance, which allows social media links to be pasted in their editor to become fully visible posts.

Just like that. It works on all the major platforms — Facebook, Twitter, and Instagram included.

The power to not have

Sometimes wanting a customizable text editor means that you’d rather have the option of leaving some features out. That’s exactly what happened in the case of Neos, an open-source content management system and a long-time CKEditor 5 client. Neos made it explicitly clear to the CKEditor 5 team that they did not want specific features in certain parts of their editor.

A screenshot of CKEditor 5 in the Neos editor, demonstrating the lack of bold and italics in its header select options menu.
A screenshot of CKEditor 5 in the Neos editor, demonstrating the lack of bold and italics in its header select options menu.

“We made it completely customizable for the integrator to choose which plugins he needs for a particular section,” said Dmitri Pisarev in our case study of Neos. “Each section is a new instance of the editor. For example, the title section does not even have bold and italic plugins, as we wanted it this way. If you paste something there from any source, it gets automatically stripped from all the formatting. That’s really amazing.”

Sure enough, our API was able to let Neos make this very particular integration the way they saw fit. Bold and italic text-styling are typically a feature of your average toolbar, but as you can see above, they are nowhere to be found in their instance. Different industries are bound to have different needs for their interface, and that’s alright. CKEditor 5 can give anyone the customization they need.

What will it be for you?

Whether it’s having or not having, or wanting features within features, your development team can custom-build a dream WYSIWYG editor that’s powered by CKEditor 5 to enhance your company’s productivity. Get in touch today!

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Input email to subscribe to newsletter

HiddenGatedContent.

Thanks for subscribing!

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) });