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，我想将其换行以便显示为＆lt; span class =“bar”＆gt; foo＆lt; / span＆gt;在飞行中。获得这种功能的最简单的解决方案是什么？

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

突出显示/格式textareas

1 个答案: