[Solved] Will RadEditor ever support DIV elements properly?

[Hugo Augusto]

Rad Editor is stuck in time. Today's web content is structured using DIVs, leaving tables for presenting data.

Examples like Telerik Web UI Editor Editable DIV Content Area Demo | Telerik UI for ASP.NET AJAX are so obsolete and shows that this control has been left behind. 

Will you ever support creating contents using DIV elements with a dialog box that allows to add CSS classes or define style settings?

 

[Rumen]

Hi Hugo,

Thank you for sharing your feedback. We understand the importance of modern, DIV-based content structuring in today's web development.

RadEditor already provides a comprehensive set of features for DIV-based content authoring. Let us walk you through them:

1. DIV Content Area (ContentAreaMode="Div")

Setting ContentAreaMode="Div" renders the content area as a <div contenteditable="true"> instead of an <iframe>. This means:

• Parent page CSS styles are automatically inherited
• Better screen reader compatibility
• Better HTTPS and cross-domain support

<telerik:RadEditor runat="server" ID="RadEditor1" ContentAreaMode="Div" />

2. DIV on Enter Key (NewLineMode="Div")

By setting NewLineMode="Div", pressing Enter inserts a <div> element instead of <p> or <br>:

<telerik:RadEditor runat="server" ID="RadEditor1" NewLineMode="Div" />

3. FormatBlock Tool

The built-in FormatBlock dropdown in the toolbar allows you to convert any block element into a <div>, <p>, <h1>–<h6>, etc. Simply select the content and choose the desired block format.

4. Apply CSS Class to Block Elements (including DIVs)

The Apply CSS Class dropdown supports applying classes to block elements. You can configure it with div.classname selectors to target DIV elements specifically:

<telerik:RadEditor runat="server" ID="RadEditor1">
    <CssClasses>
        <telerik:EditorCssClass Name="Clear Class" Value="" />
        <telerik:EditorCssClass Name="Content Block" Value="div.content-block" />
        <telerik:EditorCssClass Name="Highlight Section" Value="div.highlight-section" />
    </CssClasses>
</telerik:RadEditor>

5. StyleBuilder Dialog

The built-in StyleBuilder dialog provides a comprehensive visual CSS editor with categories for Font, Background, Text, Layout, Box, Border, and Lists. It applies CSS styles directly to the selected element — including <div> elements. You can test it live here:
https://demos.telerik.com/aspnet-ajax/editor/examples/built-in-dialogs/defaultcs.aspx

6. Custom Control via OnClientCommandExecuting

For even more control, you can intercept the Enter key and insert a <div> with any attributes you need — class, id, style, etc.:

<script type="text/javascript">
function OnClientCommandExecuting(editor, args) {
    if ("InsertParagraph" == args.get_commandName()) {
        editor.pasteHtml("<div class='my-block'>&nbsp;</div>");
        args.set_cancel(true);
    }
}
</script>
<telerik:RadEditor runat="server" ID="RadEditor1"
    NewLineMode="Div"
    OnClientCommandExecuting="OnClientCommandExecuting" />

7. Custom "Insert DIV" Dialog

If you need a dedicated dialog (similar to Insert Table) that inserts a <div> with a specific CSS class and style settings, RadEditor's Custom Dialog mechanism supports exactly this. You can create an ASPX page with your desired UI (class picker, style options, preview), and integrate it into the toolbar via showExternalDialog() — fully integrated with the editor's undo/redo system. See Custom Dialogs documentation for details.

7. Template Manager

The template manager allows you to insert predefined HTML templates in the content area.

 

We hope this helps clarify the available options. Please don't hesitate to reach out if you need further assistance or a sample implementation of a custom "Insert DIV" dialog.

Feature Request

If you have a specific vision for a built-in "Insert DIV" dialog or other DIV-based content authoring improvements, we encourage you to submit a feature request at our feedback portal:
https://feedback.telerik.com/aspnet-ajax

When submitting, it would be very helpful if you could include:

• A detailed description of the desired dialog and workflow
• Mockups or screenshots of the expected UI
• Examples from other editors that inspire your vision
• Specific use cases from your project

This helps our product team prioritize and design the feature to best match real-world needs. Other customers can also vote on the request, which further influences the roadmap.

Regards,
Rumen
Progress Telerik