✔ BBCode / WYSWYG Editoren

J

jack-x

Grünschnabel
Ich programmiere ein CMS. Auf Kundenwunsch versuche ich (wie so manch anderer) ein WYSWG Editor einzufügen. Bisher war eine textarea mit BBCode integriert.

Wenn ich im Firefox 2.0.0.2 jetzt einen iframe einfügen will und den designMode = "on" setzten will, kommt einen Fehlermeldung. Muß ich hier das onLoad rein? Auf anderen Seiten funktioniert es ja? Beim googlen bin ich darüber gestolpert das ein Bug sein könnte:
uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMNSHTMLDocument.designMode]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://***.********.info/include/wyswyg.js.php?l=de :: SetTextArea :: line 28" data: no]

In der Seite selber ist folgender Teil (Achtung es können mehrere Textfelder vorkommen):
Code: 
<textarea name=new_values[txt_de] id=new_values[txt_de]> 
[strong]text[ /strong ] 
[em]text[ /em ] 
[u]text[ /u ] 
[font color=66FF00]text[ /font ] 
[font color=FF3366]text[ /font ] 
[font color=FF0000]text[ /font ] 
text 
[font size=17]text[ /font ] 
text 
text 
text 
text 
text 
text 
text 
text 
text 
text</textarea> 
<iframe name=wyswyg_txt_de id=wyswyg_txt_de></iframe> 
<script> 
SetTextArea('wyswyg_txt_de','','<strong>text</strong><br>
<em>text</em> 
<u>text</u> 
<font color=66FF00>text</font> 
<font color=FF3366>text</font> 
<font color=FF0000>text</font> 
text 
<font size=17>text</font> 
text 
text 
text 
text 
text 
text 
text 
text 
text 
text' , 0); 
</script>

Für die Textformatierung wird dieses externe Javascript eingefügt
Code: 
	//---------- Formatierung einfügen ----------
	function AddStyle(Field,FieldId,aTag,eTag)  {
		if (document.getElementById('wyswyg_'+FieldId).style.display != "none")  {
			var aTag		= '<'+aTag+'>';
			if (eTag)
				var eTag		= '</'+eTag+'>';
			var FieldId	= 'wyswyg_'+FieldId;
			var input		= window.frames[FieldId];
			}
		else  {
			var aTag		= '['+aTag+']';
			if (eTag)
				var eTag		= '[/'+eTag+']';
			var FieldId	= 'new_values['+FieldId+']';
			var input		= document.forms[Field].elements[FieldId];
			}
		input.focus();
		/* für Internet Explorer */
		if (typeof document.selection != 'undefined')  {
			/* Einfügen des Formatierungscodes */
			var range = document.selection.createRange();
			var insText = range.text;
			if (eTag)
				range.text = aTag + insText + eTag;
			else
				range.text = aTag;
			/* Anpassen der Cursorposition */
			range = document.selection.createRange();
			if (insText.length == 0)  {
				range.move('character', -eTag.length);
				}
			else {
				range.moveStart('character', aTag.length + insText.length + eTag.length);      
				}
			range.select();
			}
		/* für neuere auf Gecko basierende Browser */
		else if (typeof input.selectionStart != 'undefined')  {
			/* Einfügen des Formatierungscodes */
			var start = input.selectionStart;
			var end = input.selectionEnd;
			var insText = input.value.substring(start, end);
			input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
			/* Anpassen der Cursorposition */
			var pos;
			if (insText.length == 0)  {
				pos = start + aTag.length;
				}
			else  {
				pos = start + aTag.length + insText.length + eTag.length;
				}
			input.selectionStart = pos;
			input.selectionEnd = pos;
			}
		/* für die übrigen Browser */
		else	{
			/* Abfrage der Einfügeposition */
			var pos;
			var re = new RegExp('^[0-9]{0,3}$');
			while (!re.test(pos))  {
				pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
				}
			if (pos > input.value.length)  {
				pos = input.value.length;
				}
			/* Einfügen des Formatierungscodes */
			var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
			input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
			}
		}
	//---------- Link einfügen ----------
	function AddLink(Field,FieldId)  {
		if (document.forms[Field].link_target[0].checked || document.forms[Field].link_target[1].checked)  {
			if (document.forms[Field].link_target[0].checked)
				var target = 'extern';
			else
				var target = 'intern';
			if (document.forms[Field].link_url.value)  {
				AddStyle(Field, FieldId, 'URL]'+document.forms[Field].link_url.value+'['+target, 'URL');
				document.forms[Field].link_url.value								= '';
				document.forms[Field].link_target[0].checked	= false;
				document.forms[Field].link_target[1].checked	= false;
				}
			}
		}
	var ActualFormatField;
	//---------- Textformatierung Zusatzfeld anzeigen / ausblenden ----------
	function AddFormatField(Field,FormatField,FieldId)  {
		var Field;
		var FormatField;
		var FieldId;
		if (FormatField == ActualFormatField)  {
			document.getElementById(FormatField+'_'+FieldId).style.display = 'none';
			document.getElementById('text_format_'+FieldId).height = 26;
			FormatField = false;
			}
		else  {
			document.getElementById('text_format_'+FieldId).height = 60;
			if (ActualFormatField)
				document.getElementById(ActualFormatField+'_'+FieldId).style.display = 'none';
			if (navigator.appName == 'Netscape')
				document.getElementById(FormatField+'_'+FieldId).style.display ='table-cell';
			else
				document.getElementById(FormatField+'_'+FieldId).style.display ='inline';
			}
		return ActualFormatField = FormatField;
		}

Das läuft bisweilen auch soweit, das der ausgewählte Code eingetragen wird. Nur im IE, wo der designMode funktioniert, steht dann z.B. <strong></strong>. Der selektierte Text im iframe wird nicht erkannt und die einzufügende Formatierung steht lesbar im iframe und nicht im Quellcode.

Umd den text in den iframe zu schreiben wird noch dieses javscript verwendet
Code: 
	function Fehlerbehandlung (Nachricht, Datei, Zeile) {
		Fehler = "Fehlermeldung:\n" + Nachricht + "\n" + Datei + "\n" + Zeile + "\n"+ Nachricht.match(/SetTextArea/g);
		if (Nachricht.match(/SetTextArea/) != "SetTextArea")
			alert(Fehler);
		return true;
		}
	function TextAreaDoc(html) {
		var frameHtml = '<html>\n';
		frameHtml += '<head>\n';
		frameHtml += '<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>\n';
		frameHtml += '<link href="/include/style.css.php?l=<?php if ($language) echo($language); else echo("en"); ?>" rel="stylesheet" type="text/css">';
		frameHtml += '<style>\n';
		frameHtml += 'body {background: #FFFFFF; margin: 2px; padding: 0px; text-align:<?php echo($layout['direction_left']); ?>;}\n';
		frameHtml += '</style>\n';
		frameHtml += '</head>\n';
		frameHtml += '<body>\n';
		frameHtml += html + '\n';
		frameHtml += '</body>\n';
		frameHtml += '</html>';
		return frameHtml;
		}
	function SetTextArea(Frame, Field, html, design) {
		onerror = Fehlerbehandlung;
		if (Field)  {
			html = document.getElementById(Field).value;
			}
		ifrm = window.frames[Frame].document;
		with (ifrm)  {
			if (design)
				designMode = "On";
			document.getElementById(Frame).style.display = "inline";
			open();
			write(TextAreaDoc(html));
			close();
			}
		}

Die Fehlerbehandlung habe ich eingefügt wegen dem auftretenden Problem, den designMode=On im Firefox zu setzten.
 
bzw. ist es möglich zu ermitteln, ob der Cursor im iframe oder in der texteare ist

Denn die Bedingung
Code: 
document.getElementById('wyswyg_'+FieldId).style.display != "none"
als Auswahl, ob BBCode oder HMTL einzufügen, ist nicht sehr elegant.

Danach wäre noch die Frage, wenn das Formular abgeschickt wird, das muß ich die Inhalte der iframes ja in die normalerweise verstecketen textareas übertragen. Wie soll ich das am einfachsten lösen? Beziehungsweise was sollte onSubmit ansprechen/ausführen?
Bin eben mehr der php u.s.w. Freak.
 
Ich meld mich mal wieder.
Also die Eingaben und Formatierungen funktionieren jetzt fast. Endlich eine Idee gehabt, wie ich das zum Laufen bekomme.

Ich habe nur immer noch das Problem das designMode=on im Firefox nicht funktioniert. In irgendeinem Script bin ich über das prototype.js gestolpert. Kennt jemand dieses Script, bzw. kann jemand damit was anfangen?

Dann ist da noch das Problemchen mit der Entertaste. Es wird hier eine neuer Absatz mit den <p>-Tags eingefügt. Es sollte aber nur ein normaler Zeilenumbruch eingefügt werden. Gibt es dafür einen Lösung?
 
jack-x hat gesagt.:
Ich habe nur immer noch das Problem das designMode=on im Firefox nicht funktioniert.

Dann ist da noch das Problemchen mit der Entertaste. Es wird hier eine neuer Absatz mit den <p>-Tags eingefügt. Es sollte aber nur ein normaler Zeilenumbruch eingefügt werden. Gibt es dafür einen Lösung?
Zum Vergrößern anklicken....

Mozilla bietet hier doch ein funktionierendes Beispiel, schau dir das doch einfach mal an vielleicht bringt dich das ja weiter oder du kannst einfach das Beispiel nutzen.

http://www.mozilla.org/editor/midasdemo/


Einfache Zeilenumbrüche: Shift+Enter
 
versuch13 hat gesagt.:
Mozilla bietet hier doch ein funktionierendes Beispiel, schau dir das doch einfach mal an vielleicht bringt dich das ja weiter oder du kannst einfach das Beispiel nutzen.

http://www.mozilla.org/editor/midasdemo/
Zum Vergrößern anklicken....
Hatte dieses Beispiel auch mal in der Hand, aber nicht weiterverfolgt, Denn wenn ich bei "View HTML Source" das Häkchen setzte, bekomme ich diese Fehlermeldung:
Access to property denied" code: "1010

Line 0
Wie schon geschrieben, verwende den Firefox2.0.0.2


versuch13 hat gesagt.:
Einfache Zeilenumbrüche: Shift+Enter
Zum Vergrößern anklicken....
Hier konnte ich inzwischen auch eine Lösung finden. Dem User wird ein normaler Zeilenumbruch vorgegaukelt. Indem man im iframe den Style p {margin:0px} im Header einfügt. Danach die ganzen <p>-Tags entsprechen durch normale Zeilenumbrüche ersetzten / rausfiltern.

Werde jetzt mal das Mozilla-Beispiel näher ansehen.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück