- Issue created by @markfien
- πΊπΈUnited States flashwebcenter Austin TX
Hello Mark,
I tested the word document and I see the some extra html tags and some missing styles.
To remove all extra tags and clean up the html, I found CKEditor 5 Paste Filter β module. I enabled it and I updated the default settings as the screenshot. I unchecked only one.
To style the content as the word document I added the below css to the theme. You can add it to the sub-theme.
.field--type-text p, .field--type-text-long p, .field--type-text-with-summary p { margin: 16px 0 0 0; } .field--type-text ol, .field--type-text ul, .field--type-text-long ol, .field--type-text-long ul, .field--type-text-with-summary ol, .field--type-text-with-summary ul { padding-left: 50px; margin: 0; } .field--type-text li:before, .field--type-text-long li:before, .field--type-text-with-summary li:before { content: ""; display: inline-block; width: 16px; }
With the ckeditor 5 module and some css you can have good results.
This is the final look I have on the website:
Here is the html:
<h2>Test of Word cut/paste (heading 2)</h2><p>Content from Word should be converted properly and these two paragraphs use shift-enter for the spacing which should be one line<br><br>This second paragraph should only be one line below the first and uses a paragraph break for the next section.</p><p>This third section is separated by 2 paragraph breaks.</p><p>This is a bullet list:</p><ul style="list-style-type:disc;" class="ul-0"><li style="mso-list:l0 level1 lfo1;" class="li-0">Item 1</li><li style="mso-list:l0 level1 lfo1;" class="li-0">Item 2<br>more about item 2</li><li style="mso-list:l0 level1 lfo1;" class="li-0">Item 3</li></ul><p>End of bullet list.</p><p>This is a numbered list:</p><ol><li style="mso-list:l1 level1 lfo2;">Item 1</li><li style="mso-list:l1 level1 lfo2;">Item 2<br>more about Item 2</li><li style="mso-list:l1 level1 lfo2;">Item 3</li></ol><p>End of numbered list</p><p>This is an alphabetic list:</p><ol style="list-style-type:lower-alpha;"><li style="mso-list:l2 level1 lfo3;">Item a</li><li style="mso-list:l2 level1 lfo3;">Item b<br>more about item b</li><li style="mso-list:l2 level1 lfo3;">Item c</li></ol><p>End of alphabetic list</p><p>This is the end of the test document.</p>
Best wishes,
Alaa - πΊπΈUnited States markfien
Aala,
Thank you for the detailed information. I have made the identical changes (I had paste filter turned off .. duh) and turned off the style in paste filter. I am still getting the text-indent:-.25in; when pasting and not getting the result you show so all lists are not formatted correctly. I added your style content to our sub-theme css file.
When pasting from Word, source in CKEditor 5 shows:
<ul style="list-style-type:disc;"> <li style="mso-list:l0 level1 lfo1;text-indent:-.25in;"> Item 1 </li> <li style="mso-list:l0 level1 lfo1;text-indent:-.25in;"> Item 2 <br> more about item 2 </li> <li style="mso-list:l0 level1 lfo1;text-indent:-.25in;"> Item 3 </li> </ul> <p> End of bullet list. </p> <p> This is a numbered list: </p> <ol> <li style="mso-list:l1 level1 lfo2;text-indent:-.25in;"> Item 1 </li> <li style="mso-list:l1 level1 lfo2;text-indent:-.25in;"> Item 2 <br> more about Item 2 </li>
Any insight you can provide is much appreciated. Thank you.
- πΊπΈUnited States flashwebcenter Austin TX
Hello,
The results you had is expected. The style property was unchecked, so any style will be copied from MS.
The workaround for this issue is to override the style don't want in the sub-theme.
Example:.field--type-text li, .field--type-text-long li, .field--type-text-with-summary li { text-indent: 0!Important; }
Or in the module configuration check the style properties to be on. I only unchecked it for the alphabetic list, so you will not copy any style from MS.
Best wishes,
Alaa - Status changed to Closed: outdated
about 1 year ago 9:29pm 4 October 2023