How to load html tags in the editor area

[TK Lau]

I am current using ace to display code in an textarea, but I can't
make it to display html tag when it is loaded,

html,
<script src="jquery-1.7.min.js" type="text/javascript"
charset="utf-8"></script>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></
script>
<script src="src/theme-eclipse.js" type="text/javascript"
charset="utf-8"></script>
<script src="src/mode-html.js" type="text/javascript"
charset="utf-8"></script>

<form action="data.php" method="post" enctype="multipart/form-data"
id="form_data" class="set-form">

<textarea rows="5" cols="10" class="code" name="ace-editor"></
textarea>

<div style="height:450px; border:1px solid #000;">
<div id="ace-editor">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/
250/addthis_widget.js#pubid=xa-4ec6e5404802576f"></script>
<!-- AddThis Button END -->
</div>
</div>

<input type="submit" name="submit" value="submit"/>

</form>
jquery + ace,

$(document).ready(function(){

var editor = ace.edit("ace-editor");
editor.setTheme("ace/theme/eclipse");

var XmlMode = require("ace/mode/xml").Mode;
editor.getSession().setMode(new XmlMode());

//var textarea = $('.code').hide();
var textarea = $('.code');

// Get the value from the editor and place it into the
texrarea.
var text = editor.getSession().getValue();
textarea.val(text);

// Update the textarea on change.
editor.getSession().on('change', function(){

// Get the value from the editor and place it into the
texrarea.
var text = editor.getSession().getValue();
textarea.val(text);
//alert(text);
});

$('#form_data').submit(function(e){
//alert($(this).serialize());

var object = $(this);
var path = object.attr('action');

$.post(path, object.serialize(),function(xml){

});
return false;
});
});
It should display the html tags below,

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/
js/250/addthis_widget.js#pubid=xa-4ec6e5404802576f"></script>
<!-- AddThis Button END -->
But it only display numbers of lines.

How can I fix this?

Here is the page - http://lauthiamkok.net/dump/ace/editor_2.html I
have put them all together.