javascript - 突出显示/设置文本区域格式

Question

我希望在保留空白的网页内实现实时差异。

我过去在 IE6 中使用 TinyMCE 和 JQuery 的组合做过类似的事情(该项目需要)，但它没有保留空格。 (本来不应该这样做，但我没有添加任何东西来让它做到这一点，它只是这样做了)。 TinyMCE 并不理想，因为我处理的是纯文本，而 TinyMCE 是支持富文本的 WYSIWYG 风格编辑器。它的大部分功能都没有被使用，并且很难禁用。

我已经浏览了 http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors 上列出的大部分项目。 EditArea 看起来很有希望，但我似乎无法确定哪些元素实际上用于显示文本。

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

显示大量行信息(123456789101112 等)以及光标所在行，但不显示其余部分。我还没有弄清楚如何应用/修改与之相关的样式。

假设用户输入 foo，我想将其包装起来，以便它动态显示为 foo 。获得此类功能的最简单的解决方案是什么？

IE8是该项目的目标浏览器。

Answer 1

您可以对 onKeyDown 事件执行一些操作(在您自己的插件之一中)。如果您的光标已位于新范围内，请添加刚刚输入的字符，否则使用输入的字符创建一个新范围。像这样的事情:

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