Online WYSIWYG Editor: Selber machen oder anpassen ?

[Thomas Lindner]

...mit ein Grund, warum ich auf eine eigenen Variante umgestiegen bin. Meines funktioniert zwar noch nicht in allen Browsern, aber ich bin auf dem direktem Wege zu diesem Ziel....

 

[Tim C.]

Ja allerdings musst du dann vielmehr Code nutzen, als die praktischen execCommand (oder wie hiessen die noch gleich ?) Einzeiler für die IE Alternative. Und da bei mir im Klinkum eh nur der Internet Explorer verwendet wird, sehe ich nicht ein, dass CrossBrowser kompatibel zu machen.

 

[Thomas Lindner]

Das sehe ich als Argument ein, wenn es nur für ein gezieltes Projekt, bzw. Einsatzort bestimmt ist.

Da meine Variante irgendwann Einsatz in einem CMS, bzw. Templatesystem erhalten soll, muss ch leider auf kranke Browser wie den Netscape Rücksicht nehmen!

 

[Tim C.]

So Leute, dass Problem geht in die nächste Runde.
Da so eine WYSIWYG BOx ja nicht nur zum neu einstellen von Content, sonder logischerweise auch zum bearbeiten davon gedacht ist, muss ich es irgendwie schaffen, bestimmten in der Datenbank gespeicherten Code wieder in die Box zurückzuführen.

Dabei habe ich halt das Problem, dass ich zwar weiss, das iView.document.body.innerHTML der HTML Code ist den ich halt in einer JavaScript Anweisung irgendwie = $dbresult setzen muss, aber irgendwie scheiterts bei mir an der Umsetzung.

Irgendwer brauchbare Ideen, oder Probleme mich zu verstehen ? Dann nur raus damn it

 

[Andreas Gaisbauer]

Hallo TIm,
nur ein Versuch, vielleicht gehts an deinem Problem vorbei... Lade die inhalt des Artikels uas der DB via PHP (oder sonstigen) in einen <Div> bereich. Dieser Div hat eine feste ID - über einen Button oder link setzt du dann das "isContentEditable" Flag auf true - dann solltest du den Artikel bearbeiten können. Beispiel aus der MSDN Libary: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/iscontenteditable.asp

bye

 

[Tim C.]

Ok gut, ich werde es mal probieren. Wusste nicht, dass das mit einem Div auch geht. Weil in dem einen Tutorial gehen die von einem iframe aus.

edit:
Dabei stellt sich irgendwie das Problem, dass ich nun den HTML Code des Inhalts des div nicht mehr so schön via object.document.body.innerHTML auslesen kann. Gibt es da irgendeine andere gute Alternative zu ?

Weil wenn ich schon für bearbeiten den div brauche, dann mach ich das ja beim neuschreiben nicht anders.

 

[Tim C.]

Also ich habe nun mittlweile ein etwas defizileres Problemchen, das aber sicherlich recht einfach zu lösen ist.

Also ich bin nun doch wieder beim iFrame angelagt und kann auch über eine JavaScript Funktion den Inhalt aus der DB meinem Feldchen zuweisen. Allerdings funktioniert das nur, wenn ich die Funktion über ein onClick Event nach dem Laden der Seite aufrufe. Wenn ich den Funktionsaufruf via onLoad im body Tag lösen will, dann meldet er mir, dass iView.document.body NULL oder kein Objekt ist.

Das meldet er mir zwar nach erfolgreichem laden in die Box via Button immer noch, aber dann habe ich wenigtens den Text drin.

Irgendwer eine Idee, wie ich das lösen kann ?

 

[Tim C.]

Und obwohl das letzte Problem noch nicht gelöst ist schon das nächste.
So wie ich das sehe, gibt es für execCommand kein Attribut, was das einfügen einer Tabelle ermöglicht. Sowas brauche ich aber unbedingt. Irgendwer eine Idee ?

 

[Andreas Gaisbauer]

Hi Tim,

für das alte Problem find ich auch keine Lösung, hab jetzt alles ausprobiert, was mir sinnvoll erschien - aber immer mit dem sleben ergebniss - der Fehler geht nicht weg... Zum Tabellen Problem. Ein fertiges Komando gibt es nicht - das muss du selbst schreiben. Ich würd das so angehen:

1) Kleines Popup Fenster öffnen lassen
2) Den User die Anzahl der Spalten und die Anzahl der Zeilen eingeben lassen
3) Aus diesen Angaben mir 2 For-Schleifen die Tabelle als String in eine Variable schreiben lassen
4) Diesen String zum Quellcode im Iframe hinzufügen...

also ungefähr so:

var tabelle = '<table>';
for(var x = 0; x<zeilen; x++){
    tabelle += '<tr>';
    for(var y=0; y<spalten; y++){
        tabelle += '<td>&amp;nbsp;</td>';
    }
    tabelle += '</tr>';
}
var tablle += '</table>';
iView.document.innerHTML... += tabelle;

ciao

 

[Fabian H]

Also ich find das ganze per Dic etwas komfortabler.

Du könntest es so machen:

<div id="contentfield" contentEditable">

Jetzte kannst du mit window.document.getElementById("contentfield") problemlos den Inhalt des Divs auslesen.

So kannst du dann eine Befehl ausführen:

window.document.getElementById("contentfield").focus();
window.document.execCommand("Bold");

Nun gibts da aber ein kleines Problem: Sobald man in einen Text ausserhalb des Divs klickt, wird die Selektion im Div deselektiert. Umgehen kannst du das, wenn du folgenden Code an das Ende des Dokumentes hängst:

allElements = window.document.all;
rc = false;

for (j=0; j<allElements.length; j++) {
    if (rc == false) {
        if (allElements[j].contentEditable != "true") {
            allElements[j].unselectable = true;
        } else {
            rc = true;
        }
    }
}