tinyMCE 简单语法高亮答案

【问题标题】：tinyMCE simple syntax highlightingtinyMCE 简单语法高亮
【发布时间】：2010-08-06 08:50:49
【问题描述】：

我想要在 tinyMce 编辑器中进行简单的实时语法高亮显示。我想为文本中的每个 #{keyword} 和 #{more keywords} 突出显示（更改文本的背景或颜色）。关键字只能包含字母、数字和点 (.)。不知道我的想法好不好：

绑定到编辑器的onChange事件
删除所有出现的<span class="code">#{keyword}</span>（正则表达式）
找到所有#{keyword}并将它们替换为#{found keyword}

（css 类 code 会将背景设置为某种颜色）

任何想法如何解决这个问题？

【问题讨论】：

标签： regex tinymce syntax-highlighting

【解决方案1】：

绑定到 onChange 事件似乎没问题，但您也应该考虑使用 onKey--- 事件。希望下面的代码sn-p对你有帮助：

css（即在 content_css 中定义）：

[current] {
background-color:yellow;
}
[changed] {
background-color:green;
}

js 帮助函数：

var select_current = function(node){
  unselect_current();
  node.setAttribute('current','true');
};

var unselect_current = function(){
  var n = ed.getBody().firstChild;
  while (n){
    if (n.nodeType == 1 && n.getAttribute('current'))
    {
      n.removeAttribute('current');
    }
    n = n.nextSibling;
  }
};

p_of = function(node) // returns p-Element of node
{
  while (node){
  if (node.nodeName == 'BODY') { return null; }
  if (node.nodeName == 'P')    { return node; }
    else { node = node.parentNode; }                    
  }
  return null;
}

事件调用：

var _node_changing = false;
console.log('onNodeChange: ', arguments);
if (!_node_changing && element.getAttribute('_mce_type') != 'bookmark'){
  _node_changing = true;
  var p = p_of(element);
  if (p){
    if (!p.getAttribute('current')){
    select_current(p);
    }               
  }
  _node_changing = false;
}

【讨论】：