[Solved] Editor still can't edit some HTML...

Hi Hugo,

When NewLineMode is set to its default value "P", pressing Enter inside a <div class="col-6"> causes the editor to create a new <p> element and inherit the CSS class from the parent <div>. This results in <p class="col-6"> being inserted as a sibling — which is exactly what you're seeing.

Solution

Set ContentAreaMode="Div" and handle the OnClientCommandExecuted event to strip the inherited classes from newly created elements:

<telerik:RadEditor runat="server" ID="RadEditor1"
    ContentAreaMode="Div"
    NewLineMode="Div"
    OnClientCommandExecuted="onCommandExecuted">
            <Content>
<div class="row g-3">
<div class="col-6">
<h4>Left column...</h4>
<br />
This selector will match any element that has a class attribute starting with "col-". For example, it will match elements with classes like "col-1", "col-2", "col-header", etc.<br />
<br />
</div>
<div class="col-6"><span>Right column...</span></div>
</div>
            </Content>
        </telerik:RadEditor>

<script type="text/javascript">
    function onCommandExecuted(editor, args) {
        if (args.get_commandName() === "EnterNewLine") {
            var contentArea = editor.get_contentArea();
            var sel = editor.getSelection();
            var newDiv = sel.getParentElement();

            // Walk up to find the div that was just created by Enter
            while (newDiv && newDiv !== contentArea && newDiv.tagName !== "DIV") {
                newDiv = newDiv.parentNode;
            }

            if (newDiv && newDiv !== contentArea && /\bcol-\S*/.test(newDiv.className || "")) {
                newDiv.className = newDiv.className.replace(/\bcol-\S*/g, "").replace(/\s+/g, " ").trim();
                if (!newDiv.className) {
                    newDiv.removeAttribute("class");
                }
            }
        }
    }
</script>

Key points

• ContentAreaMode="Div" — renders the content area as a <div> in the page, which keeps newly created elements within the layout structure.
• OnClientCommandExecuted — fires after the EnterNewLine command (Enter key) allowing you to strip the inherited col-* classes from the newly created element.

Result

Before:

<div class="col-6"><span>Right column...</span></div>
<p class="col-6"><span>Just want to add more text...</span></p>

After:

<div class="col-6"><span>Right column...</span></div>
<p><span>Just want to add more text...</span></p>

Feel free to fine tune the EnterNewLine command to cover your scenario. 

Regards,
Rumen
Progress Telerik

Hi Hugo,

Thank you for the follow-up.

About ContentAreaMode="Div" and Page Styles

The purpose of ContentAreaMode="Div" is specifically to allow page styles to apply to the editor's content area - this is by design and documented behavior. If you do not want page styles to affect the content area, keep the default ContentAreaMode="Iframe" and use CssFiles to load only the styles you need inside the editor:

<telerik:RadEditor runat="server" ID="RadEditor1"
    OnClientCommandExecuted="onCommandExecuted">
    <CssFiles>
        <telerik:EditorCssFile Value="~/my-editor-content-styles.css" />
    </CssFiles>
    <Content>
<div class="row g-3">
    <div class="col-6"><h4>Left column...</h4></div>
    <div class="col-6"><span>Right column...</span></div>
</div>
    </Content>
</telerik:RadEditor>

Place only the Bootstrap grid classes (.row, .col-*, etc.) you need in my-editor-content-styles.css. The CssFiles collection works with Iframe mode and gives you full control over what styles are rendered in the content area, without any page style leaking.

Enter Key — Preventing Class Inheritance on New Elements

The previous JavaScript stripped col-* from the new element unconditionally  even when Enter was pressed in the middle of text and the content was split across two elements. The version below adds a textContent check so that classes are only removed when the newly created element is empty (i.e., Enter was pressed at the end of text):

<script type="text/javascript">
    function onCommandExecuted(editor, args) {
        if (args.get_commandName() !== "EnterNewLine") return;

        var contentArea = editor.get_contentArea();
        var sel = editor.getSelection();
        var newElement = sel.getParentElement();

        // Walk up to the block-level element created by Enter
        while (newElement && newElement !== contentArea
            && newElement.tagName !== "P" && newElement.tagName !== "DIV") {
            newElement = newElement.parentNode;
        }

        if (!newElement || newElement === contentArea) return;

        // Only strip col-* from the NEW (empty) element
        var text = (newElement.textContent || newElement.innerText || "")
            .replace(/\u00A0/g, "").trim();

        if (text === "" && /\bcol-\S*/.test(newElement.className || "")) {
            newElement.className = newElement.className
                .replace(/\bcol-\S*/g, "")
                .replace(/\s+/g, " ").trim();
            if (!newElement.className) {
                newElement.removeAttribute("class");
            }
        }
    }
</script>

Summary

• Iframe mode + CssFiles — keeps the content area isolated; load only the CSS you need.
• Div mode — inherits page styles by design; this is documented and expected.
• OnClientCommandExecuted — fires after the EnterNewLine command, letting you clean up only the newly inserted element.

Out of curiosity, you mentioned you are switching to other solutions. May I ask which rich-text editor you are considering for a WebForms (AJAX) project? Telerik UI for ASP.NET AJAX is one of the last actively maintained and developed commercial suite for this technology in 2026, so I'm genuinely curious what alternative you have in mind. Any feedback helps us understand what our customers need.

Regards,
Rumen
Progress Telerik