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,

<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.

[Alasjo]

I had a similar issue, and did not want to use Ajax to load the
content to edit.

Since html tags are rendered by the browser while loading and Ace is
not loaded before "window.onload" event, Ace would not function
properly (for me) when html was included in the presumed Ace editor
div tag.
I solved it by putting the html code in the textarea at first, then
when Ace is loaded it fetches the code from the textarea via
editor.getSession().setValue($("#idofmytextarea").text());
Aside from that I'm using the same approach as you, and it works!

Cheers.

On 20 Nov, 15:40, TK Lau <lau.thiam.kok.1...@gmail.com> wrote:
> I am current using ace to display code in an textarea, but I can't

> make it to displayhtmltag when it is loaded,

>         vareditor= 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 theeditorand 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 theeditorand 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 thehtmltags below,

[John Davison]

Hi

I'm trying to do the same thing but it's not working for me. 

I've mocked up your solution as I understood it as a jsFiddle - could you take a look and see whats wrong?

[Harutyun Amirjanyan]

Please pay a little more attention to what you are doing
if you create a variable called `editor1`
`editor.getSession()` can't work, obviously!

http://jsfiddle.net/q3D8p/

Also note that using textarea doesn't really save you from escaping.
Your text still can't contain </textarea> string and things like &lt;

So you are better off to just replace all occurences of & with &amp;
and all < with &lt;

[John Davison]

Ah, yes good point. Sorry for the stupid question and thanks for the advice re escaping!