如何在Ace编辑器中显示文件内容

How to display file content in Ace Editor

本文关键字：显示文件 编辑器 Ace      更新时间：2023-09-26

我正在测试ace编辑器，以显示服务器上的大型文本文件。由于它能够处理多达400万行的文件，并且具有文本高亮显示功能，因此它是一个很好的候选者。

我一直在努力理解AceEditor的文档和编辑会话。根据我的理解，可以告诉ace编辑器从文件中读取并显示它

我正在使用createEditSession（）创建会话并指定文档。来自api文档：

createEditSession（文档|字符串文本，文本模式）

文件：必填。如果文本是文档，它会将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的内容？

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

您不必使用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（）显示任何字符串内容

如果您使用PHP，请尝试以下操作：

<div id="editor"><?php echo file_get_contents('your_file_name.php') ?></div>
相关文章：