CKeditor alerts source code but show original data in a div

Question

I am trying to get the CKeditor html source code with javascript inside a div . I however after trying saw that when I am attempting to get the source code, it alerts out the source code as I wanted to but inside the div, it just shows whatever I wrote inside the editor. I want the source code inside the div as well...

function getdata(){
    var editor_data = CKEDITOR.instances.editor1.getData();
    var content = $("#datadiv").val();
    alert(editor_data); /*alerting the source code*/
    $("#datadiv").html(editor_data); /*showing just what I wrote on the editor..*/
    }

<textarea cols="80" id="editor1"  name="editor1" rows="10"></textarea>
<input type="button" onClick="getdata();" value="get" />

    <div id="datadiv"></div>

And I understand why it's happening.. Writing <h2>Hello</h2> will eventually show a h2 bold Hello on the page.. The tags wont be shown on the browser.. But how to show the source on the browser that I wrote on as html..If it's possible then how is it.?

Answer 1

Sounds like you need to encode the HTML before setting the value. I got this encoding/escaping function from https://stackoverflow.com/a/7124052/694325 - please try this!

function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

function getdata(){
    var editor_data = CKEDITOR.instances.editor1.getData();
    var content = $("#datadiv").val();
    alert(editor_data); /*alerting the source code*/
    $("#datadiv").html(htmlEscape(editor_data)); /*showing just what I wrote on the editor..*/
}

<textarea cols="80" id="editor1"  name="editor1" rows="10"></textarea>
<input type="button" onClick="getdata();" value="get" />
<div id="datadiv"></div>