Highlighted

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

shilpam37377795

21-11-2017

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,

Replies

Highlighted

shilpam37377795

23-11-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

Highlighted
Highlighted

shilpam37377795

23-11-2017

yes and I want it should be as below:

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

means ::before should be removed and span tag is closed before that.