Fill content through javascript in telerik editor

[Steve Rothschild]

Hi,
   I have a page with editor(say id = editor1) on it. On click of a button i'm opening a popup window and after selection of some text user closes that button. That selected text should come in editor. i am firing on client close event of window with the code

function OnCloseSentenceGalleryRadWindow(oWnd, args) {
        var arg = args.get_argument();
        if (arg) {
            var Sentence = arg.Sentence;
            var ctrl = arg.ControlId;
            ctrl = document.getElementById(ctrl);
            ctrl.innerHTML = Sentence;
        }
    }
text is coming in editor but editor changes into a Readonly text box. where i can't type of edit any thing.

Please help to get out of it.
waiting for early reply;

[Rumen]

Hello Steve,

RadEditor is a composite control and to get a reference to its client object you should use:

var editor = $find("<%=RadEditorIDName.ClientID%>");

To set text in the content you should use the editor.set_html(content) method.

More information about RadEditor's Client-Side API is available in this article: http://www.telerik.com/help/aspnet-ajax/editor-getting-familiar-with-client-side-api.html


Kind regards,
Rumen
the Telerik team

[Lahiru]

var editor = $find("<%=RadEditor1.ClientID%>");
var content = document.getElementById("ctl00_body_grdGoalList_ctl" + id + "_lblGoalDesc").innerHTML;
editor.set_html(content);


This works fine in the IE but in firefox the editor doesn't get fill with the data and it is in the read only mode.
I checked the view source and i think there's a difference in the way of two browsers rendering mechanism.
Please advice how to fix this

[Princy]

Hi,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the following sample code snippet which works fine at my end.

ASPX:

<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox>
<telerik:RadButton ID="RadButton1" runat="server" Text="Submit" AutoPostBack="false"
    OnClientClicked="OnClientClicked1">
</telerik:RadButton>
<telerik:RadEditor ID="RadEditor1" runat="server">
</telerik:RadEditor>

JavaScript:

<script type="text/javascript">
    function OnClientClicked1(sender, args) {
        var content = $find("<%=RadTextBox1.ClientID %>").get_value();
        var editor = $find("<%=RadEditor1.ClientID %>");
        editor.set_html(content);
        //or
        editor._contentArea.textContent = content;
    }
</script>

Let me know if you have any concern.
Thanks,
Princy.

[Lahiru]

Hi i got this error in firefox 26.0
For the older versions it works fine.

Telerik version 2008.35


Also please refer the below details:

My editor is in inside a div and div is open when i click on the grid template column image.

  <div style="display: none" id="divGoalEdit" title="Edit Goal Description">
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td>
                    <telerik:RadEditor Height="185px" Width="400px" ToolsWidth="400px" EditModes="Design"
                        ID="RadEditor1" runat="server" ToolbarMode="Default" ToolsFile="~/Editor/BasicTool.xml"
                        Skin="Telerik" OnClientLoad="OnClientLoad">
                        <Content>
                        </Content>
                    </telerik:RadEditor>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Image ID="imgClose" runat="server" ImageUrl="Images/ok.gif" />
                    <asp:HiddenField ID="hdnRowIndex" runat="server" />
                    <asp:Label ID="counter" runat="server" CssClass="form_txtnormal"></asp:Label>
                </td>
            </tr>
        </table>
    </div>

[Princy]

Hi,

Please have a look into the sample code snippet I tried which works fine at my end.

ASPX;

<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="true">
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:Image ID="Image1" ImageUrl="~/Images/plus.gif" runat="server" onclick="Open();" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<div style="display: none; height: 100px;" id="divGoalEdit" title="Edit Goal Description">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td>
                <telerik:RadEditor Height="500px" Width="400px" ToolsWidth="400px" EditModes="Design"
                    ID="RadEditor1" runat="server" ToolbarMode="Default" Skin="Telerik">
                    <Content>
                    </Content>
                </telerik:RadEditor>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Image ID="imgClose" runat="server" ImageUrl="Images/ok.gif" />
                <asp:HiddenField ID="hdnRowIndex" runat="server" />
                <asp:Label ID="counter" runat="server" CssClass="form_txtnormal"></asp:Label>
            </td>
        </tr>
    </table>
</div>

JavaScript:

<script type="text/javascript">
    function Open() {
        var content = $find("<%=RadTextBox1.ClientID %>").get_value();
        var div = document.getElementById("divGoalEdit");
        div.style.display = "block";
        var editor = $find("<%=RadEditor1.ClientID %>");
        editor.set_html(content);
    }
</script>

Thanks,
Princy.

[Lahiru]

Hi Princy thanks alot for your reply.

I checked your code and it works properly. But what I have done differently is that I have used a jquery modal . So then it works properly in IE but in firefox the selected content doesn't display in the text area and also it's in read-only mode.

I checked the view source of the editor and then i figured out that in the <html> tab under the iframe doen;t contain any content.

code exxample :
  function EditGoalDescripton(id) {
            $('#divGoalEdit').dialog('open');
            $('#divGoalEdit').dialog({
                bgiframe: true,
                resizable: false,
                height: 250,
                width: 450,
                draggable: true

            });

            if (id < 10) {
                id = '0' + id;
            }

            var editor = $find("<%=RadEditor1.ClientID%>");
            var content = document.getElementById("ctl00_body_grdGoalList_ctl" + id + "_lblGoalDesc").innerHTML;
            editor.set_html(content);
 
        } 



view source:
here the selected text wont appear inside the <body> tag

<td id="ctl00_body_RadEditor1Center" class="rade_contentCell" valign="top" style="height:100%;">
<textarea id="ctl00_body_RadEditor1" style="display:none;" cols="20" rows="4" name="ctl00$body$RadEditor1"></textarea>
<iframe frameborder="0" src="javascript:'<html></html>';" style="width: 100%; margin: 0px; padding: 0px; height: 100%;">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
</td>

[Lahiru]

Hi Princy,

Thank a lot for your time spent.

I finally solved the issue using one of your other posts.I had to paste the below code when the dialog loads

var editor = $find("<%=RadEditor1.ClientID%>");
editor.onParentNodeChanged();