execCommand InsertImage

[toney]

Hallo,

ich versuche gerade mir JavaScriptselbst etwas näher zu bringen und möchte dazu einen eigenen Rich Text Editor "basteln". Normale Formatierungen wie bold, italics etc. funktionieren dabei auch recht gut, aber nun komme ich an ein (wahrscheinlich) kleines Problem.

Ich möchte in ein contenteditable div per Button ein Bild einfügen. Dazu öffnet sich bei Klick auf Button 1 ein kleines Popup, in dem ein input für eine Bild-URL ist. Trägt man nun dort eine URL ein und klickt auf Button 2 ("insert"), dann soll dieses Bild direkt in das contenteditable div geschrieben werden. An sich funktioniert das auch. Mein Problem dabei ist, dass beim Öffnen des Popup der Curser "verschwindet", also das div nicht mehr fokussiert ist. Ich trage also einen Link ein, klicke auf "insert" und es passiert nichts. Wenn ich nochmal in das div klicke und dann auf "insert", dann erscheint auch das Bild.

Ich muss also irgendwie dafür sorgen, dass das div weiterhin im Fokus bleibt und der Cursor weiterhin an der selben Stelle blinkt. Ich habe schon eine Weile gegoogelt, aber irgendwie hat noch nichts so richtig funktioniert. Kann mir hier jemand eine relativ einfache Möglichkeit zeigen und evtl. etwas beschreiben? Wäre dafür sehr dankbar!

Viele Grüße,
toney

 

[threadi]

Nutzt Du zum Hinzufügen des Bildes ein JavaScript? Dann ergänze bei diesem noch focus() für das input-Feld. Beispiel:

document.getElementById("editable").focus();

 

[toney]

Funktioniert so leider nicht. Sobald ich in das input-Feld für die Bild-URL klicke ist der Focus weg. Wenn ich den Focus bei onblur setze ist der Cursor ganz am Anfang des contenteditable div, was auch leider nicht hilft.

Aber ist jetzt auch unwichtig, ich werde das ganze anders umsetzen.

Trotzdem vielen Dank ;)