This is a migrated thread and some comments may be shown as answers.

pasteHtml inserting adulterated styles

2 Answers 95 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jim
Top achievements
Rank 1
Jim asked on 01 Jun 2018, 06:24 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 04 Jun 2018, 05:40 PM
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.
0
Jim
Top achievements
Rank 1
answered on 04 Jun 2018, 06:40 PM

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.

Tags
Editor
Asked by
Jim
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Jim
Top achievements
Rank 1
Share this question
or