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?
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.
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:
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With