Resolve Microsoft Word List Copy-Paste Issues in AEM RTE

[#1]

Resolve Microsoft Word List Copy-Paste Issues in AEM RTE

  by @MukeshYadav_ 

Overview

The RTE component in AEM has mainly two paste modes (wordhtml and plaintext). Plain text mode scraps all the mark-up as the mode name suggests. While “wordhtml” keeps the markups and works well for most of the tags. But when authors copy any list (ordered / unordered) from Microsoft Word document ( Desktop application ) and try to paste in RTE directly, it doesn’t paste it well. It creates individual <p> tags  with dot (.) and 6 span tags  instead of ul or ol as shown below.

Solution:

To resolve this, the JavaScript of the OOTB EditToolsPlugin was customized -:

1. Create a custom clientlibs for the RTE, applying it specifically to the RTE component.

2. Override the EditToolsPlugin.js to intercept the paste operation, clean MS Word formatting, and convert the list to proper <ul> or <ol> tags while preserving other styles (bold, italics, etc.).

3. Configure default paste mode as "wordhtml" for consistent handling of Word content.

4. Optional toolbar customization to enable the "paste as wordhtml" option

Note: Please find the attached ootb toolsplugin.js and edited  edit-tools-plugin-workaround-for-paste.js  js files for reference, however copy paste from your AEM instance.

Full Article

Read the full article on https://www.tothenew.com/blog/resolve-microsoft-word-list-copy-paste-issues-in-aem-rte/ to find out more, including the complete script and step-by-step implementation guide.

Q&A

Please use this thread to ask questions relating to this article