Load HTML file into ACE PRE Tag editor

Question

There is (on the server) a locally saved HTML file that I need to show to the user and allow it to be used to make changes to it and save it. (Something like a template file editor in wordpress).

For this I use the ACE editor.

My javascript code is:

$(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 abc.html File

My problem: although I used addlashes, there are some characters that cause problems. There is no way to directly transfer the file to the ACE editor?

Is there any other editor that can directly provide the file name to open?

EDIT: SOLUTION!

Instead of passing the text file through the setValue () function, I directly printed the text in the PRE tag

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

It worked.

Answer 1

proper shielding

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

Answer 2

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

wrong. abc.html is missing in php code. syntax error

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

it might work. not tested