pasteHtml inserting adulterated styles

3 posts, 1 answers
  1. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 01 Jun 2018 Link to this post

    I'm using pasteHtml to insert some html into the editor and, the style tag is being changed from what the pasteHtml is given.

     

    I'm using the following command:

    editor.pasteHtml(String.format("<input id='{0}__btn__' value='Go' onclick='return isValidEncounter(this)' style='border:none; color: #FF0000; text-decoration:underline; text-align: center' size='1' title='Validate encounter number'>", args.ID))

     

    Notice the style has the border set to none.

    Unfortunately, the following is the result after the pasteHtml command (as viewed in the HTML mode of the editor and as the final rendered html when inspecting in IE)

    <input title="Validate encounter number" id="asdf__btn__" style="border: currentColor; border-image: none; text-align: center; color: #ff0000; text-decoration: underline;" onclick="return isValidEncounter(this)" size="1" value="Go" />

     

    Now the border is set to currentColor and a border-image attribute has been added.  This doesn't render correctly in IE (I see a border around it). 

     

    Is there any way to simply have pasteHtml not alter the HTML style tag given to it?

  2. Answer
    Rumen
    Admin
    Rumen avatar
    14098 posts

    Posted 04 Jun 2018 Link to this post

    Hello Jim,

    The content area of RadEditor is an editable iframe/div element, which uses the underlying rich text editing engine of the browser under which it operates.

    I performed a test and noticed that it is only IE that converts the border: 0 attribute to border: currentColor and border-image: none, while the rest of the browser handle the content without changes. That's why I tested the pasteHtml method of IE and reproduced the same behavior in IE:

    <input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<input style=\'border:none; color: #FF0000; text-decoration:underline; text-align: center\' />'); ">
     
    <div id="test" contenteditable="true">
            Here is some nice text
    </div>
             
    <script>
        function pasteHtmlAtCaret(html) {
            var sel, range;
            if (window.getSelection) {
                // IE9 and non-IE
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
     
                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(), node, lastNode;
                    while ((node = el.firstChild)) {
                        lastNode = frag.appendChild(node);
                    }
                    range.insertNode(frag);
     
                    // Preserve the selection
                    if (lastNode) {
                        range = range.cloneRange();
                        range.setStartAfter(lastNode);
                        range.collapse(true);
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                }
            } else if (document.selection && document.selection.type != "Control") {
                // IE < 9
                document.selection.createRange().pasteHTML(html);
            }
        }
    </script>


    To summarize this is a browser behavior and the content is changed by IE. Unfortunately, you do not have many options: 
    - to modify the content so that it don't get changed by IE, for example by setting border: 0 instead of border: none;.
    - or to write a custom content filter that will update the content inside the editor when switching to HTML mode or submitting it.

    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 04 Jun 2018 in reply to Rumen Link to this post

    Thanks Rumen.

    I tried border:0, but unfortunately pasteHtml omits this attribute entirely.  Guess I'll have to try a content filter to swap out the border: currentcolor for border: none.

Back to Top