How Sulu created a clean multilingual website UI with CKEditor

How Sulu created a clean multilingual website UI 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.”

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 allowed the team to integrate CKEditor 5 into Sulu.

What we provided

-Customizable WYSIWYG editor with modular feature set

-Tables

-Sulu integration

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.