nicht angemeldet
Also der das Auslesen scheint bei dieser Variante zu funktionieren:
<html>
<body>
<script language="Javascript">
var userSelection;
if (window.getSelection) {
userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
userSelection = document.selection.createRange();
}
function getRangeObject(selectionObject) {
if (selectionObject.getRangeAt)
return selectionObject.getRangeAt(0);
else { // Safari!
var range = document.createRange();
range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
return range;
}
}
function getSel()
{
var editor = document.getElementById('editor');
var rangeObject = getRangeObject(userSelection);
var el = userSelection.anchorNode.parentNode; // anchor should be #text, parent should be SPAN or PRE
var count = 0;
var el1;
if(el.nodeName == 'PRE') {
count = editor.textContent.length;
console.log('This happens when cursor is at absolute last postion');
}else if (el.nodeName == 'SPAN'){
count = userSelection.anchorOffset;
el1 = editor.firstElementChild;
while (el1 != el){
count += el1.textContent.length;
el1 = el1.nextElementSibling;
}
}else{
count = 0;
console.log('This happens when the cursor is at absolute first position');
}
console.log('sel start is: ' + count);
return count;
}
function setSel(count)
{
}
</script>
</body>
<pre id="editor" contenteditable="true" onkeyup="change();"><span class="command">echo </span><span class="variable">$test</span></pre>
<input type="text" id="setSel"/><input type="button" value="setzen" onclick="set(document.getElementById('setSel').value);" />
</html>
Jetzt versuch ich noch das setzen des Cursor hinzubekommen. Da hab ich das Prinzip allerdings noch nicht verstanden.
Einzigstes "Aber" ist, jedes druckbare Zeichen muss sich in einem SPAN befinden! Auch Leerzeichen und Zeilenumbruch (wenn nicht </br>).
Gruß
Frank