# Webeditor



## Bgag (26. Juni 2007)

Hallo!
Ihr kennt es aus Chats, Foren oder Web Content Management Systemen -den Webeditor. Und genau einen solchen möchte ich basteln. Folgende Funktionen soll er haben:

bolid
italic
underline
text left
text right
text center
list
link
mail
quote
recreate
undo
picture
delete format
textfield size
reset
preview
Was ist nun aber mein Problem? Ganz einfach eigentlich. Ich weiß nicht, wie ich in eine textarea ein <b></b> an der Stelle des Coursers oder um einen makierten Bereich einfügen kann. Zudem habe ich nicht die geringste Idee, wie ich ein recreate oder undo oder gar eine Vergrößerung der textarea steuern kann. Habt ihr da vielleicht einige Tipps? 

MfG, Andy


----------



## Flex (26. Juni 2007)

Da sich dies nicht um serverseitige Aktionen, sondern um clientseitige handelt, ist dafür eher JavaScript zuständig.

Allerdings gibt es auch kostenlose, fertige Versionen wie z. B. TinyMCE oder FCKEditor.


----------



## Bgag (27. Juni 2007)

Kann man sich auf jeden Fall mal anschauen. trotzallem würde mich immer noch interessieren, wie man:

etwas in eine textarea einfügt
ein recreate verwirklichen kann
ein undo verwirklichen kann
die größe einer textarea interactiv ändern kann 
Danke auf jeden Fall für den Klasse Tip, wäre trotzdem für weitere Hilfe dankbar.
MfG, Andy


----------



## Flex (27. Juni 2007)

SelfHTML - Text an Cursorposition einfügen

Für Undo Funktionen findest du bestimmt auch einiges bei Google.

SelfHTML - Textarea - Größe dynamisch ändern

Was soll recreate sein? Das Gegenteil der Undo Funktion? Auch Redo genannt?


----------



## Bgag (27. Juni 2007)

Danke schonmal!


Felix Jacobi hat gesagt.:


> Was soll recreate sein? Das Gegenteil der Undo Funktion? Auch Redo genannt?


Jep wahrscheinlich genau das!
MfG, Andy


----------



## rotsch (28. Juni 2007)

Von Interesse könnte auch Prototype sein, ein (komplexes) javascript-framework:

http://www.prototypejs.org/


----------



## Maik (28. Juni 2007)

Hi!


Felix Jacobi hat gesagt.:


> Da sich dies nicht um serverseitige Aktionen, sondern um clientseitige handelt, ist dafür eher JavaScript zuständig.


*movethread*


----------



## Sven Mintel (28. Juni 2007)

Catull hat gesagt.:


> Kann man sich auf jeden Fall mal anschauen.


*Das solltest du dir auf jeden Fall ganz zu Beginn anschauen*, dann erkennst du nämlich, dass diese Editoren, die du da siehst, nicht mit <textarea> sondern mit <iframe> arbeiten(formatierter Text im <textarea> ist nur im IE über ein spezielles ActiveXControl namens DHTMLEDIT möglich)...und dass es für alle Formatierungen festgelegte Kommandos gibt, welche durch die Methode execCommand() ausgeführt werden.

Das Stichwort, wonach du Suchen musst, nennt sich *designMode*


----------



## Bgag (28. Juni 2007)

ok ich hab mir da mal ein paar Sachen von euch angeschaut und bin dabei auf noch eine, wie ich für mich finde nettere möglichkeit gestoßen, die schon seit längerer Zeit auch von der netscape-reihe unterstützt wird. contenteditable habe , wie ihr ja seht auch sofort was hier auf tutorials.de gefunden. poste ma mein ergebnis, wenn ich es habe.
MfG, Andy


----------



## Sven Mintel (28. Juni 2007)

Contenteditable funktioniert meines Wissens nur im WIN-IE ab Version5.5, da es auf der MSHTMLEdit-ActiveX-Control basiert.


----------



## Bgag (28. Juni 2007)

Entschuldigung, dass ich euch nochmal behelligen muss, aber ich googel nun seit zwei stunden und habe leider kein einziges tutorial gefunden, wie ich richtig mit execCommand() umgehe. Und zum Thema Texteditor, habe ich leider nur die ganzen extra Würstchen vom IE gefunden. *GRRR* Kennt jemand von euch vielleicht ein solches Tutorial oder kann mir vielleicht sogar selbst erklären, wie ich damit umgehen muss.
Ich wäre demjenigen sehr verbunden.
MfG, Andy


----------



## Neurodeamon (28. Juni 2007)

Sorry, ein tutorial kann ich Dir nicht empfehlen. Aber ein einen recht einfach aufgebauten Rich Text Editor in Javascript.

whizzywig

Der Code ist recht klein und verständlich im vergleich zu Tinymce (haha) und fckeditor


----------



## Bgag (1. Juli 2007)

Also der Tipp von Sven Mintel war eigentlich nicht schlecht, aber das Problem ist, dass das von ihm vorgeschlagene execCommand() genauso wie das ActivX nur unter dem IE5 und weitere läuft, gibt es denn keine möglichkeit, einen WYSIWYG zu basteln der sich an alle browser hält. mir würde es auch ausreichen, wenn die befehle zu sehen sind als meinetwegen so aussehen:

```
Hallo Forum!
Es wäre sehr nett wenn mir jemand helfen könnte!
MfG, Andy!
```


----------



## Sven Mintel (1. Juli 2007)

Dieses execCommand() funktioniert keineswegs nur im IE.
Was nur im IE funktioniert, sind Editoren, welche mit besagten ActiveX-Controls arbeiten(dort wird auch mit execCommand() gearbeitet)

Diese Editoren werden heutzutage eh kaum noch verwendet. Hast du schon wie vorgeschlagen nach "designMode" gesucht?

Die Spezifikation für Gecko-Browser findest du bspw. hier: http://www.mozilla.org/editor/midas-spec.html


----------



## Bgag (28. Juli 2007)

Abend!
Also es ist viel Zeit vergangen und ich habe viel rumgesucht. Ich habe auch hunderte von Tutorials gefunden, mit dennen man einen Editor auf execCommand-Basis bauen kann. Problem - alle mit ActiveX-Control.

http://msconline.maconstate.edu/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm

Alle dieser Art! Ich möchte aber möglichst alle Browser, sowohl die Gecko-Browser als auch so spezies wie den IE im Boot haben. Da habe ich auch was gefunden, was mir zumindest Teilweise weiterhilft. Ein Tutorial, wie man bbCode in ein Textarea an der Mausposition einfügt.

http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/

Das blöde ist, das man die Tags, die eingefügt werden sieht. Das ist nicht mein Ziel. Ich möchte, dass die Befehle direkt umgesetzt werden. Frage: Ist es sinnvoll anstatt des bbCodes direkt den HTML-Code in das Textarea zu schreiben und nur das Texterea zu reloaden oder sollte man das anders lösen?
Ich bin selbstverständlich auch für andere Optionen oder am besten für ein All-Browser-Tutorial zu diesem Thema offen.

Zu dem Thema designMode, dass von Sven Mintel angesprochen wurde, habe ich leider nichts gefunden. Wie ihr am Datum sehen könnt habe ich sehr lange immer wieder nach execCommand und designMode und ähnlichen Suchwörtern gegoogelt.
MfG, Andy


----------



## Bgag (30. Juli 2007)

Abend!
Habe mal etwas rumprobiert und auch was hinbekommen.


```
<input type="button" value=" B " name="Bold" onclick="runCommand('Bold');" />
<input type="button" value=" I " name="Italic" onclick="runCommand('Italic');" />
<input type="button" value=" U " name="Underline" onclick="runCommand('Underline');" />
<input type="button" value=" S " name="strikeThrough" onclick="runCommand('StrikeThrough');" />
<br />

<iframe name="editor" id="editor" width="400" height="500"
src="empty.html"></iframe>

<script>
function runCommand(theCommand) {
	var theEditor;
	if (document.all) { //IE
		frames.editor.document.designMode = "On";
		frames["editor"].document.execCommand(theCommand, false, ';')
		}
	else { //Mozilla
		document.getElementById("editor").contentDocument.designMode = "on"; 
		document.getElementById("editor").contentWindow.document.execCommand(theCommand, false, ';')
		}
}
</script>
```

Funktioniert super. Man muss nur noch weitere ExecCommand-Eigenschaften hinzufügen.
Dies sollte allerdings beachtet werden und auch in der empty.html stehen.


```
This is a XHTML Editor. Enter and edit text as you usually do in a text 
editor like WORD or OpenOffice. Changes appear directly inside the
scrollable area. You can also view the produced XHTML.

Before start writting please select a part of this text and click any 
button of this Editor.
```

MfG, Andy


----------



## Bgag (31. Juli 2007)

Abend!
Hätte da doch noch einige Probleme. habe jetzt so ziemlich alle wichtigen Befehle eingebaut und sie funktionieren auch alle super bis auf folgende Funktionsaufrufe:

```
<button title="Cut" unselectable="on" onclick="runCommand('Cut');">
<img src="EditorImages/Cut.gif" alt="Cut" />
</button>

<button title="Copy" unselectable="on" onclick="runCommand('Copy');">
<img src="EditorImages/Copy.gif" alt="Copy" />
</button>

<button title="Paste" unselectable="on" onclick="runCommand('Paste');">
<img src="EditorImages/Paste.gif" alt="Paste" />
</button>

<button title="Insert Image" unselectable="on" onclick="runCommand('InsertImage');">
<img src="EditorImages/Image.gif" alt="Insert Image" />
</button>

<button title="Insert Link" unselectable="on" onclick="runCommand('CreateLink');">
<img src="EditorImages/URL.gif" alt="Insert Link" />
</button>
```
Wie muss ich diese Aufrufe oder meine Funktion ändern, damit diese wie hier beschrieben:
IE: http://msdn.microsoft.com/workshop/a...commandids.asp
Mozilla: http://www.mozilla.org/editor/midas-spec.html
funktioieren?
MfG, Andy


----------

