javascript - 将 HTML 文件加载到 ACE Editor PRE 标签中

Question

有一个（在服务器上）本地存储的 HTML 文件，我需要向用户显示并允许对其进行更改并保存它。（类似于 wordpress 中的模板文件编辑器）。

为此，我正在使用 ACE 编辑器。

我的 JavaScript 代码：

$(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);

});

文件 abc.html 中的代码

我的问题：虽然我使用了 addlashes，但有一些字符会导致问题。没有直接向ACE Editor 提供文件的方法吗？

有没有其他这样的编辑器可以直接提供文件名来打开？

编辑：解决了！

我没有通过 setValue() 函数传递文件文本，而是直接在 PRE 标记中打印文本

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

有效。

Answer 1

正确的转义是

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

Answer 2

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

是错的。abc.html 没有 php 代码。语法错误

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

这可以工作。没有测试