Editeur de code intégré avec coloration syntaxique
Bonjour à tous,
Pour une projet j'ai besoin de développer un éditeur de code (dans l'exemple suivant du code SQL) avec une coloration syntaxique.
En cherchant un peut sur le net j'ai trouver une librairie qui fait plutôt bien le boulot pour la coloration : highlight.js
Voici le code qui permet la coloration (j'utilise le framework prototype.js. Pour info $('aa') est équivalent à document.getElementById('aa') et la méthode update(...) équivaut à un .innerHTML= ) :
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<pre class="code" id="aa" contenteditable="true" onKeyUp="test();">
select filed1, field2
from table
where blablabla
group by filed2
</pre>
<script>
$('aa').update(hljs.highlight('sql', $('aa').innerHTML).value);
<script> |
Jusque la pas de souci le code se colore correctement c'est même bien sympathique.
comme vous avez pu le voir, dans ma balise <pre> j'ai un attribut contenteditable="true" qui est le seul moyen de mettre en forme un texte éditable d'après ce que j'ai pu voir.
Mon problème est donc le suivant : Lorsque je rajoute une lettre dans mon code, je récupère la position du curseur, je fait un striptags pour supprimer la mise en forme, je rapplique la coloration mais je n'arrive pas a repositionner le curseur au bon endroit. j'ai cherché pendant des heures sans résultat.
Voici mon code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| //Fonction que j'ai trouvé sur un forum mais j'ai bien peur de ne pas bien la comprendre :
function getCharacterOffsetWithin(range, node) {
var treeWalker = document.createTreeWalker(
node,
NodeFilter.SHOW_TEXT,
function(node) {
var nodeRange = document.createRange();
nodeRange.selectNode(node);
return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
},
false
);
var charCount = 0;
while (treeWalker.nextNode()) {
charCount += treeWalker.currentNode.length;
}
if (range.startContainer.nodeType == 3) {
charCount += range.startOffset;
}
return charCount;
} |
Code:
1
2
3
4
5
6
| //Fonction appelée onKeyUp sur le <pre>
function test(){
position = getCharacterOffsetWithin(window.getSelection().getRangeAt(0), $('aa')); //Récupération de la position du curseur
$('aa').update(hljs.highlight('sql', $('aa').innerHTML.stripTagsSecific('span')).value); // Mise à jour du champ pour relancer la coloration
//Pour le moment, le curseur se repositionne au début de mon champ éditable. impossible de me replacer au bon endroit
} |
Voila j'espère avoir été clair et que quelqu'un pourra venir à mon aide.
