Increased WYSIWYG consistency in Liferay DXP

Company Blogs April 17, 2020 By Mateo Mustapić Staff

We are pleased to announce that the epic on the reduction of WYSIWYG variability is finished. We followed the strategy mentioned in the Rich Content Editor strategy in DXP for consolidating all our UX for writing Rich Text Content around CKEditor 4 by reducing variability in WYSIWYG Writing Experience

We analyzed each content-creation scenario to provide the best possible content-creation UX out of the box in Liferay DXP 7.3. After this analysis we developed a strategy to remove all editor variability (AlloyEditor, TinyMce and SimpleEditor) and configurability of WYSIWYG Editors in Liferay DXP 7.3. 

Challenges we were facing

Providing universal satisfactory experience while:

  • - Different WYSIWYG editors provide different experiences and functionalities 

  • - Some use cases required simpler approach than CKEditor (input field)

  • <liferay-ui:input-editor> ===> <liferay-editor:editor>

  • - Some cases needed modification of attributes

Removing all unused editors support (TinyMCE, SimpleEditor)

The process we followed

  • - Accurate analysis and listing all the existing editor taglib usages (exactly 51 usages)

  • - Accurate analysis and listing all the existing deprecated <liferay-ui:input-editor> usages (exactly 25 usages)

  • - Accurate analysis and listing of which editors should be replaced by input field

  • - We updated the code in order to replace the taglibs above with appropriate replacement and sent it for review to responsible teams

  • - We documented the WYSIWYG editors architecture in liferay-frontend-guidelines repo

What was done in the end?

In the end of this process we have CKEditor 4 in all places in Liferay DXP 7.3. except Blogs and PageEditor. All other editor usages are successfully replaced. We created a document on liferay-frontend-guidelines repo for guidelines on editor usage in Liferay DXP. We hope that these changes will improve Rich Text Content writing experience in the future!

Showing 1 result.