Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 713
Roast Avatar asked Oct 27 '14 18:10

Roast


People also ask

How do I use Ace editor in alloyui?

Then initialize AlloyUI and load the Ace Editor module. Create an HTML element for the Ace Editor. Now create a new instance of Ace Editor with the newly created element. Once a new instance of Ace Editor is created, the mode can be set to correspond to the language being typed.

How do I install Ace editor in react?

1. Install react-ace To get started with the implementation of Ace Editor in your React application, install the react-ace module. This module is a set of react components for Ace / Brace that can be easily embedded into your project. To install, open a terminal, switch to the directory of your project and run the following command:

How to create an embeddable code editor?

An embeddable code editor that matches the features of native editors. First load the seed and CSS files, if you haven't yet. Then initialize AlloyUI and load the Ace Editor module. Create an HTML element for the Ace Editor. Now create a new instance of Ace Editor with the newly created element.

What is ace in Cloud9 IDE?

Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project. Both Cloud9 IDE and Mozilla are actively developing and maintaining Ace.


1 Answers

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

like image 140
a user Avatar answered Sep 30 '22 22:09

a user