Hi,

I am current using ace - http://ace.ajax.org/ to display code in an textarea, but I can't make it to display html tag when it is loaded. I have been looking around for the answer but still can't find any answer for this basic issue, can't even find the answer from the documentation from ace website too! So I hope some here know the answer....

html,

HTML Code:
<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,

Code JavaScript:
$(document).ready(function(){
 
        var editor = ace.edit("ace-editor");
        editor.setTheme("ace/theme/eclipse");
 
        var HTMLMode = require("ace/mode/xml").Mode;
        editor.getSession().setMode(new HTMLMode());
 
        //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,

HTML Code:
<!-- 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 make it worked?

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

Thanks,
Lau