tinyMCE简单语法突出显示

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

绑定到编辑器
删除的<span class="code">#{keyword}</span>（正则表达式）所有出现
找到所有＃{}关键字与＃替换它们的onChange事件{发现关键词}

（CSS类code会背景设置为某个颜色）

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

来源

2010-08-06 redman

绑定到onChange事件似乎没问题，但您应该考虑使用onKey ---事件。我希望下面的代码片段将是有益的给你：

CSS（在content_css即定义）：

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

JS helpfunctions：

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

来源

2010-08-11 12:00:03 Thariama

tinyMCE简单语法突出显示

回答

相关问题