Get HtmlEditorExtender content and bind to a DIV using javascript or jquery in ASP.NET

Question

I'm trying to change content of a DIV by javascript. Here is my html code (I'm using ASP.NET 4.0)

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:HtmlEditorExtender ID="HtmlEditorExtender1" runat="server" TargetControlID="TextBox1" DisplaySourceTab="true"></asp:HtmlEditorExtender>
<span id='review-button'>review</span>
<div id='review'></div>

And here is my javascript code to get TextBox1 content and bind it to DIV

$('#review-button').click(function () {
document.getElementById('review').innerHTML = document.getElementById('<%=TextBox1.ClientID%>').value;
});

It'll show like this:

this is a <b>test</b>

instead like this:

this is a test

And I'm trying using jquery but still no hope

$("#review").html($(document.getElementById('<%=TextBox1.ClientID%>')).val());

It works fine without HtmlEditorExtender. Anyone know why? I appreciate your help very much

Answer 1

Ok, I figured it out. Instead of using:

document.getElementById('<%=TextBox1.ClientID%>').value

Use this:

document.getElementById('ContentPlaceHolder_Panel_ctl00_HtmlEditorExtender1_ExtenderContentEditable').innerHTML

This is client ID of HtmlEditorExtender design edit box. Hope this help someone else