How to display file content in Ace Editor

Question

I am testing out ace-editor to display large text files from the server. Since it boasts being able to handle files up to 4 millions lines and has text highlighting, it makes it a good candidate.

I've been struggling to understand the Document and EditSession from Ace Editor. From my understanding, its possible to tell ace editor to read from a file and display it.

I am using the createEditSessiont () to create the session and specify the document. From the api documentation:

createEditSession(Document | String text, TextMode mode)

Document: Required. If text is a Document, it associates the EditSession with it. Otherwise, a new Document is created, with the initial text

Here is my code:

<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>

Unfortunatly, all that appears on the page is "../Files/myFile.log". I guess it is creating another file with that text instead of reading a document. How do properly tell it to display the contents of myFile.log?

Answer 1

Ace doesn't handle files in any way, it is only front-end component of an editor.
Document in createEditSessions definition is an instance of Aces Document object, not a file.
To load a file into ace you need to get its contents from the server with ajax call. something like https://github.com/ajaxorg/ace/blob/v1.1.7/demo/kitchen-sink/doclist.js#L164

Answer 2

You don't HAVE to use an ajax call, depending on your app. To play with Ace you can so something simple like this:

<?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>

Note that you can pass EITHER an element id or an element to ace.edit.

You can display any string content using setValue()

Answer 3

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

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