如何在 Ace Editor 中显示文件内容答案

【问题标题】：How to display file content in Ace Editor如何在 Ace Editor 中显示文件内容
【发布时间】：2014-10-27 18:40:03
【问题描述】：

我正在测试 ace-editor 以显示来自服务器的大文本文件。由于它能够处理多达 400 万行的文件并具有文本突出显示功能，因此它是一个很好的候选者。

我一直在努力理解 Ace Editor 中的 Document 和 EditSession。据我了解，可以告诉 ace 编辑器从文件中读取并显示它。

我正在使用createEditSessiont() 创建会话并指定文档。来自 api 文档：

createEditSession(Document | String text, TextMode 模式)

文档：必填。如果 text 是 Document，它将 EditSession 与它相关联。否则，将创建一个带有初始文本的新文档

这是我的代码：

<script src="../src/ace.js"></script>
<script>
    var docSession = new ace.createEditSession("../Files/myFile.log", "ace/mode/plain_text");

    var editor = ace.edit("editor");
    editor.setSession(docSession);
    editor.setTheme("ace/theme/dawn");
</script>

不幸的是，页面上显示的只是“../Files/myFile.log”。我猜它正在使用该文本创建另一个文件，而不是阅读文档。如何正确告诉它显示 myFile.log 的内容？

【问题讨论】：

标签： javascript html ace-editor

【解决方案1】：

Ace 不以任何方式处理文件，它只是编辑器的前端组件。
createEditSessions 定义中的文档是Aces Document 对象的实例，而不是文件。
要将文件加载到 ace 中，您需要使用 ajax 调用从服务器获取其内容。类似https://github.com/ajaxorg/ace/blob/v1.1.7/demo/kitchen-sink/doclist.js#L164

【讨论】：

【解决方案2】：

您不必使用 ajax 调用，具体取决于您的应用。要与 Ace 一起玩，您可以像这样简单：

<?php
   $s = file_get_contents('foo.php');
?>
<div id="editor"></div>
<script>
    var s = '<?= $s ?>';

    var editor = ace.edit("editor");
    editor.session.setMode('php');
    editor.session.setValue(s);
</script>

请注意，您可以将元素 id 或元素传递给 ace.edit。

您可以使用 setValue() 显示任何字符串内容

【讨论】：

【解决方案3】：

如果你使用 PHP，试试这个：

<div id="editor"><?php echo file_get_contents('your_file_name.php') ?></div>

【讨论】：

这是错误的。 Ace 在初始化编辑器时会覆盖 div