ace editor and dynamic content

by foreyez

HTML

<div id="my_html">
</div>
<!-- this works using xmp and NOT when using div's! -->
<xmp id="my_html_hidden"><html>test</html></xmp>

<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>

CSS

#my_html {
position: absolute;
top: 0;
right: 0;
bottom: 50%;
left: 0;
}
#my_html_hidden {
display: none;
}

JavaScript

// comments represent dynamic environment set up

// this is in an external js file

function initAceEditor() {
var html_editor = ace.edit("my_html");
var editor = html_editor;
html_editor.setTheme("ace/theme/solarized_light");
html_editor.getSession().setMode("ace/mode/html");
html_editor.setFontSize("15px") ;
html_editor.setPrintMarginColumn(false);
var text = 'h';
editor.session.insert(editor.getCursorPosition(), text);

var text = '\n';
editor.session.insert(editor.getCursorPosition(), text)

html_editor.session.insert()
html_editor.setOptions({
maxLines: 20
});
}

// the function is called at the end of a function that
// includes a getJSON() request to a Python script which
// queries a MongoDB database and json dumps the results.  
// eg loadMyContent() {
// getJSON() and return content
initAceEditor()
// }

// Problems when using div instead of xmp:  

// In Firebug I can *see* the required HTML in the 'response'
// and 'json' tabs ie:
// <div id="acey_html_hidden"><html>test</html></div>
// but the Ace edior is just showing:
// test

// In Firebug's HTML view of the hidden div, when using <div> tags, the <html> tags have been stripped out.  
//
//When using <xmp> tags the <html> tags have not been stripped out.