tinyMCE coloration syntaxique simple

Question

Je veux une coloration syntaxique simple en temps réel dans un éditeur tinyMce. Je veux mettre en évidence (changer l'arrière-plan ou la couleur du texte) pour chaque #{keyword} et #{more keywords} dans le texte. Le mot-clé ne peut contenir que des lettres, des chiffres et des points (.). Je ne sais pas si mon idée est bonne:

• se lient à l'événement onChange de l'éditeur
• supprimer toutes les occurrences de <span class="code">#{keyword}</span> (regex)
• trouver tous les mots clés # {} et les remplacer par # {mot-clé trouvé}

(classe code css aurait mis à fond un peu de couleur)

Toute idée comment résoudre ce problème?

Answer 1

La liaison à l'événement onChange semble correcte, mais vous devriez également envisager d'utiliser les événements onKey. J'espère que le code suivant sera helpfull pour vous:

css (à définir dans content_css ie):

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

sur appel événement:

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