Level 2

Solved

RTE source edit styling

Forum|Forum|10 months ago
March 26, 2025
2 replies
539 views

Greetings community,

I have a problem with my RTE. I have the misc tool source edit plugin set up. But lists are not rendered correctly in the Rich text edit mode.
see the two enclosed pictures:

Here on this last picture, I can't see the bullet points of my list. This happens also on numbered lists, and I also have an issue related to intented blocks in a list, they are rendered as multiple columns weirdly.

The configuration of my rte seems correct.

Finally, when I click on Done in the dialog, I have an error in my console:

HTML tags must be properly nested and closed: <div class="richtexteditor">



    
    
        
    




    
    <div class="richtext " data-ext-icon="<svg viewBox=&quot;0 0 79 79&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;icon--decorative&quot; role=&quot;presentation&quot;>
    <title>An icon of a outbound link arrow</title>
    <path class=&quot;icon-stroke&quot; d=&quot;M75.3037 3.98207L3 75.5935M75.3037 3.98207L76.0435 43.3021M75.3037 3.98207L35.951 3.59351&quot; stroke=&quot;#F22F46&quot; stroke-width=&quot;5.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/>
</svg>
">
        <ul><li>First item</li><li>Second item</li></ul>

    </div>



<cq data-path="/content/twilio-com/global/language-masters/en/test/test/stef-test-rte/jcr:content/root/global-main/layout_container/column-0/richtexteditor" data-config="{&quot;path&quot;:&quot;/content/twilio-com/global/language-masters/en/test/test/stef-test-rte/jcr:content/root/global-main/layout_container/column-0/richtexteditor&quot;,&quot;slingPath&quot;:&quot;/content/twilio-com/global/language-masters/en/test/test/stef-test-rte/jcr:content/root/global-main/layout_container/column-0/richtexteditor.html&quot;,&quot;dialog&quot;:&quot;/apps/twilio-foundation/components/content/richtexteditor/cq:dialog&quot;,&quot;dialogLoadingMode&quot;:&quot;auto&quot;,&quot;dialogLayout&quot;:&quot;auto&quot;,&quot;dialogSrc&quot;:&quot;/mnt/override/apps/twilio-foundation/components/content/richtexteditor/_cq_dialog.html/content/twilio-com/global/language-masters/en/test/test/stef-test-rte/jcr:content/root/global-main/layout_container/column-0/richtexteditor&quot;,&quot;designDialog&quot;:&quot;/apps/twilio-foundation/components/content/richtexteditor/cq:design_dialog&quot;,&quot;designDialogLayout&quot;:&quot;fullscreen&quot;,&quot;designDialogLoadingMode&quot;:&quot;auto&quot;,&quot;designDialogSrc&quot;:&quot;/mnt/override/apps/twilio-foundation/components/content/richtexteditor/_cq_design_dialog.policydesign.editabletemplate.html/conf/twilio-com/settings/wcm/policies/twilio-com/components/content/richtexteditor/policy_1658225818497?dialog=%2Fapps%2Ftwilio-foundation%2Fcomponents%2Fcontent%2Frichtexteditor%2Fcq%3Adesign_dialog&amp;referrer=%2Fcontent%2Ftwilio-com%2Fglobal%2Flanguage-masters%2Fen%2Ftest%2Ftest%2Fstef-test-rte&amp;policyContentPath=%2Fcontent%2Ftwilio-com%2Fglobal%2Flanguage-masters%2Fen%2Ftest%2Ftest%2Fstef-test-rte%2Fjcr%3Acontent%2Froot%2Fglobal-main%2Flayout_container%2Fcolumn-0%2Frichtexteditor&amp;policyContentResourceType=twilio-com%2Fcomponents%2Fcontent%2Frichtexteditor&amp;policyDirectoryPath=%2Fconf%2Ftwilio-com%2Fsettings%2Fwcm%2Fpolicies%2Ftwilio-com%2Fcomponents%2Fcontent%2Frichtexteditor%2F&amp;policyMappingPath=%2Fconf%2Ftwilio-com%2Fsettings%2Fwcm%2Ftemplates%2Fbase-page%2Fpolicies%2Fjcr%3Acontent%2Froot%2Fglobal-main%2Ftwilio-com%2Fcomponents%2Fcontent%2Frichtexteditor&amp;policyMappingResourceType=wcm%2Fcore%2Fcomponents%2Fpolicies%2Fmapping&amp;policyName=policy_1658225818497&amp;policyRelativePath=twilio-com%2Fcomponents%2Fcontent%2Frichtexteditor%2Fpolicy_1658225818497&amp;resourceType=wcm%2Fcore%2Fcomponents%2Fpolicy%2Fpolicy&quot;,&quot;designDialogClassic&quot;:&quot;/apps/twilio-foundation/components/content/richtexteditor/cq:design_dialog&quot;,&quot;hasPolicyMapping&quot;:true,&quot;type&quot;:&quot;twilio-com/components/content/richtexteditor&quot;,&quot;isResponsiveGrid&quot;:false,&quot;policyPath&quot;:&quot;root/global-main/twilio-com/components/content/richtexteditor&quot;,&quot;csp&quot;:&quot;base-page|page|basicpage/root|column-container/column-container/layout-container/layout-column/richtexteditor&quot;,&quot;editConfig&quot;:{&quot;inplaceEditingConfig&quot;:{&quot;active&quot;:true,&quot;editorType&quot;:&quot;text&quot;,&quot;configPath&quot;:&quot;/apps/twilio-foundation/components/content/richtexteditor/cq:editConfig/cq:inplaceEditing/inplaceEditingConfig&quot;}},&quot;ipeConfig&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;rtePlugins&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;color-picker&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;edit&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;paste-plaintext&quot;},&quot;experience-aem-fonts&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;findreplace&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;format&quot;:{&quot;features&quot;:&quot;bold,italic,underline&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;},&quot;image&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;justify&quot;:{&quot;features&quot;:&quot;*&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;},&quot;links&quot;:{&quot;features&quot;:&quot;modifylink,unlink,anchor&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;},&quot;lists&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;misctools&quot;:{&quot;features&quot;:&quot;sourceedit,specialchars&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;specialCharsConfig&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;chars&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;item0&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;copy;&quot;,&quot;name&quot;:&quot;copyright&quot;},&quot;item1&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;reg;&quot;,&quot;name&quot;:&quot;registered&quot;},&quot;item2&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;trade;&quot;,&quot;name&quot;:&quot;trademark&quot;},&quot;section&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;#167;&quot;},&quot;dagger&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;#134;&quot;},&quot;double_dagger&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;#135;&quot;}}}},&quot;paraformat&quot;:{&quot;features&quot;:&quot;*&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;formats&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;item0&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Paragraph&quot;,&quot;tag&quot;:&quot;p&quot;},&quot;item1&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 2&quot;,&quot;tag&quot;:&quot;h2&quot;},&quot;item2&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 3&quot;,&quot;tag&quot;:&quot;h3&quot;},&quot;item3&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 4&quot;,&quot;tag&quot;:&quot;h4&quot;},&quot;item4&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 5&quot;,&quot;tag&quot;:&quot;h5&quot;},&quot;item5&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 6&quot;,&quot;tag&quot;:&quot;h6&quot;}}},&quot;spellcheck&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;styles&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;,&quot;styles&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;copy1&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Paragraph SM&quot;,&quot;cssName&quot;:&quot;copy-small&quot;},&quot;copy2&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Paragraph MD&quot;,&quot;cssName&quot;:&quot;copy-medium&quot;},&quot;copy3&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Paragraph LG&quot;,&quot;cssName&quot;:&quot;copy-large&quot;},&quot;copy4&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Paragraph XL&quot;,&quot;cssName&quot;:&quot;copy-extra-large&quot;},&quot;other1&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Supertext&quot;,&quot;cssName&quot;:&quot;title-super-text&quot;},&quot;other2&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Code Snippet&quot;,&quot;cssName&quot;:&quot;code-markup&quot;}}},&quot;subsuperscript&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;table&quot;:{&quot;features&quot;:&quot;-&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;hiddenHeaderConfig&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;hiddenHeaderClassName&quot;:&quot;cq-wcm-foundation-aria-visuallyhidden&quot;}},&quot;tracklinks&quot;:{&quot;features&quot;:&quot;*&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;},&quot;undo&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;video-selector&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;}},&quot;uiSettings&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;cui&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;inline&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;toolbar&quot;:[&quot;#format&quot;,&quot;#justify&quot;,&quot;#lists&quot;,&quot;links#modifylink&quot;,&quot;links#unlink&quot;,&quot;#paraformat&quot;,&quot;fullscreen#start&quot;,&quot;control#close&quot;,&quot;control#save&quot;],&quot;popovers&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;format&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;ref&quot;:&quot;format&quot;,&quot;items&quot;:[&quot;format#bold&quot;,&quot;format#italic&quot;,&quot;format#underline&quot;]},&quot;justify&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;ref&quot;:&quot;justify&quot;,&quot;items&quot;:[&quot;justify#justifyleft&quot;,&quot;justify#justifycenter&quot;,&quot;justify#justifyright&quot;,&quot;justify#justifyjustify&quot;]},&quot;lists&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;ref&quot;:&quot;lists&quot;,&quot;items&quot;:[&quot;lists#unordered&quot;,&quot;lists#ordered&quot;,&quot;lists#outdent&quot;,&quot;lists#indent&quot;]},&quot;paraformat&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;ref&quot;:&quot;paraformat&quot;,&quot;items&quot;:&quot;paraformat:getFormats:paraformat-pulldown&quot;}}}}}}}"></cq>
</div>
<anonymous code>:1:145535
    overrideMethod <anonymous code>:1
    jQuery 5
    updateDom http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.lc-a644ad0e34c6aa69abf3f76af13fcc32-lc.min.js:944
    updateDom http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.lc-a644ad0e34c6aa69abf3f76af13fcc32-lc.min.js:944
    _postExecuteHTML http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.lc-a644ad0e34c6aa69abf3f76af13fcc32-lc.min.js:715
    postExecuteRequestFunction http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.lc-a644ad0e34c6aa69abf3f76af13fcc32-lc.min.js:319
    jQuery 5

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by MukeshYadav_

