• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Nach eingefügten DIV ein BR oder P machen

G

gd0123456

Mitglied
hi,

Problem. Sobald ich das Div erstellt habe, komm ich aus dem Div nicht heraus wenn nicht vorher eine Leerzeile erstellt wurde. Somit wird immer der Hintergrund gelb sein. Also brauche eine Möglichkeit das DIV zu beenden.


Es soll einfach möglich sein das iFrame in zwei Spalten aufzuteilen. Oder gibt es noch eine andere Möglichkeit?

var doc = document.getElementById("frame").contentWindow.document;
if(document.getSelection)
{
var range = doc.getSelection().getRangeAt(0);
var nnode = doc.createElement("div");
var inhalt = doc.createTextNode("test");
nnode.setAttribute('id','div');
nnode.appendChild(inhalt);
nnode.setAttribute('style','background-color: #fff000; width:100px;');
//Einfügen des Knotens
range.surroundContents(nnode);

}
 

Anhänge

  • Unbenannt.png
    Unbenannt.png
    3,3 KB · Aufrufe: 10
Werbung:
Werbung:
ok. also ich schreibe einen Editor, mit dem man HP machen kann. Jetzt geht es darum, dass man die Seite auf zwei Spalten aufteilt. Mein Problem ist jetzt. Sobald ich ein DIV hinzufüge, bleibe ich mich mit dem Cursor im DIV gefangen und kann nicht mehr heraus. Heißt das erstellte DIV wird immer größer und größer. Kann also das Spaltenlayout welches ich mit dem DIV machen wollte nicht beenden.

Hab es mit einem Tabelle ausprobiert. Dann bleibe ich eben im Table gefangen und kann nicht mehr aus layout raus.

Safari und Chrome sind die einzigen die es mir ermöglichen vor und nach der Tabelle was einzuüfgen. Sprich der Cursor ist außerhalb des Tables.

Hoffe ich hab es jetzt mal besser erklärt.
 

Anhänge

  • Unbenannt.png
    Unbenannt.png
    7,9 KB · Aufrufe: 10
Zuletzt bearbeitet:
Im DIV gefangen - der Alptraum jedes Webentwicklers! :eek:

Spass beiseite: Gestattest du uns, einen Blick auf deinen Editor zu werfen? Zumindest mir mangelt es an Vorstellungskraft, um dein Problem zu rekonstruieren.
 
<!-- Diese Datei wird in einem iframe geladen welches editierbar ist -->

So es wird eine Tabelle eingefügt. Mir gelingt es aber nun nicht außerhalb der Tabelle zu springen. Man kann nur die Tabelle vergrößern, aber nicht aus die Tabelle raus um z.b. eine Überschrift oder sonst was zu machen.

Hoffe dass es jetzt verständlicher ist ggg.

<!DOCTYPE html>
<head>
<script language = 'JavaScript'>
function lade()
{
document.body.contentEditable='true';
document.designMode='on';
void 0;
}

</script>
</head>
<body onLoad = "lade();">
<table style = 'border-style: solid; border-width: 1px; border-color:#ff0000;'>
<tr>
<td>
test
</td>
<td>
test2
</td>
</tr>
</table>
</body>

</html>
 
Werbung:
Ah, jetzt verstehe ich dein Problem.

Der Textmarker springt nicht aus der Tabelle, weil es außerhalb dieser keinen editierbaren Content gibt.

Du brauchst also ein Skript, dass Clicks außerhalb der Tabelle erfasst und folglich den Body des eingebundenen HTML-Dokuments um ein P-Element erweitert.
 
Nach langem hin und her habe ich es endlich geschafft das ein Table eingefügt wird. Eine Frage noch wie kann ich es machen dass er mir genau beim selektierten Text die Tabelle einfügt?

function insertBlock()
{

var doc = document.getElementById("frame").contentWindow.document;
var p = doc.createElement("br");
if(doc.getSelection)
{
var range = doc.getSelection().getRangeAt(0);
myParent=document.getElementById("frame").contentWindow.document.body;
myTable=document.createElement("table");
myTBody=document.createElement("tbody");
myRow=document.createElement("tr");
myCell=document.createElement("td");
myText=document.createTextNode("Die erste Zelle");
myCell.appendChild(myText);
myRow.appendChild(myCell);

myCell=document.createElement("td");
myText=document.createTextNode("Die zweite Zelle");
myCell.appendChild(myText);
myRow.appendChild(myCell);
myTBody.appendChild(myRow);
myTable.appendChild(myTBody);
myTable.setAttribute("border", "2");
myTable.setAttribute("cellspacing", "2");
myParent.appendChild(myTable);

//range.surroundContents(myTable);

}
doc.body.appendChild(p);

}

Mit Range.surroundContents geht es nicht, da er mir wenn es nach firebug geht nur das table tag aufbaut aber kein tr und td. Sprich er erstellt mir keine Tabelle. Gibt es noch eine Möglichkeit?
 
gd0123456 schrieb:
[...] wie kann ich es machen dass er mir genau beim selektierten Text die Tabelle einfügt? [...] Mit Range.surroundContents geht es nicht, da er mir [...] nur das table tag aufbaut aber kein tr und td. Sprich er erstellt mir keine Tabelle.
Zum Vergrößern anklicken....
Mit range.surroundContents(myTable) schreibst du den selektierten Text in <table> und überschreibst somit alle Childnodes wie <tbody> etc. pp.

Was genau soll mit dem selektierten Text passieren?
 
Werbung:
Ah ok. dann ist klar warum ich keinen table habe.
Ich möchte zwischen zwei Zeilen oder aktuellen cursor position zb einen table einfügen. Jetzt passiert es immer am ende.
 
Also ein riesengroßes Dankeschön für eure Geduld und Nerven. Jetzt funktioniert es genau so wie ich es haben möchte. Danke Danke Danke.

Nein, die Range Api werde ich mir jetzt mal anschauen
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben