Highlight/Format textareas

Question

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()

displays 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.

Answer 1

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);
  }
})