Skippy
Mitglied
Hallo Forum,
Während ich hier diesen Text schreibe, gibt es 4 cm weiter oben viele tolle Knöpfe, um den Text Dick zu machen, kurisv, farbig, usw.
Sowas wollte ich für eine Seite die ich gerade mache auch haben, also fing ich an zu googlen.
Was ich bisher erfuhr war:
- WYSIWYG = What You See Is What You Get (Ist angeblich der Begriff für diese Werkzeugleiste)
- Es geht nur mit Javascript
So konnte ich zumindest mal meine Suchbegriffe verfeinern.
Nachdem ich dann nun einiges gesucht habe, viele Links anklickte, auch die Englischen Sachen durch las, sowie probierte experimentierte und es nicht funktionierte, entschied ich mich doch mal hier nach Hilfe zu fragen.
Ich benütze den Mozilla FireFox 3.6.8
Die Hauptsächlichen Codes die ich benutzt habe sind folgende:
1. Von dieser Seite und der nächsten glaub oder so
http://www.devguru.com/features/tutorials/wysiwyg/wysiwyg1.asp
Problem: Das Textfeld lässt sich garnicht erst anklicken, es erscheint kein Schreib-Cursor und wenn ich einfach was eintippe passiert auch nix, sowie beim klicken
Codeschnipsel von Seite 2:
2.
http://www.tutorials.de/content/697-der-wysiwyg-editor.html
Problem: Text lässt sich zwar in das Feld schreiben, wenn ich allerdings auf einen der Buttons klicke passiert nichts... Text ist nichtmehr markiert und formatieren tut sich auch nix.
Hier hab ich übrigends auch mal versucht die zeichen wie z.B. ' ´ ` " und so durch die zu ersetzen von denen ich weiss, dass sie bei meinem Editor garantiert funktionieren, ohne Erfolg
Code:
3.
http://www.homepage-total.de/bausteine/bausteine4.php#bs_9
Problem: Dieser Code tut jetzt nicht genau das was ich suche, sondern ledeglich einen markierten Text in die Leiste einfügen, allerdings funktioniert das auch!
evtl. dachte ich mir, da einfach ein wenig etwas ändern zu können damit das den gewollten Zweck erfüllt, leider bin ich nur kein JavaScript kenner, ich arbeite mit PHP und HTML =(
Code:
4.
http://www.php-resource.de/forum/php-developer-forum/11069-markierten-text-aendern.html
Problem: Wenn ich da auf das "Fett" drücke, kommt ledeglich ein kleines Fehler-Fenster-PopUp ohne Text mit einem "OK" Button, am Text ändert sich nichts...
Code:
5. Von dieser Seite
http://www.oreillynet.com/pub/a/javascript/2001/12/21/js_toolbar.html
Problem: Der Code ist hier leider nicht drin, weil das der erste Code war den ich getestet und im Editor leider schon überschrieben habe. Aber es war ebenfalls so, dass der Text sich einfach nicht geändert hat, wenn man irgendwas drückte.
Code:
Da ihr nun von meinem Problem wisst, könntet ihr mir ja vieleicht helfen.
Habt ihr eine Idee warum das nicht klappt oder was ich falsch gemacht habe?
Über eine Antwort wäre ich euch mega dankbar!
MfG Skippy
Während ich hier diesen Text schreibe, gibt es 4 cm weiter oben viele tolle Knöpfe, um den Text Dick zu machen, kurisv, farbig, usw.
Sowas wollte ich für eine Seite die ich gerade mache auch haben, also fing ich an zu googlen.
Was ich bisher erfuhr war:
- WYSIWYG = What You See Is What You Get (Ist angeblich der Begriff für diese Werkzeugleiste)
- Es geht nur mit Javascript
So konnte ich zumindest mal meine Suchbegriffe verfeinern.
Nachdem ich dann nun einiges gesucht habe, viele Links anklickte, auch die Englischen Sachen durch las, sowie probierte experimentierte und es nicht funktionierte, entschied ich mich doch mal hier nach Hilfe zu fragen.
Ich benütze den Mozilla FireFox 3.6.8
Die Hauptsächlichen Codes die ich benutzt habe sind folgende:
1. Von dieser Seite und der nächsten glaub oder so
http://www.devguru.com/features/tutorials/wysiwyg/wysiwyg1.asp
Problem: Das Textfeld lässt sich garnicht erst anklicken, es erscheint kein Schreib-Cursor und wenn ich einfach was eintippe passiert auch nix, sowie beim klicken
Codeschnipsel von Seite 2:
Code:
<html>
<head>
<title> Using execCommand to bold text </title>
<script language="JavaScript">
function Init()
{
iView.document.designMode = 'On';
}
function boldIt()
{
iView.document.execCommand('bold', false, null);
}
</script>
<body onLoad="Init()">
<iframe id="iView" style="width: 200px; height:70px"></iframe>
<br><br>
<input type="button" onClick="boldIt()" value="Toggle Bold">
</body>
</html>2.
http://www.tutorials.de/content/697-der-wysiwyg-editor.html
Problem: Text lässt sich zwar in das Feld schreiben, wenn ich allerdings auf einen der Buttons klicke passiert nichts... Text ist nichtmehr markiert und formatieren tut sich auch nix.
Hier hab ich übrigends auch mal versucht die zeichen wie z.B. ' ´ ` " und so durch die zu ersetzen von denen ich weiss, dass sie bei meinem Editor garantiert funktionieren, ohne Erfolg
Code:
Code:
<HTML>
<HEAD>
<style type=“text/css“>
#div{
height:200px;
width:100%;
border:1px solid #7d7d7d;
visibility:hidden;
}
</style>
<script language=”javascript”>
function schreibeintextarea() {
document.getElementById("textarea").style.visibility='hidden';
document.getElementById("div").style.visibility='visible';
document.formular.textarea.value = document.getElementById("div").innerHTML;
}
function formatieren(befehl,inhalt) {
div.focus();
document.execCommand(befehl, false, inhalt);
}
</script>
</HEAD>
<BODY>
<button OnClick=”formatieren(‘bold’,’’)”>Fett</button>
<button OnClick=”formatieren(‘italic’,’’)”>Kursiv</button>
<button OnClick=”formatieren(‘FontSize’,’7’)”>Schriftgröße 7</button>
<div id=”div” contenteditable>
</div>
<form name="formular" action="" method="post">
<textarea name="textarea" id="textarea">
</textarea>
<input OnMouseOver="schreibeintextarea()" type="submit" value="Abschicken">
</form>
</BODY >
</HTML>3.
http://www.homepage-total.de/bausteine/bausteine4.php#bs_9
Problem: Dieser Code tut jetzt nicht genau das was ich suche, sondern ledeglich einen markierten Text in die Leiste einfügen, allerdings funktioniert das auch!
evtl. dachte ich mir, da einfach ein wenig etwas ändern zu können damit das den gewollten Zweck erfüllt, leider bin ich nur kein JavaScript kenner, ich arbeite mit PHP und HTML =(
Code:
Code:
<script type="text/javascript">
// Markierten Text in das Eingabefeld einfügen
function markierterText() {
if (window.getSelection) {
document.Formely.auswahl.value = window.getSelection();
} else if (document.getSelection) {
document.Formely.auswahl.value = document.getSelection();
} else if (document.selection) {
document.Formely.auswahl.value = document.selection.createRange().text;
}
}
</script>
<form name="Formely" action="">
<em>Viel Text um dieses Beispiel zu demonstrieren.</em></span><br>
<input type="text" name="auswahl" size="45">
<input type="button" value="Markierten Text einfügen" onClick="markierterText();">
</form>
Read more: http://www.homepage-total.de/bausteine/bausteine4.php#bs_9#ixzz0whnb8L1j4.
http://www.php-resource.de/forum/php-developer-forum/11069-markierten-text-aendern.html
Problem: Wenn ich da auf das "Fett" drücke, kommt ledeglich ein kleines Fehler-Fenster-PopUp ohne Text mit einem "OK" Button, am Text ändert sich nichts...
Code:
Code:
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function macheFett(v) {
if (window.getSelection) alert(window.getSelection());
else if (document.getSelection) alert(document.getSelection());
else if (document.selection) {
var str = document.selection.createRange().text;
document.bla.message.focus();
var sel = document.selection.createRange();
sel.text = "<" + v + ">" + str + "</" + v + ">";
}
}
//-->
</script>
</head><body>
Markieren und auf Fett klicken ... dann wird alles schoen:
<form name=bla>
<a href="javascript:macheFett('B')">Fett</a>
<textarea name="message" rows=12 cols=52>
</textarea>
</form>
</body></html>5. Von dieser Seite
http://www.oreillynet.com/pub/a/javascript/2001/12/21/js_toolbar.html
Problem: Der Code ist hier leider nicht drin, weil das der erste Code war den ich getestet und im Editor leider schon überschrieben habe. Aber es war ebenfalls so, dass der Text sich einfach nicht geändert hat, wenn man irgendwas drückte.
Code:
Code:
Da bin ich jetzt gerade etwas zu faul um den zusammen zu setzen, sieht aber am vielversprechensten aus finde ichDa ihr nun von meinem Problem wisst, könntet ihr mir ja vieleicht helfen.
Habt ihr eine Idee warum das nicht klappt oder was ich falsch gemacht habe?
Über eine Antwort wäre ich euch mega dankbar!
MfG Skippy
, dann habe ich es aufgegeben, weil der Code schon kurz vor der Explosion stand (Spagetticode), und meine Nerven natürlich auch, aber vielleicht hilft es dir ja 
Könntest aber auch die möglichkeit mit dem div+contentEditable nutzen, die hat aber auch so viele Probleme das viele den Weg mit dem iframe vorziehen,
