nicht angemeldet
Hallo und nochmal herzlichen Dank an alle! Ihr habt mir wirklich auf die Sprünge geholfen.
Zu den Bedenken von Felix Riesterer:
Ich will gar nicht die Arbeit der bisherigen Entwickler in Frage stellen oder etwas "neu" oder "besser" machen, aber ich bin halt ein notorischer Selbermacher und will auf jeden Fall verstehen, was auf meinem Server läuft. Ein kleines und weniger funktionales selbstgemachtes Tool ist mir lieber als ein großes, wunderbar funktionales und dazu noch kostenloses, das ich aber nicht verstehe und dessen Funktion ich einfach hinnehmen muß. Und da dies ja ein Autorenforum mit Themenbereich "Programmiertechnik" ist, denke ich, man kann für alle Interessierten durchaus mal erörtern, wie man RTE realisiert.
Das soll jetzt keine Kritik an Deiner Auffassung sein - ich verstehe Deine Bedenken einfach als hilfreichen Tipp für die Praxis, und möchte hier nur erklären, warum ich es in diesem Fall trotzdem erstmal selbst versuche.
So, nun meine nächste Frage. Schaut Euch mal folgenden Code an:
(läuft nicht im Internet Explorer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
[code lang=javascript]function insert(aTag, eTag) {
var input = document.getElementById("Blatt");
input.focus();
var rrange = window.getSelection ();
var startnode = rrange.anchorNode;
if (startnode == document.getElementById("Blatt"))
{alert ("im Blatt");}
else
{alert("anderswo");};
var start = rrange.anchorOffset;
alert(start);
var endnode = rrange.focusNode;
var ende = rrange.focusOffset;
var insText = rrange.toString.substring(start, ende);
alert (insText);
document.getElementById("Blatt").firstChild.replaceData(start, (ende-start), (aTag + insText + eTag));
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
~~~//-->
</script>
</head>
<body bgcolor=#cccccc>
<table border=2 cellpadding="0px" cellspacing="0px" style="width:95%">
<tr height="60px">
<td align="center" style="background-color:#eeeeee;" name="Table" ID="Table">
Test Test Test
<input type="button" value="Einfügen" onClick="insert('[i]', '[/i]')">
</td>
</tr>
</table>
<br>
<!-- \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* -->
<div ID="Blatt" name="Blatt" contenteditable="true" style="overflow:scroll; height:400px; width:95%; border:4px inset grey; background-color:#ffffff">Hier Seitentext eingeben
</div>
<!-- \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* -->
Test Test Test
</body>
</html>[/code]
Zur besseren Übersichtlichkeit habe ich hier nur den fraglichen Bereich wiedergegeben, im Originalscript steht noch eine Browserweiche und eigener Code für den Internetexplorer.
Das Problem:
Ich würde gerne feststellen in welchem Node die Markierung beginnt. Dies geschieht im Abschnitt:
~~~javascript
var startnode = rrange.anchorNode;
if (startnode == document.getElementById("Blatt"))
{alert ("im Blatt");}
else
{alert("anderswo");};
(zum Test wird hier einfach ein Alert ausgegeben).
Nun sollte eigentlich im ersten Fall, wenn die Markierung innerhalb der Schreibfläche (Div mit ID "Blatt") liegt, die Abfrage ein positives Ergebnis haben, also der Alert "Im Blatt" ausgegeben werden, falls die Markierung anderswo auf der Seite liegt, sollte die Abfrage negativ sein und der Alert "anderswo" ausgegeben werden. Tatsächlich verhält sich das Script, wenn man es im Browser testet, aber genau umgekehrt.
Wahrscheinlich ist es ein ganz einfacher, dummer Fehler, aber ich stehe wirklich auf dem Schlauch...
Im Moment sieht das wie ein nebensächliches Problem aus, aber später im Script wird die Abfrage des Nodes mit der Markierung noch ziemlich wichtig.
Vielen Dank und beste Grüße
Bene