How can I replace all the textarea fields in my browser with this?

[Widdershin]

Regardless of whether or not it is a good idea.

[emnh]

I want to do something similar, replace CodeMirror in JSBin.

You'd need to provide synchronization between buffer read/write and a DOM node. Enumerate textareas and replace with vim canvas, set width height same as textarea, and update the textarea DOM node on vim BufWrite. Maybe also trigger change events for DOM node, I don't know if that happens when you change it with JS.

You can hook the vim buffer read/write to JS as follows:
:au BufRead * :!console.log("read %");
:au BufWritePost * :!console.log("write %");

You'd also need to provide a more local binding for the vim keyboard handler, as currently this is on document.keypress using preventDefault, thereby preventing other edits in the page.

I am working on a small .vimrc script that will synchronize with a DOM node. I'll paste it here once I'm done.

[emnh]

The following will append a DOM node with the filename as ID and file content as innerHTML on file write. On read it will overwrite the file with the contents of the DOM node before vim reads the file.

au BufReadPre * :
\ silent !var p = document.getElementById("%");
\ var data = null;
\ if (p \!== null) {
\   data = p.innerHTML;
\   if (data \!== null) {
\      FS.writeFile("%", data);
\   }
\ }

au BufWritePost * :
\ silent !var data = FS.readFile("%", { encoding: "utf8" } );
\ var p = document.getElementById("%");
\ if (p === null) {
\   p = document.createElement("pre");
\ }
\ p.id = "%";
\ document.body.appendChild(p);
\ p.innerHTML = data;
\ p.setAttribute("contenteditable", true);
\

[emnh]

I started writing a Firefox plugin for vim.js that replaces text area. It's a cool demo, but slow to load and takes lots of memory, so for normal use I would suggest one of the alternatives listed on the plugin page that can launch external vim and replace back the content on exit.

[coolwanglu]

@emnh Cool.Indeed memory usage would be an issue.

[coolwanglu]

@emnh we might further limit the features for an embedding version. For example, splitting might not be necessary.