Search code examples
javascripthtmlace-editor

How to display file content in Ace Editor


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?


Solution

  • 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