How to Stop Auto Insertion of CSS Class in RadEditor when Deleting Text
Environment
| Property | Value |
|---|---|
| Product | RadEditor for ASP.NET AJAX |
| Version | 2023.2.606 |
Description
When using RadEditor with newline mode set to "P" (Paragraph), deleting text can cause an additional CSS class to be inserted into the paragraph. This is a known bug in the Chromium browser.
Solution
To stop the auto insertion of the CSS class, you can add the following onkeyup code to your RadEditor:
<script>
function OnClientLoadEditor(sender, args) {
var $ = $telerik.$;
sender.attachEventHandler('onkeyup', function (e) {
if (e.keyCode === 8 || e.keyCode === 46) {
var range = sender.get_document().getSelection().getRangeAt(0);
var endContainer = range.endContainer;
var nodeNextSibling = endContainer.nextSibling;
if (endContainer.parentNode.tagName.toLowerCase() === "span") {
$(range.endContainer.parentNode).replaceWith($(endContainer));
}
else if (nodeNextSibling.tagName.toLowerCase() === "span") {
$(nodeNextSibling).replaceWith($(nodeNextSibling).contents());
}
}
});
}
</script>
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoadEditor">
<Content>
<p>test</p><p>test</p>
</Content>
</telerik:RadEditor>
This code attaches an onkeyup event handler to the RadEditor. When the backspace or delete key is pressed, it checks if the current selection is within a <span> element. If it is, the <span> element is replaced with its contents. This effectively removes the additional CSS class inserted by the browser when deleting text.