Dynamically displaying large amounts of text by partially displaying data in textarea

Question

The Goal:

Optimize a web page that needs to display large amount of text data (25mb+) in a textarea or content editable div, without losin

Answer 1

As promised here's my solution:

So after fumbling around with various ideas and trying different methods, I think I finally settled on using Ace for my project. I chose Ace for a few reasons.

1. Well documented API that was easy to understand in addition to a fairly large and active community.
2. Performance, Ace hands down gets far superior performance compared to my test with Code Mirror using large files. (500,000 lines, github says Ace has been tested with up to 4 million lines.
3. Features, out of the box Ace has more features to get you up and running with little user setup or configuration. Getting started took less than 10 lines total!
4. It doesn't support as many browsers as Code Mirror, but my project is running with WebGL so I was not very concerned.

So you understand my reasoning, and you want to get Ace up and running yourself? Easy, just hop on over to the build repo and grab one whichever flavor suites your needs. I grabbed the src-min release as I will just add it to my build script.

Then just include the javascript file in whatever way you do:

<script src="/ace/ace.js" type="text/javascript" charset="utf-8"></script>

And an element to your page with id="editor". In my case I'll attach it directly to a div:

<div id="editor">Any text you want to have auto displayed</div>

and in a javascript file:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.session.setMode("ace/mode/javascript");
editor.$blockScrolling = Infinity;

If you just want to look around to see what languages/themes/options/etc. are available, just head over to Ace's kitchen sink page and play around with the editor.

Now I also needed a few functions, such as being able to load a file into the text area - and you can do that with the following:

Load local file:

// Add event listener to the file input
// Note: This will not fire twice if the user opens File A, then re-opens file A
// To detect re-opening a file you will need to clear the input
// after the file is read so that it "changes" upon re-opening
document.getElementById('open-file').addEventListener('change', handleFileOpen, false);

// First we create the function handler that fires when our input is changed
function handleFileOpen(e) {
    var file = e.target.files[0]; // Get first file selected

    // Load file using file reader function
    loadFile(file);
}

function loadFile(file) {    
    // Create file reader and relevant Ace code
    var reader = new FileReader();
    reader.onload = function(e) {
        // Get text contents of file
        var data = e.target.result;

        // Update Ace Editor with loaded data
        editor.setValue(data, -1);
    };

    // Now that we defined the function we want to run, read the file
    reader.readAsText(file);
}

The -1 in the setValue() function means place cursor at the beginning of the file (top) - 1 would be the bottom.

There are tons of events and properties you can hook into and mess in order to tweak this editor to your exact liking. They are all extremely straight forward and easy to use so if you're undecided, it's worth the time to try it out.

I wasted 2 days trying to get clusterize + highlightjs to work with my setup and gave up finally and replaced that entire setup with Ace in less than a day. Really impressed with editor so far!

Here's a link to their "How-to Guide": https://ace.c9.io/#nav=howto
and their API reference (which is extremely useful): https://ace.c9.io/#nav=api