{"id":72399,"date":"2025-10-02T11:39:03","date_gmt":"2025-10-02T06:09:03","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=72399"},"modified":"2025-10-13T14:46:02","modified_gmt":"2025-10-13T09:16:02","slug":"resolve-microsoft-word-list-copy-paste-issues-in-aem-rte","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/resolve-microsoft-word-list-copy-paste-issues-in-aem-rte\/","title":{"rendered":"Resolve Microsoft Word List Copy-Paste Issues in AEM RTE"},"content":{"rendered":"

Our client raised an issue stating the list conversion is not happening properly while copy-pasting the text from MS Word desktop App to RTE. When I explored, I found that the RTE component in AEM has mainly two paste modes (wordhtml<\/strong> and plaintext<\/strong>). Plain text mode scraps all the mark-up as the mode name suggests. While \u201cwordhtml\u201d 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.<\/p>\n

While going through OOTB implementation, found comment in EditToolsPlugin js stating ol & ul <\/strong>tags are not supported at the moment( current release of AEM 6.5.23 and cloud ) and hence as a fallback it creates individual <p> tags\u00a0 with dot (.) and 6 span tags\u00a0 instead of ul or ol. Hence, list is not being currently converted to <ul>, <ol><\/strong> and it is mentioned clearly in EditToolsPlugin js.<\/p>\n

\"EditToolsPlugin\"

EditToolsPlugin<\/p><\/div>\n

This leads to inconsistency as well as frustration if authors try to correct it novicely. We can see the extra spans with dots instead of ul\/li tags upon copy paste to rte from MsWord in the image below.<\/p>\n

\"copy

copy-paste to RTE<\/p><\/div>\n

So let’s delve into a solution which mitigates the discussed issue.<\/p>\n

Solution<\/h3>\n

As a part of solution we will customised the JavaScript code of OOTB plugin where we intercept the paste operation to clean the MsWord formatting and change it to html <ul>\/<ol> tags along with preserving the other tags like <b>,<i>,<u>, etc if any already applied. Also paste operation can be done either directly in RTE textfield area or via paste plugin icon and hence handling of both scenarios is discussed below.<\/p>\n

Step 1: Clientlibs Creation<\/strong><\/p>\n

Create a clientlibs to limit the scope of this custom plugin to RTE only and add it category to extra client properties of the RTE dialog as shown below.<\/p>\n

\"extra

extra clientlibs<\/p><\/div>\n

Step 2: Custom solution<\/strong><\/p>\n

Now it’s time to override (copy and paste) the OOTB edit plugin\u00a0<\/strong> from \/libs\/clientlibs\/granite\/richtext\/core\/js\/plugins\/EditToolsPlugin.js<\/strong> to our clientlibs js (edit-tools-plugin-workaround-for-paste.js)\u00a0 file created in step 1.<\/p>\n

Lets search for the afterPaste<\/strong> method and put the below line as displayed in the image.<\/p>\n

clipNode.innerHTML = convertWordListsToUL(clipNode.innerHTML);<\/code><\/p>\n

\"afterPaste\"

afterPaste<\/p><\/div>\n

Lets keep the whole lines of convertWordListsToUL<\/strong> function from this blog in the last of edit-tools-plugin-workaround-for-paste.js<\/strong> which transforms the list from MS word to <ul> \/ <ol> tags.<\/p>\n

\"ConvertWordListToUL\"

ConvertWordListToUL<\/p><\/div>\n

function convertWordListsToUL(inputHtml) {\r\nconst tempDiv = document.createElement('div');\r\ntempDiv.innerHTML = inputHtml;\r\nfunction cleanNode(node) {\r\nconst comments = [];\r\nconst walker = document.createTreeWalker(node, NodeFilter.SHOW_COMMENT, null);\r\nlet comment;\r\nwhile (comment = walker.nextNode()) {\r\ncomments.push(comment);\r\n}\r\ncomments.forEach(comment => comment.parentNode.removeChild(comment));\r\n\/\/ Remove o:p tags\r\nconst oTags = node.querySelectorAll('o\\\\:p');\r\noTags.forEach(tag => tag.parentNode.removeChild(tag));\r\nreturn node;\r\n}\r\nfunction getListLevel(style) {\r\nif (!style) return 1;\r\nconst levelMatch = style.match(\/level(\\d+)\/i);\r\nreturn levelMatch ? parseInt(levelMatch[1], 10) : 1;\r\n}\r\nfunction getListType(bulletText) {\r\nif (!bulletText) return 'ul';\r\nconst orderedPatterns = [\r\n\/^\\d+\\.$\/,\u00a0 \u00a0 \u00a0 \u00a0 \/\/ 1., 2., 3.\r\n\/^[a-z]\\.$\/i, \u00a0 \u00a0 \/\/ a., b., c.\r\n\/^[ivx]+\\.$\/i,\u00a0 \u00a0 \/\/ i., ii., iii.\r\n\/^\\(\\d+\\)$\/,\u00a0 \u00a0 \u00a0 \/\/ (1), (2)\r\n\/^\\[\\d+\\]$\/,\u00a0 \u00a0 \u00a0 \/\/ [1], [2]\r\n\/^[a-z]\\)$\/i, \u00a0 \u00a0 \/\/ a), b)\r\n\/^[ivx]+\\)$\/i,\u00a0 \u00a0 \/\/ i), ii)\r\n\/^\\d+\\)$\/ \u00a0 \u00a0 \u00a0 \u00a0 \/\/ 1), 2)\r\n];\r\nfor (const pattern of orderedPatterns) {\r\nif (pattern.test(bulletText)) {\r\nreturn 'ol';\r\n}\r\n}\r\nreturn 'ul';\r\n}\r\nconst root = document.createElement('div');\r\nconst stack = [{ level: 0, element: root }];\r\nArray.from(tempDiv.children).forEach(node => {\r\nif (node.className.includes('MsoListParagraph')) {\r\nconst style = node.getAttribute('style') || '';\r\nconst currentLevel = getListLevel(style);\r\nconst cleanedNode = cleanNode(node.cloneNode(true));\r\nlet bulletText = '';\r\nif (cleanedNode.firstElementChild) {\r\nbulletText = cleanedNode.firstElementChild.textContent.trim();\r\ncleanedNode.removeChild(cleanedNode.firstElementChild);\r\n}\r\nconst listType = getListType(bulletText);\r\n\/\/ Pop stack until we find a parent level lower than current\r\nwhile (stack.length > 1 && stack[stack.length - 1].level >= currentLevel) {\r\nstack.pop();\r\n}\r\nconst parent = stack[stack.length - 1].element;\r\nlet listContainer = null;\r\n\/\/ Check if parent already has a list of the same type\r\nif (parent.lastElementChild &&\r\nparent.lastElementChild.tagName === listType.toUpperCase() &&\r\n\/\/ Only reuse list if we're at same level as last item\r\n(stack[stack.length - 1].level < currentLevel ||\r\nstack[stack.length - 1].level === currentLevel)) {\r\nlistContainer = parent.lastElementChild;\r\n}\r\n\/\/ Check for adjacent list of different type\r\nelse if (parent.lastElementChild &&\r\n(parent.lastElementChild.tagName === 'OL' ||\r\nparent.lastElementChild.tagName === 'UL') &&\r\nparent.lastElementChild.tagName !== listType.toUpperCase()) {\r\nlistContainer = document.createElement(listType);\r\nparent.appendChild(listContainer);\r\n}\r\nelse {\r\nlistContainer = document.createElement(listType);\r\nparent.appendChild(listContainer);\r\n}\r\nconst li = document.createElement('li');\r\nli.innerHTML = cleanedNode.innerHTML;\r\nlistContainer.appendChild(li);\r\nstack.push({ level: currentLevel, element: li });\r\n} else {\r\n\/\/ Reset stack to root level for non-list items\r\nwhile (stack.length > 1) stack.pop();\r\nconst cleanedNode = cleanNode(node.cloneNode(true));\r\nif (cleanedNode.textContent.trim() !== '') {\r\nroot.appendChild(cleanedNode);\r\n}\r\n}\r\n});\r\nreturn root.innerHTML;\r\n}<\/pre>\n
Save all<\/strong> the changes to reflect it correctly.<\/p>\n
Note:<\/strong><\/span><\/em>\u00a0Please find the attached toolsplugin.js<\/a> and\u00a0 edit-tools-plugin-workaround-for-paste.js<\/a>\u00a0 js files for reference, however copy paste from the specified path in your AEM instance.<\/p>\n
Step 3: Configure \u201cwordhtml\u201d as default paste mode<\/strong><\/p>\n
\"defaultPasteMode\"
defaultPasteMode<\/p><\/div>\n
Step 4: Optionally, <\/strong>we can enable plugin in toolbar itself, by configuring\u00a0\u201cpaste as wordhtml\u201d<\/strong> plugin explicitly as well if required.<\/p>\n
Navigate to inline node of text component and enable paste plugin by adding edit#paste-wordhtml<\/strong><\/p>\n
\"PastePlugin\"
PastePlugin<\/p><\/div>\n
To do auto transform list tags to ol\/li add below code to the same file in showPasteDialog<\/strong> function as shown below<\/p>\n
const iframe = document.querySelector('iframe[name^=\"rte-paste-html\"]');\r\nif (iframe && iframe.contentWindow) {\r\n   const iframeDocument = iframe.contentWindow.document;\r\n   \/\/ Listen for the 'paste' event in the iframe's document\r\n   iframeDocument.addEventListener('paste', function() {\r\n   setTimeout(() => {\r\n      const bodyContent = iframeDocument.querySelector('body');\r\n      iframeDocument.body.innerHTML = convertWordListsToUL(bodyContent.innerHTML);\r\n      }, 100);\r\n   });\r\n}<\/pre>\n
\"pasteDialog\"
pasteDialog<\/p><\/div>\n
Results<\/h3>\n
Congratulations! It’s time to verify our effort by copy-pasting some text from MS Word App to RTE.<\/p>\n
Here we can clearly see from the image attached below, it is converted to <ol> \/ <li> with the required bold, italic, under, anchor tags if applicable.<\/p>\n
\"WordListToUL\"
WordListToUL<\/p><\/div>\n
Conclusion<\/h3>\n
It is a quick fix and provides flexibility to authors. However, if we opt for this approach don’t forget to keep an eye on the release notes while upgrading service pack or auto upgrade in case of AEM cloud and remove this file once fixed by Adobe.<\/p>\n
Hope you will be able to sail through such issues after going through this blog, feel free to customize and use if needed. Thanks!<\/p>\n","protected":false},"excerpt":{"rendered":"
Our client raised an issue stating the list conversion is not happening properly while copy-pasting the text from MS Word desktop App to RTE. When I explored, I found that 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. […]<\/p>\n","protected":false},"author":1823,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":49},"categories":[5868],"tags":[5314,4847,5008,7005,8198,7000],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/72399"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1823"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=72399"}],"version-history":[{"count":26,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/72399\/revisions"}],"predecessor-version":[{"id":76703,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/72399\/revisions\/76703"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=72399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=72399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=72399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}