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