How do you get/set content via javascript with the AJAX Control Toolkit HTML Editor?

Question

I'm using the AJAX Control toolkit HTML editor and have what I hope is a simple question. As the question title says - how do you get/set the content of the HTML editor via javascript?

I have no problems accessing the server side content property - but how to do it client side?

Any help gratefully received !

Answer 1

The Html Editor is one of the unique Ajax Control Toolkit controls, becuase it does not inherit AjaxControlToolkit.ExtenderControlBase (server side) nor inherit AjaxControlToolkit.BehaviorBase (client side).

So you can't use $find javascript method to get access to the behavior instance on the client, It inherits AjaxControlToolkit.ScriptControlBase (server side) and Sys.UI.Control (client side).

To get access to control instance on the client, you use the control property on the DOM element it self as follows:

<script type="text/javascript">
//considering the editor is loaded.
var editorControl = $get("<%=editor.ClientID%>").control;

//1. For setting content:
editorContorl.set_content("Sample Content");

//2. For getting content:
var content = editorContorl.get_content();    
</script>

Answer 2

$(function(){
    $find("editor").set_content("jQuery set content");
    alert($find("editor").get_content());
});

Answer 3

Above answers didn't work for me. So I had to dig through html and got following working solution. its working for years now and survived many framework/OS/browsers update/upgrade.

<script type="text/javascript">
    var varcont = '<%=txtInstructions.ClientID %>' + '_ctl02_ctl00';
    //Get Content
    var content = document.getElementById(varcont).contentWindow.document.body.innerHTML; 

    //Set Content
    document.getElementById(varcont).contentWindow.document.body.innerHTML='<b>I rock</b>'
</script>