Highlight/Format textareas

I'm looking to implement a live diff inside a webpage that preserves whitespace.

I've done something similar in the past using a combination of TinyMCE and JQuery in IE6 (required for that project) but it didn't preserve whitespace. (It wasn't supposed to, but I didn't add anything to make it do that, it just did). TinyMCE wasn't ideal as I was dealing with plain text, and TinyMCE is a WYSIWYG style editor supporting rich text. Most of it's functionality wasn't being used and is/was hard to disable.

I've looked through most of the projects listed at http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors. EditArea seemed promising, but I cannot seem to determine which elements are actually being used to display the text.

$('#frame_modified').contents().find('#editor').text()

displ开发者_如何学Goays a lot of the line information (123456789101112 and so on) along with the line the cursor is under, but not the rest. I haven't figured out how to apply/modify the styles associated with that.

Lets say the user types foo, I'd like to wrap it so it displays as <span class="bar">foo</span> on the fly. What's the simplest solution to go about getting this sort of functionality?

IE8 is the target browser for this project.

You could do some action on the onKeyDown event (in one of your own plugins). If your cursor is already in a new span add the character just typed in else create a new span with the character entered. Something like this:

ed.onKeyDown.add(function(ed,evt){
  char = getChar(evt.keyCode); // your function to get the character to be inserted depending on evt.keyCode

  // if span already exists
  node = ed.selection.getNode();
  if (node.nodeName.toLowerCase() == 'span' && node.className == 'myclass'){
     node.innerHTML += char;
  }
  // new span
  else {
    doc = ed.getDoc();
    new_element = doc.createElement('span');
    new_element.className = "myclass";
    new_element.innerHTML = char;
    tinymce.activeEditor.mceInsertContent(new_element);
  }
})