Get the content area object of RadEditor with a single JS function regardless of the ContentAreaMode value

RELATED TO:

AUTHOR: Rumen Zhekov

DATE POSTED: October 09, 2018

HOW-TO

Get the content area object of RadEditor with a single JS function regardless of the ContentAreaMode value
 

SOLUTION

Sometimes you may have multiple editors on the page with different content areas and you may need a common way of obtaining reference to these different editable DIV or Iframe content areas.

The solution below solves this problem by providing a common function for this:

RadEditor with Div content area:
<telerik:RadEditor ID="RadEditorDivContentArea" ContentAreaMode="Div" runat="server" OnClientLoad="GetContent">
    <Content><em>Div Based Content Area</em></Content>
</telerik:RadEditor><br />
 
RadEditor with Iframe content area:
<telerik:RadEditor ID="RadEditorIframeContentArea"  ContentAreaMode="Iframe" runat="server" OnClientLoad="GetContent">
    <Content><em>Iframe Based Content Area</em></Content>
</telerik:RadEditor>
 
<script>
    function GetContent(sender) {
        alert(getContentElement(sender).innerHTML);
    }
 
    function getContentElement(editor) {
        if (!editor) {
            return null;
        }
        var contentElement = null;
        if ($telerik.$(editor.get_contentAreaElement()).is("div")) {
            contentElement = editor.get_contentAreaElement();
        } else {
            contentElement = editor.get_contentArea();
        }
        return contentElement;
    }
</script>

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.