1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
| <html>
<head>
<link href="highlight.js/styles/idea.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="highlight.js/highlight.pack.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script>
//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;
}
//Fonction appelée onKeyUp sur le <pre>
function test(){
position = getCharacterOffsetWithin(window.getSelection().getRangeAt(0), $('aa'));
$('aa').update(hljs.highlight('sql', $('aa').innerHTML.stripTags()).value);
setPosition(window.getSelection().getRangeAt(0), $('aa'), position);
}
//Fonction getCharacterOffsetWithin que j'ai bidouiller pour faire ce que je voulait ;) mais je comprend tjr par comment elle fonctionne.
function setPosition(range, node, position) {
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;
1 : 1;
},
false
);
var charCount = 0;
while (treeWalker.nextNode()) {
charCount += treeWalker.currentNode.length;
if(charCount > position){
stratChar = (charCount - treeWalker.currentNode.length);
position = position - stratChar;
var range = document.createRange();
range.setStart(treeWalker.currentNode, position);
range.setEnd(treeWalker.currentNode, position);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
return;
}
}
if (range.startContainer.nodeType == 3) {
charCount += range.startOffset;
}
return charCount;
}
</script>
</head>
<body>
<pre class="code" id="aa" contenteditable="true" onKeyUp="test();">
select filed1, field2
from table
where blablabla = "eee"
group by filed2
</pre>
<script>
$('aa').update(hljs.highlight('sql', $('aa').innerHTML).value);
</script>
</body></html> |
Partager