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