tinyMCE簡單語法突出顯示

Question

我想在tinyMce編輯器中突出顯示一個簡單的實時語法。 我想爲文本中的每個#{keyword}和#{more keywords}突出顯示（更改背景或文本的顏色）。關鍵字只能包含字母，數字和點（。）。 我不知道我的想法是好的：

• 綁定到編輯器
• 刪除的<span class="code">#{keyword}</span>（正則表達式）所有出現
• 找到所有＃{}關鍵字與＃替換它們的onChange事件{發現關鍵詞}

（CSS類code會背景設置爲某個顏色）

任何想法如何解決這個問題？

Answer 1

綁定到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; 
}