CKEditor 5 is helping Sulu provide its clients with a backend for complex multilingual websites
CKEditor helps Sulu’s multilingual, block-based, backend website CMS shine
Creating complicated websites with varied language support is no easy task and there are various options for developers these days to consider. Often, it is a painstaking effort to translate websites into individual languages and separate translators have to be hired for the task and those inputting the newly translated text into new versions of the main sites.
Sulu, a startup that became its own company in 2018, decided to solve this issue with its own CMS platform. The team behind this platform is based out of west Austria; working closely with people in nearby Switzerland. Thus, it was operating in a region known for multiple languages being used all within one nation.
In order to do this, it needed a text editor for its internal operations on its CMS as it is designed by blocks, with text being integrated into each of these blocks users can work on. The company decided to use the open-source CKEditor license and it proved to be the perfect solution to its needs.
Challenge: Produce a backend CMS with multilingual support out of the box
Because of this proximity to Switzerland and how the country is composed of different language groups, it wanted to solve the problem of companies serving multiple customers in different languages. The Sulu CMS was this solution as it had advanced localization features as part of its package and core goals in mind. Some of its strengths include the freedom to localize URLs in a company’s chosen national format (URLs ending with .fr vs .de for instance), one consistent page tree across multiple languages, along with an unlimited number of localizations, dialects, and languages a developer can configure at will.
Sulu clients include mostly companies or agencies with teams of developers working on bigger websites and projects that are comfortable working with the Symfony framework and need a backend.
The way the Sulu CMS works is that it relies on blocks to be inputted and these blocks compose of different entry fields that developers can work on for the backend or management of a site. As you may have guessed, text entry and the ability to add rich text media, like tables, is paramount to the Sulu CMS.
Sulu needed to find an editor that not only was up to the task of being able to perform rich text features within its CMS blocks, but one that was also flexible and able to be expanded in the future. It also was looking to find an editor that matched the company’s UX aesthetic in the clean design of its CMS and an interface that is able to not be too cluttered with features its clients will not use.
Solution: Finding an editor that offers matching UX aesthetics and is expandable
Sulu was looking for an editor that could be easily integrated into the CMS, but would also allow for flexibility in terms of features and plugins that could be added to it over time. It also wanted to match Sulu clients' editing needs and use cases. CKEditor proved to be this editor. It also needed to fit well in the company’s clean UX approach and match the UX the CMS uses.
An example of this that Schranz gave was having links by id and without URL redirecting the users. The company also wanted an editor that can be extended or fit to a company’s needs and it did this with CKEditor by taking out the insert image function for instance and having a tailor-built for its users’ needs.
There are other React-based editors we considered, but there were some features missing like the table plugin, which CKEditor had. It was one of our requirements alongside features like bold, italic, underlined links, tables, and the possibility to extend the editor in a way we want.
Lastly, the UX proved to suit well with the company’s UX and the overall cleanliness and aesthetics 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,” said Schranz.
The challenge was solved and the editor is up to the task to meet future needs once they arise due to its flexibility and plugin system. CKEditor allows the interface Sulu chooses for its code blocks to be customized for clients' needs.
For instance, in the current version adding images is not possible nor is the plugin activated for this task as it would just clutter the interface. This makes the UX much cleaner overall and the integration of the editor seamless.
The company used CKEditor 4 since around 2013, but decided to move onto the latest version of the editor, CKEditor 5, over time as it had native integration with React.
“In the first version in 2013 of Sulu CMS, we already chose to use CKEditor 4, but when we did a rewrite of our CMS, we went to React and did tests with different editors to match our use cases,” explained Schranz. “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.”
Result: A flexible block-based solution with an editor up to the task
CKEditor 5 is giving Sulu customers more options and flexibility than the company would have with other editors not capable of being customized in such a way as CKEditor 5 is. It is allowing clients themselves to petition Sulu for additional options within the blocks as well, and CKEditor 5 is able to provide in this regard.
“The developer is free to use the blocks how they want. Sulu only requires the title and URL of a page, but how he builds the template he decides,” Schranz said. “CKEditor 5 is a content type and used within our system inside or outside blocks. Blocks can be even nested with one another, but a developer, and not the content manager, decides who builds the template.”
What he means by the term “template” is that the blocks will form the layout of how a website’s backend will be laid out. CKEditor 5 is used for a wide variety of purposes in this regard and the flexibility continues to allow Sulu customers to create more complex and interesting sites with strong backend support from Sulu.
Supplying or extending the CMS is easy and flexible, according to Schranz. In the future, he mentioned how the company plans to have configurable options without JavaScript necessary involved in the process, so Sulu can make their CMS more extendable without rebuilding the whole thing for JavaScript.
Sulu simply uses what it needs out of CKEditor 5 at a given period of time to address developer needs and will continue to expand its features while allowing its clients to request certain features or plugins that can be added specifically for them.
CKEditor (4 and later 5) was chosen out of many options the company had and tried working with due to its clean UX, how well it integrated with the Sulu CMS block system, its customization options (such as the ability to take out adding images within blocks), and the ability to handle complex tasks, like creating tables, with ease. It is also future-proof.
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.