nicht angemeldet
WYSIWYG/ selection.createRange()
Hallo!
Ich baue momentan einen WYSIWYG-Editor und bin gerade dabei Tabellen auf Knopfdruck einzufügen. Das Problem ist, sobald ich im Iframe Text stehen habe, einen Teil davon markiere, löscht er den kompletten Text, nicht nur das markierte und setzt dann die Tabelle dafür hin.
Zum besseren Verständnis, hier der Quellcode:
<html>
<head>
<script>
function Init() {iView.document.designMode = 'On';}
function CreateTable(){
var zeile = prompt("Bitte geben Sie die Zeilenanzahl der Tabelle an","1");
var spalte = prompt("Bitte geben Sie die Spaltenanzahl der Tabelle an","1");
var text='<table border="1">';
for (i=0;i<zeile;i++){
text+='<tr>';
for (j=0;j<spalte;j++){
text += '<td></td>';
}
text+='</tr>';
}
text+='</table>';
iView.document.body.innerText = iView.document.body.innerHTML;
iView.document.selection.createRange().text = text;
iView.document.body.innerHTML = iView.document.body.innerText;
}
</script>
</head><body onLoad="Init();">
<img class="butclass" src="http://localhost/createtable.gif" alt="Tabelle" title="Tabelle einfügen" onClick="iView.focus(); CreateTable();"/>
<iframe id="iView" style="width:100%; height:450px;"></iframe>
</body></html>
Vielleicht weiss einer von euch weiter.
Thomas
-
Hi Thomas,
also folgendes habe ich gerade ausprobiert:
<html>
<head>
<script>
function Init() {iView.document.designMode = 'On';}function CreateTable(){
var zeile = prompt("Bitte geben Sie die Zeilenanzahl der Tabelle an","1");
var spalte = prompt("Bitte geben Sie die Spaltenanzahl der Tabelle an","1");
var text='<table border="1">';
for (i=0;i<zeile;i++){
text+='<tr>';
for (j=0;j<spalte;j++){
if ((i==0) && (j==0)) {
text += '<td>'+iView.document.selection.createRange().text+'</td>';
} else {
text += '<td></td>';
}
}
text+='</tr>';
}
text+='</table>';
iView.document.selection.createRange().pasteHTML(text);
}function showsource() {
iView.document.body.innerText = iView.document.body.innerHTML;
}function showhtml() {
iView.document.body.innerHTML = iView.document.body.innerText;
}
</script>
</head><body onLoad="Init();"><img class="butclass" src="http://localhost/createtable.gif" alt="Tabelle" title="Tabelle einfügen" onClick="iView.focus(); CreateTable();"/>
<a href="#" onclick="showsource();">|| Source anzeigen</a>
<a href="#" onclick="showhtml();">|| Text anzeigen</a>
<iframe id="iView" style="width:100%; height:450px;"></iframe>
</body></html>Ich hab zwei Links in die Funktionsleiste gepackt, zum Testen, schalt mal auf Source anzeigen, tipp dann mal etwas wie
<i>kursiv</i> nicht kursiv
Dann machst du Text anzeigen --> er zeigt den ersten Teil kursiv. Nun markierst du den hinteren Teil und machst die Tabellen-Funktion. Er wird nun genau diesen Teil in die erste Zelle der Tabelle packen (siehe if-Bedingung in der text-Schleife).
Der Witz an dem Table ist, dass dein Weg zu umständlich war, mach einfach statt der Hin-Und-Herwandlerei ein .pasteHTML auf der Selection.MfG
Rouven--
-------------------
ss:) zu:) ls:& fo:) de:< va:{ ch:? sh:) n4:( rl:? br:$ js:| ie:) fl:(