如何从客户端清除/设置具有Ajax控件工具包HTML编辑器扩展程序的Asp.Net文本框的值？

Question

I'm using ACT 4.1.7.607. Client is IE 9.

I can not find a solution where I can clear the contents of the editor from the client.

I have tried using JQuery:

    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" height="200px" Width="837px"></asp:TextBox>
    <ajaxToolkit:HtmlEditorExtender ID="htmlEditorExtender" TargetControlID="TextBox1" runat="server" EnableSanitization="False"></ajaxToolkit:HtmlEditorExtender>
    <br /> 
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" />
    <asp:Button ID="Button2" runat="server" Text="Clear" />
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('#<%=Button2.ClientID%>').click(function () {
                var editorControl = $get("<%=TextBox1.ClientID%>");
                var clearValue = '';
                editorControl.innerHTML = clearValue;
            }) 
        }) 
    </script> 

This seems to change the innerHTML value of the textbox. However, the screen does not update to show the change.

Have also tried JavaScript:

    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" height="200px" Width="837px"></asp:TextBox>
    <ajaxToolkit:HtmlEditorExtender ID="htmlEditorExtender" TargetControlID="TextBox1" runat="server" EnableSanitization="False"></ajaxToolkit:HtmlEditorExtender>
    <br /> 
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" />
    <asp:Button ID="Button2" runat="server" Text="Clear" OnClientClick="javascript:clearEditor()" />
    <script type="text/javascript" language="javascript"> 
        function clearEditor(){ 
            document..getElementById('<%=TextBox1.ClientID%>').innerHTML = '';
        }
    </script>

This also seems to change the innerHTML value, but, again it does not show the change in browser window.

I have seen 'solutions' that speak of div containers for the extender or the 'ExtenderContentEditable' attribute of the extender or the 'setContent' method of the extender - none of these exist in my world.

If there is a solution to this, I would be most grateful to see it.

Answer 1

You can use this script:

function clearHtmlExtender(){
    var extender = $find("<%= htmlEditorExtender.ClientID %>");
    extender._editableDiv.innerHTML = "";
    extender._editableDiv_onblur();
}

The short description: script above resetting content of editable div (_editableDiv.innerHTML) and then force extender to assign this hrml to target textbox.