Sulu如何使用CKEditor創(chuàng)建簡(jiǎn)潔的多語言網(wǎng)站用戶界面

“我們能夠?qū)庉嬈鬟M(jìn)行定制，使其與我們的外觀和感覺相匹配，并且不會(huì)讓人覺得是添加到我們系統(tǒng)中的一個(gè)外來組件。”

Alexander Schranz            Sulu開發(fā)人員

成果

-多語言、基于塊的內(nèi)容編輯器
-簡(jiǎn)潔、有品牌特色的用戶界面
-最少的開發(fā)工作
-新功能的平滑集成
-具有原生 React支持的可定制所見即所得編輯器
-可擴(kuò)展的平臺(tái)

挑戰(zhàn)

為多語言網(wǎng)站創(chuàng)建一個(gè)靈活的內(nèi)容管理系統(tǒng)

創(chuàng)建一個(gè)支持多種不同語言的網(wǎng)站并非易事，這就是為什么Sulu背后的團(tuán)隊(duì)決定構(gòu)建一個(gè)開源的內(nèi)容管理系統(tǒng)，以完美地勝任這項(xiàng)工作。Sulu內(nèi)容管理系統(tǒng)具有先進(jìn)的本地化功能，包括跨多種語言的單一一致的頁面樹，并支持無限數(shù)量的本地化。

為了處理由此帶來的額外復(fù)雜性，Sulu采用基于塊的內(nèi)容結(jié)構(gòu)，以便不同的文本部分可以根據(jù)本地化要求進(jìn)行不同的管理。這意味著文本輸入以及添加包括表格在內(nèi)的富文本的能力對(duì)于 Sulu內(nèi)容管理系統(tǒng)的結(jié)構(gòu)至關(guān)重要。

Sulu 需要一個(gè)具有以下特點(diǎn)的富文本編輯器：

• 完全控制集成
• 原生React支持
• 可定制的外觀和感覺
• 高級(jí)富文本編輯功能

“我們也考慮了其他基于React的編輯器，但它們?nèi)鄙僖恍〤KEditor所擁有的功能。”

解決方案

Sulu的開發(fā)人員Alexander Schranz表示，在確定使用CKEditor 5之前，團(tuán)隊(duì)嘗試了許多富文本編輯器：“當(dāng)我們重寫我們的內(nèi)容管理系統(tǒng)時(shí)，我們轉(zhuǎn)而使用 React，并對(duì)不同的編輯器進(jìn)行測(cè)試以匹配我們的用例。我們需要基本的樣式以及表格相關(guān)的功能，以便最大程度地滿足我們用戶的需求，所以在對(duì)各種編輯器進(jìn)行測(cè)試后，我們選擇了CKEditor 5。”

Sulu團(tuán)隊(duì)很快發(fā)現(xiàn)CKEditor擁有他們所需的所有功能，重要的是，CKEditor能夠定制編輯器用戶界面以適應(yīng)他們平臺(tái)。不僅如此，CKEditor的模塊化、基于插件的架構(gòu)意味著Sulu的開發(fā)人員可以禁用或刪除他們不需要的任何編輯器功能。開源項(xiàng)目與CKEditor的默認(rèn)GPL2 + 許可證不兼容，所以CKSource允許該團(tuán)隊(duì)將 CKEditor5集成到Sulu中。

我們提供什么

- 具有模塊化功能集的可定制所見即所得編輯器

- 表格

- Sulu集成

結(jié)果

用任何語言進(jìn)行簡(jiǎn)潔、輕松的內(nèi)容編輯

總體而言，Alexander表示團(tuán)隊(duì)對(duì)CKEditor印象非常深刻。“我們能夠?qū)庉嬈鬟M(jìn)行定制，使其與我們的外觀和感覺相匹配，并且不會(huì)讓人覺得是添加到我們系統(tǒng)中的一個(gè)外來組件。” 他說道。

將CKEditor集成到Sulu中為團(tuán)隊(duì)省去了無數(shù)開發(fā)上的麻煩，并使他們能夠騰出時(shí)間致力于產(chǎn)品的其他方面。最重要的是，當(dāng)Sulu用戶要求新的內(nèi)容編輯功能時(shí)，團(tuán)隊(duì)只需激活一個(gè)插件即可添加這些功能。Alexander表示，他們計(jì)劃在未來使Sulu更具可擴(kuò)展性，而他們定制的CKEditor集成一定會(huì)處于內(nèi)容管理系統(tǒng)的核心位置。