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

[n/a]

Using an Editor demo available from the demos, switch to HTML view and paste the following HTML into it:

<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>

Now, switch again to the Design mode.

Try to add some text after the "Right column..." text by placing the cursor in the end of the text, pressing enter and writing something, or just try to change that text format into an H4.

Editor will insert a new paragraph with the col-6 class and outside that DIV!

Here's the result:

<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>
<p class="col-6"><span>Just want to add more text...</span></p> --> this should not be here!
</div>

How can this be fixed? Need to provide some snippets but they are unusable this way.

Thank you

[n/a]

2026 and no answers...

[Rumen]

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