Loading a HTML file into ACE Editor PRE Tag

Question

There is a (on the server) locally stored HTML file which i need to show to user and allow use to make changes to it and save it. (Something like template file editor in wordpress).

For this I am using ACE Editor.

My javascript code:

$(document).ready(function() {

var editor = ace.edit("editor");

editor.getSession().setMode("ace/mode/html");
editor.setTheme("ace/theme/chrome");

editor.setValue("<?php echo addslashes(file_get_contents("abc.html")); ?>");
editor.gotoLine(1);

});

Code in file abc.html

My Problem: Although I have used addslashes, there are some characters that cause problem. Isn't there a method to directly supply a file to ACE Editor?

Is there any other such editor which can directly be supplied a file name to open?

EDIT: SOLVED!

Instead of passing file text via setValue() function, I directly printed text within PRE tag

<pre id="editor"><?php echo htmlentities(file_get_contents($input_dir."abc.html")); ?></pre>

It worked.

Answer 1

the correct escaping is

htmlspecialchars(addslashes(file_get_contents("abc.html")));

Answer 2

editor.setValue("<?php echo addslashes(file_get_contents("abc.html")); ?>");

is wrong. abc.html is out of php code. syntax error

editor.setValue('<?php echo addslashes(file_get_contents("abc.html")); ?>');

this could work. have not tested