Sulu

How Sulu created a clean multilingual website UI with CKEditor

View all case studies

All information is correct as of the original time of publishing.

Company

Sulu

Industry

Software development

Location

Dornbirn, Austria (Global)

Alexander Schranz

We were able to customize the editor, so it matched our look and feel and does not feel like a foreign component added into our system.

Alexander Schranz

Developer, Sulu

Outcomes

Multilingual, block-based content editor

Clean, branded UI

Minimal development work

Smooth integration of new features

Customizable WYSIWYG with native React support

Scalable platform

The challenge

Creating a flexible CMS for multilingual websites

Creating a website that supports multiple different languages is no easy task, which is why the team behind Sulu decided to build an open source CMS that would perfectly suit the job. The Sulu CMS has advanced localization features, including a single consistent page tree across multiple languages, and support for an infinite number of localizations.

To handle the added complexity this brings, Sulu uses a block-based content structure, so that different sections of text can be managed differently according to localization requirements. That means text entry and the ability to add rich text, including tables, is paramount to the structure of the Sulu CMS.

Sulu needed a rich text editor with:

  • Full control over integration
  • Native React support
  • Customizable look and feel
  • Advanced rich text editing features
There are other React-based editors we considered, but there were some features missing, which CKEditor had.

The solution

A fully customizable rich text editor

Alexander Schranz, one of Sulu’s developers, says the team experimented with a number of rich text editors before settling on CKEditor 5: “When we did a rewrite of our CMS, we switched to using React, and did tests with different editors to match our use cases. We needed basic stylings and things for tables to be optimal for our user needs, so then we came to CKEditor 5 after doing tests of various editors.”

The Sulu team quickly found that CKEditor had all the features they needed, plus the vital ability to customize the editor UI to suit their platform. Not only that, CKEditor’s modular, plugin-based architecture meant Sulu’s developers could disable or remove any editor features they didn’t need. The open source project wasn’t compatible with CKEditor's default GPL2+ license, so CKSource granted Sulu a Free for Open Source (FfOS) Commercial License to allow the team to integrate CKEditor 5 into Sulu.

What we provided

Customizable WYSIWYG editor with modular feature set

Tables

Commercial License (FfOS)

The result

Clean, simple content editing in any language

Overall, Alexander says the team is very impressed with CKEditor. “We were able to customize the editor, so it matched our look and feel and does not feel like a foreign component added into our system,” he says.

Integrating CKEditor into Sulu saved the team from countless development headaches and freed them up to work on other aspects of the product. Best of all, when Sulu users request new content editing features, the team can simply add them by activating a plugin. Alexander says they plan to make Sulu even more extensible in the future, with their customized CKEditor integration firmly at the center of the CMS.

We were able to customize the editor, so it matched our look and feel and does not feel like a foreign component added into our system.

Share

Find out what CKEditor can do for you

Trusted and approved by

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

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.

piAId = '1019062'; piCId = '3317'; piHostname = 'info.ckeditor.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(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) });