Hi @stephanepo1 ,
It might be due to double quotes within the SVG attributes which interfere with the outer HTML attributes.
So in the overlayed Text component instead of keeping svg at data-ext-icon attribute, you can try extra div with display none.

An get svg using innerHtml (js) or using html() method of jquery in js like below

<div class="richtext" >
<div id="data-ext-icon" style="display:none">
//here put svg hardcoded or received with model
</div>

</div>


<!--IN Jquery-->
let svgData = $('#data-ext-icon').html()


<!--IN JS-->
let svgData = document.getElementById('data-ext-icon').innerHTML;

Or

Just put svg path instead of whole svg code in data-ext-icon

<div class="richtext " data-ext-icon="/conten/dam/svgpath"></div>

PS:- I can see, same static svg icon n times of rte on the website. So better to keep this type of static resource at template or global cong level which will reduce DOM size.

Thanks

S

StephanePo1Author

Level 2

Do you guys have any idea of what could possibly be wrong here ?

Thanks a lot !

MukeshYadav_

Accepted solution

Community Advisor

Hi @stephanepo1 ,
It might be due to double quotes within the SVG attributes which interfere with the outer HTML attributes.
So in the overlayed Text component instead of keeping svg at data-ext-icon attribute, you can try extra div with display none.

An get svg using innerHtml (js) or using html() method of jquery in js like below

<div class="richtext" >
<div id="data-ext-icon" style="display:none">
//here put svg hardcoded or received with model
</div>

</div>


<!--IN Jquery-->
let svgData = $('#data-ext-icon').html()


<!--IN JS-->
let svgData = document.getElementById('data-ext-icon').innerHTML;

Or

Just put svg path instead of whole svg code in data-ext-icon

<div class="richtext " data-ext-icon="/conten/dam/svgpath"></div>

PS:- I can see, same static svg icon n times of rte on the website. So better to keep this type of static resource at template or global cong level which will reduce DOM size.

Thanks

kautuk_sahni

Community Manager

@stephanepo1 Did you find the suggestion helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded