Mettre en surbrillance/Mettre en forme les zones de texte

Question

Je cherche à mettre en œuvre un diff en direct à l'intérieur d'une page Web qui préserve les espaces.

J'ai fait quelque chose de similaire dans le passé en utilisant une combinaison de TinyMCE et de JQuery dans IE6 (requis pour ce projet) mais cela n'a pas préservé les espaces. (Ce n'était pas censé le faire, mais je n'ai rien ajouté pour le faire faire, ça l'a fait). TinyMCE n'était pas idéal car je parlais de texte brut, et TinyMCE est un éditeur de style WYSIWYG supportant le texte enrichi. La plupart de ses fonctionnalités n'étaient pas utilisées et était/était difficile à désactiver.

J'ai regardé la plupart des projets listés au http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors. EditArea semblait prometteur, mais je n'arrive pas à déterminer quels éléments sont réellement utilisés pour afficher le texte.

$ ('# frame_modified'). Le contenu(). Find ('éditeur #'). Texte()

affiche un grand nombre de renseignements en ligne (123456789101112 etc.) ainsi que la ligne sous le curseur, mais pas le reste. Je n'ai pas compris comment appliquer/modifier les styles associés à cela.

permet de dire que les types d'utilisateurs foo, je voudrais l'envelopper de sorte qu'il affiche comme < span class = "bar" > foo </span > à la volée. Quelle est la solution la plus simple pour obtenir ce genre de fonctionnalité?

IE8 est le navigateur cible de ce projet.

Answer 1

Vous pouvez effectuer une action sur l'événement onKeyDown (dans l'un de vos propres plugins). Si votre curseur est déjà dans une nouvelle plage, ajoutez le caractère que vous venez de saisir sinon créez une nouvelle plage avec le caractère entré. Quelque chose comme ceci:

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