BBCodes (Fortsetzung)

[Orlando]

Werte Gemeinde,

ich habe mein damaliges Beispiel unter Verwendung von Torstens Code umgekrempelt, jetzt tun sich neue Probleme auf.

Zwar funktioniert das Einfügen an der Cursorposition browserübergreifend, war aber bereits Text selektiert, wird dieser bei den BB-Codes nicht berücksichtigt. Die Funktion getSelectedText() ist noch die alte und beißt sich mit dem Rest.

Beispiel online
bbcode.js (altes Zeugs auskommentiert)
Zip gesamt

Wer kann mir das auseinanderdröseln?

Roland

[ChrisB]

Hi,

Zwar funktioniert das Einfügen an der Cursorposition browserübergreifend, war aber bereits Text selektiert, wird dieser bei den BB-Codes nicht berücksichtigt.

Was genau meinst du damit?

Ich hab jetzt mal nur mit dem Firebug unter FF 3.0.4 reindebuggt.
Was passiert, wenn ich TEXT markiert habe, und dann [I] verwende - ich erhalte [I]TEXT[/I]TEXT, und der Cursor wird um ein paar Zeichen hinter dem zweiten TEXT platziert.

Die Funktion getSelectedText() ist noch die alte und beißt sich mit dem Rest.

getSelectedText liefert lediglich das selektierte Textstück zurück, und das soweit ich sehen kann korrekt.

In addText allerdings an folgender Stelle

 else if(typeof input.selectionStart != 'undefined') // Firefox ************************  
 {  
 var start = input.selectionStart;  
 var end = input.selectionEnd;  
 var insText = input.value.substring(start, end);  
 input.value = input.value.substr(0, start) + theTag + insText + theClsTag + input.value.substr(end);  
 var pos;  
 if (insText.length == 0) {  
 pos = start + theTag.length;  
 } else {  
 pos = start + theTag.length + insText.length + theClsTag.length;  
 } 

enthält theTag bereits "[I]TEXT[/I]" und insText nach der Zuweisung auch noch mal "TEXT".
Das führt in der Zeile mit input.value = ... dazu, dass zu viel Text eingefügt wird, und im else-Zweig des nachfolgenden If dazu, dass pos (für die Platzierung des Cursors nach dem Einfügen) zu weit gesetzt wird.
Nimmt man an den beiden Stellen + insText bzw. + insText.length heraus, dann klappt das Einfügen eines I-Tags um den marktierten Text erst mal.

Ergebnis bezogen auf erwähnte FF-Version - der darüber liegende Zweig für MSIE benötigt ggf. analoge Korrekturen;
Und ich habe auch nur flüchtig geprüft, ob sich das evtl. in anderen Fällen negativ auswirkt. Dann könnte man nicht einfach wie oben den Code editieren, sondern müsste noch weitere Fallunterscheidungen treffen, wann insText benötigt wird und wann nicht.

MfG ChrisB

[Micha]

Hallo ChrisB,

getSelectedText liefert lediglich das selektierte Textstück zurück, und das soweit ich sehen kann korrekt.

Also im Opera funktioniert sie nicht. Er hängt sich an der 2. if-Bedingung if(message.isTextEdit){ auf. Sollte die wichtig sein für den IE, würde ich hier ggf. mit window.opera nachrüsten:

  
function getSelectedText(theForm) {  
	var message = theForm.message;  
	var selected = '';  
	if(navigator.appName=="Netscape" && message.textLength>=0 && message.selectionStart!=message.selectionEnd )  
		selected=message.value.substring(message.selectionStart,message.selectionEnd);  
	else if( typeof document.selection != "undefined" ) {  
		if(message.isTextEdit || window.opera){  
			message.focus();  
			var sel = document.selection;  
			var rng = sel.createRange();  
			rng.colapse;  
			if((sel.type == "Text" || sel.type == "None") && rng != null){  
				if(rng.text.length > 0) selected = rng.text;  
			}  
		}  
	}  
	return selected;  
}  

Das läuft zumindest im Opera 10. Mehr habe ich nicht getestet.

Mit freundlichem Gruß
Micha

[Orlando]

Vorab einmal danke!

Eure Anmerkungen sind eingebaut. Ich sehe aber, dass da noch viel mehr Fallen lauern, weil es sich insgesamt um furchtbaren Code handelt. Mir macht's nur bedingt Spaß, mich da durchzuhangeln. :-(

Wahrscheinlich wäre es einfacher, einen ausgereiften BBCode-Editor einzusetzen und diesen lediglich an die Bedürfnisse anzupassen. So viel an Funktionalität ist ja nicht gefordert:

• browserübergreifend
• Smileys hinzufügen
• Tags samt Inhalt hinzufügen
• markierten Inhalt mit Tags umschließen
• offene Tags schließen (IMHO optional)

Kennt ihr einen guten?

Roland

[Micha]

Hallo Orlando,

Kennt ihr einen guten?

Ich würde einfach bei einem OpenSource-Projekt spicken zB by mylittleforum.net und das übernehmen/modifizieren, was Dir zusagt.

Mit freundlichem Gruß
Micha

[Orlando]

Ich würde einfach bei einem OpenSource-Projekt spicken zB by mylittleforum.net und das übernehmen/modifizieren, was Dir zusagt.

So werde ich vorgehen, ist sicher einfacher als viel Mist aufzuräumen.

Danke so weit! Falls jemand noch einen Vorschlag hat, nur her damit. :-)

Roland

[Kai345]

[latex]Mae  govannen![/latex]

Also im Opera funktioniert sie nicht. Er hängt sich an der 2. if-Bedingung if(message.isTextEdit){ auf.

Wundert mich nicht. Zum einen wurde bei dieser If-Abfrage auf einen Vergleich per typeof-Operator verzichtet, was ein Script ohnehin abbrechen ließe, sollte die Eigenschaft/Methode nicht existieren; außerdem wurde Opera völlig unnötigerweise über das fast immer sehr unsinnige Browsersniffing if(navigator.appName=="Netscape"..) vom ersten Zweig ausgeschlossen, obwohl Opera diese Eigenschaften kennt.

Daher ist

Sollte die wichtig sein für den IE, würde ich hier ggf. mit window.opera nachrüsten:

[...]

mit

else if( typeof document.selection != "undefined" ) {

nicht sinnvoll.

function getSelectedText(theForm) {  
   var message = theForm.message;  
   var selected = '';  
   if(typeof message.textLength != "undefined" && typeof message.selectionStart != "undefined") {  
      alert("Zweig 1");  
      if (message.textLength>=0 && message.selectionStart!=message.selectionEnd ) {  
         selected=message.value.substring(message.selectionStart,message.selectionEnd);  
      }  
   }  
   else if( typeof document.selection != "undefined" ) {  
      alert("Zweig 2");  
      if(typeof message.isTextEdit != "undefined"){  
         message.focus();  
         var sel = document.selection;  
         var rng = sel.createRange();  
         rng.colapse;  
         if((sel.type == "Text" || sel.type == "None") && rng != null){  
            if(rng.text.length > 0) selected = rng.text;  
         }  
      }  
   }  
   return selected;  
}

funktioniert in FF _und_ Opera und nutzt beide Male Zweig 1

Cü,

Kai

[Micha]

Hallo Kai345,

funktioniert in FF _und_ Opera und nutzt beide Male Zweig 1

Ah, sehr schön. Soweit hatte ich es gar nicht probiert gestern Abend!

Mit freundlichem Gruß
Micha