wysiwyg-editor

Sven Mintel · 10. Oktober 2005

http://www.tutorials.de/tutorials130009.html

searching_rik · 10. Oktober 2005

Danke für´s erste ;-)

ich habe mir ein paar scripts angeschaut jedoch werde ich einfach nicht schlau draus.
Kannst du mir vielleicht was entsprechendes schicken?

Ich lese also über eine variable ($vartxt) eine textdatei (bsp. txt1.txt) in eine php datei ein.
diese möchte ich editieren über eine wysiwyg editor mit alternativer html ansicht.

Das Hauptproblem ergibt sich dann beim speichern der Daten.
Ich möchte alle unnützen leerzeichen und die "&-Html" tags herausfiltern und ersetzen, so dass ich beispielsweise in meiner txt1.txt datei ein:
&text1= <b>Dies ist mein ertser Text</b><p>Und hier mein erster Absatz</p>

Ihr habt hier doch schon so viele Beispiele als download zur Verfügung gestellt.
Bitte nochmals um Hilfe

nochmals danke und viele Grüße

Sven Mintel · 10. Oktober 2005

searching_rik hat gesagt.:
Kannst du mir vielleicht was entsprechendes schicken?

Du kannst gerne im Jobforum einen Auftrag für deine Wünsche erteilen

con-f-use · 10. Oktober 2005

Dir wird mit an Sicherheit grenzender Wahrscheinlichkeit niemand ein fertigs Script schicken, den du nicht dafür bezahlst.

Wenn du aus den bestehenden Scripts nicht schlau wirst, hast du höchstwahrscheinlich zu wening Ahnung von Javascript. Dagegen gibt es ein relativ einfaches Mittel: Verschaff dir Ahnung. Mehr als dir sagen, wie man es macht werden wir nicht, das Script musst du schon allein schreiben.

Unter http://confus.co.funpic.de/_data/tut/editor.html findest du einen kleinen aber feinen wysiwyg-Editor. Du kannst die Daten in der text.txt-Datei da rein bekommen, indem du dem iframe das entsprechende Target gibst. In der processdata()-Funktion, wird dann der versteckten Textarea der Inhalt des iframes übergeben. Diesen Inhalt kannst du vorher mit regülären Ausdrücken deinen wünschen anpassen.

Mehr können wir dir wirklich nicht helfen.

searching_rik · 11. Oktober 2005

Hallo con-f-use,

was kann ich tun, um dein script auch mit beispielsweise dem Firfox lauffähig zu halten?
Die Funktionen fett etc. sind leider nicht sichtbar im zu editierenden Text.

thanx & greetz

con-f-use · 11. Oktober 2005

Der Editor sollte eigentlich im Firefox lauffähig sein. Im Mozilla ist er es jedenfalls und eigentlich interpretieren alle Gecko-Browser HTML und Javascript gleich.

searching_rik · 11. Oktober 2005

Eigentlich könnte sein, leider haut das beim firefox wie gesagt nicht hin.
Könnte das am "uagent" liegen?

Ich habe den auf 20040803 geändert leider ohne Erfolg.

Hast du noch nen Tip?

con-f-use · 11. Oktober 2005

Du könntest mal testen ob es an der Browserdetect liegt, indem du einfach diese beiden Zeilen:

Code:

		isGecko = ( uagent.match('gecko') && navigator.productSub>=20030210 ),
 		isIE = uagent.match('msie') && !uagent.match('opera') && (!uagent.match('msie 5.5')||!uagent.match('msie 6.'));

durch die beiden ersetzt:

Code:

		isGecko = true,
 		isIE = false;

Bisher hatte ich nämlich nie Beschwerden, dass es nicht funktioniert. Außerdem habe ich den Code inzwischen ein wenig vereinfacht - versuch' das am besten mit dem neuen Code.

searching_rik · 11. Oktober 2005

Hmm, das ist es leider auch nicht.
das einlesen und speichern funktioniert ja auch einwandfrei, nur das klicken auf fett, kursiv und so ändert den text nicht. Im Internetexplorer ohne Probleme im Firefox ohne Erfolg...

hier nochmal den code (is ja eh deiner):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">


<head>
<title>online-editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="AUTHOR" content="con-f-use@gmx.net" />


<style type="text/css">
	.imagebutton {
		width: 20px;
		height: 20px;
		border:1px;
		display:inline;
		border-color:#CC0000; }
	#edit {
		border: solid 1px #CDCDCD; }
	a {
		text-decoration:none; }
	a:hover {
		color: #33FFFF; }
	a:visitied {
		color:#0000FF;
	}
</style>
<script type="text/javascript"><!--
	//coded by con-f-use@gmx.net - be fair and do not remove this

	var	formu, ifrm, uagent=navigator.userAgent.toLowerCase(),
		isGecko = ( uagent.match('gecko') && navigator.productSub>=20030210 ),
		isIE = uagent.match('msie') && !uagent.match('opera') && (!uagent.match('msie 5.5')||!uagent.match('msie 6.'));

	function initEdit(strFormu,strEdit) {
		formu = document.getElementById(strFormu);
		if (isIE)
			ifrm = eval('window.'+ strEdit +'.document');
		if (isGecko) {
			ifrm = document.getElementById(strEdit).contentWindow.document;
			ifrm.focus = new Function('fx','window.'+ strEdit +'.focus()');
		}
		ifrm.designMode = 'on';
		var kids = document.getElementsByTagName('div');
		for (var i=0; i<kids.length; i++)
			if (kids[i].className == 'imagebutton')
				kids[i].onclick = tbclick;
	}

	function tbclick() {
		var id = this.id;
		if(id == 'CreateLink' && isIE) {
			ifrm.execCommand(id); 
		} else {
			if (id=='FontName' || id=='FontSize') {
				sel = document.getElementById(id).childNodes;
				if (isIE) sel = sel[0];
				if (isGecko) sel = sel[1];
				arg = sel.options[sel.selectedIndex].firstChild.data; } 
			else if (id == 'InsertImage')
				arg = prompt('Enter a image location:', 'http://');
			else if (id == 'CreateLink')
				arg = prompt('Enter a URL:','http://')
			else 
				arg = null;
			ifrm.execCommand(id,false,arg);
			if (arg == null) ifrm.focus();
		}
	}

	function processData() {
		formu.content.value = ifrm.body.innerHTML;
		contents = contents.replace(/\r\n/g, '<br>');
	    contents = contents.replace(/\n/g, '<br>');
	    contents = contents.replace(/\r/g, '<br>');
  		if( !formu.content.value.replace(/<br>|\s|&nbsp;/ig,'') ) {
			alert('You did not enter any Text!');
			return false;
		}
		return true;
	}
//--></script>

</head><body onLoad="initEdit('form_content','edit')">
<!--<div style="position:absolute; left:10px; top:10px; width: 450; height: 400;"> -->
<form onSubmit="return processData()" id="form_content" action="text_write.php" method="post">
	<input type="hidden" name="var1" value= "<?php echo $vartxt; ?>">
   	<!-- <div>-->
	  <table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
    	<tr> 
      	<td width="100"> 
        <div class="imagebutton" id="bold" onClick="tbclick()"> 
			<a href="#" onClick="return false" style="font-weight:bold">
				<img src="images/ed_format_bold.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100">
		<div class="imagebutton" id="italic">
			<a href="#" onClick="return false" style="font-style:italic">
				<img src="images/ed_format_italic.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100"> 
        <div class="imagebutton" id="underline"> 
			<a href="#" onClick="return false" style="text-decoration:underline">
				<img src="images/ed_format_underline.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100"> 
        <div class="imagebutton" id="insertorderedlist">
			<a href="#" onClick="return false">
				<img src="images/ed_list_num.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100"> 
        <div class="imagebutton" id="insertunorderedlist"> 
			<a href="#" onClick="return false"> 
          		<img src="images/ed_list_bullet.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100"> 
        <div class="imagebutton" id="CreateLink"> 
			<a href="#" onClick="return false">
				<img src="images/ed_link.gif" width="18" height="18" border="0" />
			</a>
		</div>
		</td>
        </tr>
      </table>
      <!--	<div class="imagebutton" id="FontSize">
		<select>
			<option>1</option>
			<option>2</option>
			<option selected="selected">3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
	   </select>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="FontName">
		<select>
			<option>Arial</option>
			<option selected="selected">Times New Roman</option>
			<option>Comic Sans MS</option>
		</select>
	</div><br />

	<div class="imagebutton" id="justifyleft">
		<a href="#" onclick="return false">left</a>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="justifycenter">
		<a href="#" onclick="return false">center</a>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="justifyright">
		<a href="#" onclick="return false">right</a>
	</div>&nbsp;&nbsp;
		
		<br />	
	<div class="imagebutton" id="indent">
		<a href="#" onclick="return false">indent</a>
	</div>&nbsp;&nbsp;
	
	<div class="imagebutton" id="outdent">
		<a href="#" onclick="return false">outdent</a>
	</div>&nbsp;&nbsp;
	
	<div class="imagebutton" id="InsertImage">
		<a href="#" onclick="return false">insert image</a>
	</div>
-->
      	<br />
	  	<iframe id="edit" name="edit" src="<?php echo $vartxt; ?>" width="100%" height="400" frameborder="0" marginheight="0" marginwidth="0">
		</iframe><br />
		<input type="submit" value="Speichern">
		 <textarea name="content" wrap="PHYSICAL" style="visibility:hidden;">		</textarea>
		<br />		
<!--</div>-->
</form>
<!--</div>-->
</body>
</html>

Vielleicht hab ich etwas falsch gemacht?

searching_rik · 12. Oktober 2005

Hallo alle miteinander,

mein Problem bezieht sich auf den folgenden Code.
Ich habe hier mittels dieses Forum und Dank der con-f-usen Hilfe ein Script hinbekommen, dass eine Textdatei ausliest und diese in einer Art Richtext Editor darstellt. Das funktioniert leider nur im Internetexplorer und nicht im Firefox.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>online-editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="AUTHOR" content="con-f-use@gmx.net" />
<link rel="stylesheet" href="../css/seventhlife.css" type="text/css">
<script type="text/javascript">
	//coded by con-f-use@gmx.net - be fair and do not remove this
	var	formu, ifrm, uagent=navigator.userAgent.toLowerCase(),
		isGecko = ( uagent.match('gecko') && navigator.productSub>=20030210 ),
		isIE = uagent.match('msie') && !uagent.match('opera') && (!uagent.match('msie 5.5')||!uagent.match('msie 6.'));

	function initEdit(strFormu,strEdit) {
		formu = document.getElementById(strFormu);
		if (isIE)
			ifrm = eval('window.'+ strEdit +'.document');
		if (isGecko) {
			ifrm = document.getElementById(strEdit).contentWindow.document;
			ifrm.focus = new Function('fx','window.'+ strEdit +'.focus()');
		}
		ifrm.designMode = 'on';
		var kids = document.getElementsByTagName('div');
		for (var i=0; i<kids.length; i++)
			if (kids[i].className == 'imagebutton')
				kids[i].onclick = tbclick;
	}

	function tbclick() {
		var id = this.id;
		if(id == 'CreateLink' && isIE) {
			ifrm.execCommand(id); 
		} else {
			if (id=='FontName' || id=='FontSize') {
				sel = document.getElementById(id).childNodes;
				if (isIE) sel = sel[0];
				if (isGecko) sel = sel[1];
				arg = sel.options[sel.selectedIndex].firstChild.data; } 
			else if (id == 'InsertImage')
				arg = prompt('Enter a image location:', 'http://');
			else if (id == 'CreateLink')
				arg = prompt('Enter a URL:','http://')
			else 
				arg = null;
			ifrm.execCommand(id,false,arg);
			if (arg == null) ifrm.focus();
		}
	}

	function processData() {
		formu.content.value = ifrm.body.innerHTML;
		contents = contents.replace(/\r\n/g, '<br>');
	    contents = contents.replace(/\n/g, '<br>');
	    contents = contents.replace(/\r/g, '<br>');
  		if( !formu.content.value.replace(/<br>|\s|&nbsp;/ig,'') ) {
			alert('You did not enter any Text!');
			return false;
		}
		return true;
	}
</script>
</head>
<body onLoad="initEdit('form_content','edit')" class="t11" >
<form onSubmit="return processData()" id="form_content" action="text_write.php" method="post">
	<input type="hidden" name="var1" value= "<?php echo $vartxt; ?>">
	  <table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
    	<tr> 
      	<td width="100"> 
        <div class="imagebutton" id="bold" onClick="tbclick()"> 
			<a href="#" onClick="return false" style="font-weight:bold">
				<img src="images/ed_format_bold.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100">
		<div class="imagebutton" id="italic">
			<a href="#" onClick="return false" style="font-style:italic">
				<img src="images/ed_format_italic.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100"> 
        <div class="imagebutton" id="underline"> 
			<a href="#" onClick="return false" style="text-decoration:underline">
				<img src="images/ed_format_underline.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100"> 
        <div class="imagebutton" id="insertorderedlist">
			<a href="#" onClick="return false">
				<img src="images/ed_list_num.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100"> 
        <div class="imagebutton" id="insertunorderedlist"> 
			<a href="#" onClick="return false"> 
          		<img src="images/ed_list_bullet.gif" width="18" height="18" border="0" />
			</a>
		</div>
        </td>
        <td width="100"> 
        <div class="imagebutton" id="CreateLink"> 
			<a href="#" onClick="return false">
				<img src="images/ed_link.gif" width="18" height="18" border="0" />
			</a>
		</div>
		</td>
        </tr>
      </table>
      	<br />
	  	<iframe id="edit" name="edit" src="<?php echo $vartxt; ?>" width="100%" height="400" frameborder="0" marginheight="0" marginwidth="0">
		</iframe>
		<br />
		<input type="submit" value="Speichern">
		<textarea name="content" wrap="PHYSICAL" style="visibility:hidden;"></textarea>
		<br />
	</form>
</body>
</html>

Kann mir jemand von euch helfen auch dieses Problem zu beheben.

Vielen Dank im Voraus!

wysiwyg-editor

Sven Mintel

Mitglied

searching_rik

Grünschnabel

Sven Mintel

Mitglied

con-f-use

Erfahrenes Mitglied

searching_rik

Grünschnabel

con-f-use

Erfahrenes Mitglied

searching_rik

Grünschnabel

con-f-use

Erfahrenes Mitglied

searching_rik

Grünschnabel

searching_rik

Grünschnabel

Neue Beiträge