Webeditor

[Bgag]

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]

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]

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]

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]

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]

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]

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