WYSIWYG Editor-Tabellen einfügen, Probleme mit appendChild() oder ähnlichem

**reallife** · 22.03.2006, 09:16

Re: WYSIWYG Editor-Tabellen einfügen, Probleme mit appendChild() oder ähnlichem

Original geschrieben von bajana

Habe dann noch andere Varianten versucht, z.B.

Code:

e.contentWindow.document.execCommand('insertParagraph', false, 'Tabelle1'); e.contentWindow.document.getElementByID('Tabelle1').appendChild(table);

Aber ich komme einfach nicht weiter, hat jemand vielleicht einen Tipp, wie ich die Tabelle in den Editor bekomme?

Das Element mit der ID Tabelle1 ist wohl eine Tabelle, oder? Wenn ja, eine Tabelle in eine Tabelle zu hängen entspricht nicht ganz des Objektaufbaus einer Tabelle. Also:

Code:

<table>
  <tbody>
     <tr>
        <td>
         </td>
     </tr>
   </tbody>
   <table>
     <tbody>
        ....
     </tbody>
   </table>
 </table>

Wenn dann müsstest du es in ein TD packen oder in das übergeordnete Element, welches Tabellen aufnehmen kann.

**bajana** · 22.03.2006, 09:25

Ne, Tabelle1 habe ich den Absatz benannt, den ich mit

Code:

e.contentWindow.document.execCommand('insertParagraph', false, 'Tabelle1');

einfüge, oder kann ich den Absatz damit gar nicht benennen? Ich dachte immer das dritte Argument gibt dem neuen Element diese ID?
Also die TAktig war in diesem Fall einen neuen Absatz einzufügen und diesem dann das Kind Table zuzuweisen.

**wahsaga** · 22.03.2006, 09:51

Original geschrieben von bajana
Also die TAktig war in diesem Fall einen neuen Absatz einzufügen und diesem dann das Kind Table zuzuweisen.

Falls du mit Absatz ein P meinst - das darf kein TABLE enthalten.

**bajana** · 22.03.2006, 09:55

Warum darf ein P kein Table enthalten?

Code:

<p>
<table>...</table></p>

Geht doch auch, oder?
Oder habe ich appendChild insgesamt total falsch verstanden?

**prego** · 22.03.2006, 10:00

Um einem Objekt/Element eine ID zu geben nutze setAttribute().

**reallife** · 22.03.2006, 10:04

Also folgender Test funktioniert bei mir im IE & im MOZ:

Code:

<script type="text/javascript">
	window.onload = function(e)
	{
		var oBody = document.getElementsByTagName('BODY').item(0);
		var oP = document.createElement('P');
		var oTable = document.createElement('TABLE');
		var oTBody = document.createElement('TBODY');
		var oTR = document.createElement('TR');
		var oTD = document.createElement('TD');
		var oText = document.createTextNode('Table in einem Absatz');
		oTD.appendChild(oText);
		oTR.appendChild(oTD);
		oTBody.appendChild(oTR);
		oTable.appendChild(oTBody);
		oP.appendChild(oTable);
		oBody.appendChild(oP);
	}
</script>

**bajana** · 22.03.2006, 10:04

Original geschrieben von prego
Um einem Objekt/Element eine ID zu geben nutze setAttribute().

Aber wie spreche ich das ELement an, wenns noch keine ID hat?

**bajana** · 22.03.2006, 10:35

@reallife: Super, das hat mir echt weiter geholfen, ganz perfekt ists zwar noch nicht, aber von hier aus, komm ich bestimmt weiter!

**prego** · 22.03.2006, 10:38

Original geschrieben von bajana
Aber wie spreche ich das ELement an, wenns noch keine ID hat?

PHP-Code:


oTable.setAttribute("id","meine_id");

Du erzeugst dir doch die Elemente. Warum solltest du sie also mit getElementsById (zb) irgendwo suchen sollen?

http://ichwill.net/chapter3.html

**Quetschi** · 22.03.2006, 10:40

Original geschrieben von bajana
Warum darf ein P kein Table enthalten?

Code:

<p> <table>...</table></p>

Geht doch auch, oder?

natürlich - schreiben kann man alles - ob's dann auch valides html ist, steht auf nem anderen Blatt

**reallife** · 22.03.2006, 10:41

Original geschrieben von bajana
@reallife: Super, das hat mir echt weiter geholfen, ganz perfekt ists zwar noch nicht, aber von hier aus, komm ich bestimmt weiter!

Bitte bitte, es sollte ja auch nicht die perfekte Lösung sein, sondern eher eine Denkhilfe

**wahsaga** · 22.03.2006, 11:27

Original geschrieben von bajana
Warum darf ein P kein Table enthalten?

Warum ist die Banane krum?

Deswegen:
http://de.selfhtml.org/html/referenz/elemente.htm#p
http://www.w3.org/TR/1999/REC-html40...t.html#h-9.3.1

**bajana** · 23.03.2006, 11:46

Also mein programm hat jetzt soweit erfolg, nochmal der jetzige Code:

Code:

function insertTable
{  
    var e = document.getElementById('editorB<?php echo $j ?>'); 
    var oP = e.contentWindow.document.createElement('P');
    rowstext = prompt("enter rows");
    colstext = prompt("enter cols");
    rows = parseInt(rowstext);
    cols = parseInt(colstext);
    if ((rows > 0) && (cols > 0)) {
      table = e.contentWindow.document.createElement("table");
      table.setAttribute("border", "1");
      table.setAttribute("cellpadding", "2");
      table.setAttribute("cellspacing", "2");
      tbody = e.contentWindow.document.createElement("tbody");
      for (var i=0; i < rows; i++) {
        tr =e.contentWindow.document.createElement("tr");
        for (var j=0; j < cols; j++) {
          td =e.contentWindow.document.createElement("td");
          br =e.contentWindow.document.createElement("br");
          td.appendChild(br);
          tr.appendChild(td);
        }
        tbody.appendChild(tr);
      }
      table.appendChild(tbody);
      oP.appendChild(table);
      e.contentWindow.document.appendChild(oP);
}}

Das einzige Problem, das jetzt noch bleibt: Ich würde die Tabelle gerne an einer bestimmten Stelle einfügen, so landet sie immer links oben im Editor, man kann sie dann zwar woanderst hin ziehen, aber die obere bleibt trotzdem erhalten, bei der Umwandlung in HTML verschwindet sie allerdings dann. Nur das Ziel wäre eben, dass die Tabelle gleich an der richtigen Stelle landet, also dort, wo der Cursor steht.

Wenn ihr mir da nochmal weiterhelfen könnten wäre klasse.

WYSIWYG Editor-Tabellen einfügen, Probleme mit appendChild() oder ähnlichem