代码之家  ›  专栏  ›  技术社区  ›  Rob Paisley

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

  •  1
  • Rob Paisley  · 技术社区  · 14 年前

    我希望在保留空白的网页中实现实时diff。

    我以前也做过类似的工作,在IE6中使用Tinymce和JQuery的组合(该项目需要),但它没有保留空白。(本来不应该这样做,但我没有添加任何东西来让它这样做,只是这样做了)。Tinymce并不是我处理纯文本时的理想选择,Tinymce是一个支持富文本的Wysiwyg风格的编辑器。它的大部分功能没有被使用,很难禁用。

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

    $('frame诳u modified').contents().find('诳editor').text())

    显示大量行信息(123456789101112等)以及光标所在的行,但不显示其余行。我还不知道如何应用/修改与之相关的样式。

    假设用户键入foo,我想将其包装,使其显示为<span class=“bar”>foo</span>。要获得这种功能,最简单的解决方案是什么?

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

    1 回复  |  直到 14 年前
        1
  •  0
  •   Thariama    14 年前

    您可以对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);
      }
    })