What are the requirements for /mode/html in Ace editor?

StackOverflow https://stackoverflow.com/questions/20869962

  •  23-09-2022
  •  | 
  •  

Question

I can get mode/javascript working with:

JS
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/ace.js

Theme
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/theme-tomorrow.js

Mode
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/mode-javascript.js

Worker
https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/worker-javascript.js

HTML

<script src="/static/js/ace/ace.js"></script>

<div class="my_ace_editor">
function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}
</div>

CSS

#my_ace_editor {
    position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
}

jQuery

$(document).ready(function() {
    var editor = ace.edit("my_ace_editor");
    editor.setTheme("ace/theme/tomorrow");
    editor.getSession().setMode("ace/mode/javascript");
});

But am not having any luck when attempting to display HTML with:

HTML

<div id="my_ace_editor"><p>test</p></div>

jQuery

$(document).ready(function() {
    var editor = ace.edit("my_ace_editor");
    editor.setTheme("ace/theme/tomorrow");
    editor.getSession().setMode("ace/mode/html");
});

and have added:

https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/mode-html.js

If I type in the HTML editor, the tags and content have syntax highlighting applied.

But it is not showing the actual HTML when it loads - all it shows is test.

There are no Firebug errors and I can see the actual HTML that should be highlighted in Firebug.

Is another file or setting required?

Edit: I can get the HTML content within Ace editor showing correctly if I use:

editor.setValue("<html>test</html>",-1);

But I need to be able to set the value from the HTML itself and not in the jQuery.

The content is being loaded from a database (ie it is 'dynamic content'), i'm not sure if that makes a difference?

Was it helpful?

Solution

You need to escape html, that is instead of

<div id="my_ace_editor"><p>html&test</p></div>

it should be

<div id="my_ace_editor">&lt;p>html&amp;test&lt;/p></div>

This is true for all modes not just html

OTHER TIPS

If you do not want to escape the HTML code just use the script tag with the following type and style set

<script type="text/plain" style="display: block;" id="ace-1">
  <a href="test.html">hello world</a>
  test test
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top