span tag is not getting closed in RTE when added as a plugin | Community
Skip to main content
S
smusale
November 21, 2017

span tag is not getting closed in RTE when added as a plugin

  • November 21, 2017
  • 2 replies
  • 1831 views

Hello Team,

I have added icon plugin in 6.3 RTE which adds the icon in the RTE:

            execute: function (execDef) {

                var data = execDef.value,

                    title = data.icon || '',

                    imgHtml = '<span class="icon ' + title + '"/>';

                execDef.editContext.doc.execCommand('insertHTML', false, imgHtml);

            }

When added, the icon span tag is not getting closed as other span tag in RTE, PFB:

<div class="rte-editor u-coral-padding is-edited webkit chrome" contenteditable="true" style="outline-style: none;">

<p>

     <span class="grey">Add icon here</span>

</p>

<p>

     <span class="icon icon-facebook">

                    ::before

     </span>

</p>

</div>

I want to remove ::before and icon span should be:

<p>

     <span class="icon icon-facebook"></span>

</p>

Please suggest.

Thanks,

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

2 replies

smacdonald2008
smacdonald2008
Level 10
November 21, 2017

This is not documented nor a common use case - we are checking internally.

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
November 22, 2017

See this thread:- RichText &lt;span&gt; tag closing prematurely (this is old thread) , How to remove html tags from the content of Rich Text Editor ? and rte remove tag p

This would help you.

Kautuk Sahni
S
smusaleAuthor
November 23, 2017

Hi Kautuk,

tried with Shared link - http://experience-aem.blogspot.in/2014/02/aem-cq-56-extend-richtext-editor-add-new-plugin- pullquote.html , I am still getting improper close of span tag.

I want to create span tag , add class as its attribute and assign value to it based on user's input .

Following code added in js file:

      var value = execDef.value, selection = execDef.selection;

        var node = CUI.rte.DomProcessor.createNode(execDef.editContext, "span");

         var rteText = selection.startNode.data;

        var start = rteText ? 1 : -1;

            CUI.rte.Common.insertNode(node, selection.startNode, selection.startOffset);

        if(value.icon.length < 0){

            return;

        }else{

            node.innerHTML = "<span class=\"icon " + value.icon + "\"/></span>";

        }

output when inspected:

<span><span class="icon icon-facebook">::before</span></span>


Can you please suggest on this?

Thanks

smacdonald2008
smacdonald2008
Level 10
November 23, 2017

Is this your output:

output when inspected:

<span><span class="icon icon-facebook">::before</span></span>

Terms & ConditionsAccessibility statement

Loading footer...