execcommand auf textrange()?

[moritzmoritzz]

Hallo,

ich stehe vor einem Problem .. und zwar möchte ich von einem range mit Hilfe von execcommand ein '<span>'-Element um die aktuelle Selection machen ... habe folgenden Code:

var range = this.editArea.contentWindow.getSelection().getRangeAt(0);
		
var selection = this.editArea.contentWindow.getSelection();
		
selection.removeAllRanges();
selection.addRange(range);
		
range.execCommand('inserthtml',false,'<span>'+selection+'</span>');

was mache ich falsch? Geht das überhaupt ?

Moritz

 

[abuzze]

Bevor du das Rad neu erfindest, schau dir mal surroundContents an.


Hier eine Demo : http://jsfiddle.net/xhKPA/

 

[moritzmoritzz]

Vielen Dank für deine Antwort.

Eine letzte Frage: wenn ich jetzt ganz am Ende des Textes bin gibt es ja keine Selection ("") .. möchte aber, dass trotzdem ein Span drumgemacht wird und der Cursor in den Span gesetzt wird .. geht das irgendwie?

Das wäre echt cool!

 

[abuzze]

Wenn du am "Ende des Textes" bist, wird auch ein span herumgemacht, und der cursor ist innerhalb dieses span's.

 

[moritzmoritzz]

welchen browser benutzt du? Im Safari scheint das nicht zu funktionieren ..


Edit: habe es eben auch im Mozilla und Chrome getestet, wenn ich keinen text ausgewählt habe focusiert der nicht in den Span .. im Span ist auch gar nichts ..

 

[abuzze]

welchen browser benutzt du? Im Safari scheint das nicht zu funktionieren ..


Edit: habe es eben auch im Mozilla und Chrome getestet, wenn ich keinen text ausgewählt habe focusiert der nicht in den Span .. im Span ist auch gar nichts ..

Ich habe es getestet in Safari,IE9,Opera,FF,Chrome, es funktioniert überall.

Wenn du überhaupt nicht in den editor geklickt hast/ihn fokussiert hast, gibt es dort auch keine Ranges in der selection. Also musst du dafür sorgen, daß dort Ranges vorhanden sind.

Aber dann solltest du dich besser ausdrücken, denn "wenn ich jetzt ganz am Ende des Textes bin" ist ein Indiz dafür, daß du den Editor bereits "betreten" hast, und dann gibt es auch einen Range in der selection.

Und spamme mich bitte nicht mit PMs voll, dies ist ein Forum.

 

[moritzmoritzz]

Aber dann solltest du dich besser ausdrücken, denn "wenn ich jetzt ganz am Ende des Textes bin" ist ein Indiz dafür, daß du den Editor bereits "betreten" hast, und dann gibt es auch einen Range in der selection.

Ich habe in den editor geklickt .. ganz ans Ende des letzten "text" also hinter dem aller letzten 't' .. jetzt klicke ich den button und er ezeugt mir ein neuen Span .. hinter dem letzten 't' aber er focusiert nicht da rein .. sondern ist nach wie vor hinter dem letzten 't' und vor dem Span. Verstehst du? Sieht es bei dir anders aus?

Mo

Ich bin schon auf einem guten Weg jetzt..

Also habe folgenden Code:

var editor = this.editArea.contentWindow,
			selection = editor.getSelection(),
			range = selection.getRangeAt(0),
			newNode = editor.document.createElement("span");
			newNode.setAttribute("id", 'caret');
			
		range.surroundContents(newNode);
		
		var parent = this.editArea.contentWindow.getSelection().anchorNode.parentNode;
		$(parent).children('#caret').css('font-size','20pt');
		$(parent).children('#caret').removeAttr("id");

Wie kann ich den Cursor dazu bringen in den Span zu springen? Wenn mir das jemand sagen kann wäre mein Problem gelöst !

Mo