# Online WYSIWYG Editor: Selber machen oder anpassen ?



## Tim C. (15. September 2003)

Das Topic verrät eigentlich schon die Misere, in der ich stecke. Ich bin dabei ein größeres Homepage Projekt mit administrativem Backend zu erstellen. Auf dieser Content-Management-Ebene müssen natürlich auch Texte eingegeben werden können. Da ich bei der Zielgruppe des "CMS" nicht auf breite PC-Kenntnisse setzen kann, bietet sich meiner Meinung nach ein online-WYSIWYG Editor an, der von Buttons und Layout an MS-Word angelehnt ist.

Jetzt stellt sich mir die Frage:
- Soll ich sowas selber coden, wenn ja, gibt es dazu Tutorials
- oder reicht es eigentlich völlig aus, einen bestehenden Freeware Editor, z.B. FCKEditor anzupassen ?


----------



## Daniel Mannheimer (15. September 2003)

Kommt drauf an, was damit gemacht werden soll. Gerade wenn die PC-Kenntnisse nicht so doll sind würd ich zu einem minimalen Editor raten. Der "Normalmensch" ist mit der Flut an Funktionen schnell überfordert.


----------



## Fabian H (15. September 2003)

Ich kenn jetzt den Umfang von FCKEditor nicht, aber grundsätzlich sollte es nicht allzuviel Aufwand sein, selber einen zu machen.
Es spricht allerdings auch nichts dagegen, einen anderen zu modifizieren.
Im Endeffekt musst du es wissen, ob du dir die Arbeit machen willst, oder nicht.

Ich hab letztens auch mal einen etwas kleineren gemacht. Siehe Anhang. (HTML-Quelltext und Schriftart gehen nicht, weil die per Adminpanner verwaltet werden)

//Edit: Ach ja: richeditcall.html nicht richedit.html aufrufen


----------



## Thomas Lindner (15. September 2003)

Hier ne Variante von mir, noch nicht ganz fertig und auch nicht die aktuelleste Version!

Wird noch verbessert und beendet:


http://www.formularersteller.de/temp/testen_bitte.html


(Habe ich auch für ein CMS (News-System administrieren begonnen)!


----------



## Tim C. (15. September 2003)

Danke für  diesen ersten kleinen Einstieg. Also die Funktionen die ich brauchen werde sind, hoch-/tiefstellen, durchstreichen, kopieren/einfügen (man kann nicht davon ausgehen, dass die Zielgruppe Strg+C / Strg+V kennt), Bild einfügen (mit gekoppeltem Upload), Tabellen einfügen. Das war es eigentlich auch schon, da das ganze dann trotzdem noch in eine Art Template geladen wird, möchte ich dem User keinen Einfluss auf Farbe, Schriftgröße, Textausrichtung usw geben.

Die Lösung von Thomas wäre wohl am einfachsten umzusetzen von meiner Seite, jedoch wäre damit der Endnutzer wahrscheinlich schon wieder überfordert.

Was mich ausserdem an FCKEdit ärgert, ist dass es auf großgeschriebene deprecated html Tags zurückgreift à la <FONT>. Das hätte ich halt gerne valide.

Nuinmundo ? Deime Ansätze, wo hast du die hergeholt ? Javascript-Kenntnis ? oder irgendein Tutorial ? Naja ich werde mal deine ~600 zeilen code durchwuseln, ob ich draus schlau werden.


----------



## Fabian H (15. September 2003)

Wie, 600 Zeilen sind das schon?
Naja, das eigentlich wichtige ist die Funktion _cEdit_, bzw alles was in der JS-Datei vor den Klasen kommt.

```
menu.Addpoint("Linksbündig", "cEdit('JustifyLeft');");
```
In der Zeile ist z.B. alles, bis auf den zweiten Parameter der Funktion uninterresant für die eigentliche Funktion.

Tutorials: Hm, nicht direkt. Hab diese WYSIWYG Funktinalität des IE vor längerer Zeit mal irgendwo im Internet gesehen.
Seit dem mach ich ab und zu auch mal selber kleinere Editoren.
Was noch wichtig war/ist: die MSDN Library. Da stehen alle wichtigen Funkltionen von JScript drin.
Das ganze Ding ist auch für ein CMS.
Die Klassen sind letztendlich nur spielereien. Ich wollte einfach mal die Klassen in JavaScript ausprobieren und da der Code zum Aufbau des Fensters sowieso total unübersichtlich war, hab ich die eingebaut.
(Seit dem weiss ich: Es gibt keine Sprache, in der Klassen schlechter implementiert sind, als JavaScript  )

Ach ja, ganz wichtig: http://webfx.eae.net (ich glaub, da hab ich das Richedit-Ding zum ersten mal gesehen)


//edit:


> Was mich ausserdem an FCKEdit ärgert, ist dass es auf großgeschriebene deprecated html Tags zurückgreift à la <FONT>. Das hätte ich halt gerne valide.


Das ist halt die Microsoft Engine.
Wenn du die umgehen willst, na dann viel Spass...
bzw: Es kommt drauf an, wie du komplex du es haben willst, aber es muss ja z.b. schon geprüft werden, ob das jeweilige Element schon innerhalb des Tags ist, bzw ob Teile des Markierten Textes darin sind. Und das Gross-schreiben wirst du so gut wie gar nicht umgehen können. Es seii denn, du findest eine Lösung, mit der du in normale Divs schreiben kannst


----------



## Andreas Gaisbauer (16. September 2003)

Hallo Tim,

auf jeden Fall selber schreiben, schon allein des spaßes wegen . Hab noch 3 Links für dich:

http://www.devarticles.com/art/1/90 - Sehr schönes Tutorial
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/editing/tutorials/html_editor.asp weiteres Tutorial
http://www.bris.ac.uk/is/projects/cms/ttw/ttw.html - Die "Marktübersicht" 

Interessant ist auch die Tatsache, dass das ganze nicht mehr IE only sein muss (opera unterstützts trotzdem nicht). 

ok, dann viel spass beim schreiben 


ciao

PS:
@Nuinmundo


> (Seit dem weiss ich: Es gibt keine Sprache, in der Klassen schlechter implementiert sind, als JavaScript  )


wie wahr  wird/sollte sich aber mit Javascript 2.0 endlich bessern -> http://www.mozilla.org/js/language/js20.html


----------



## Tim C. (19. September 2003)

Ok habe jetzt das Tutorial von devarticles mal durchgearbeitet und gebe mich jetzt gleich daran mal anzufangen, sobald ich mir irgendwie klargemacht habe, wie ich den HTML Code in eine PHP-Variable bekomme.
In dem Tutorial ist nämlich nur irgendwas mit ASP beschrieben.

Naja ich denke ich lass den ganzen Code dann durch ein paar preg_replace laufen a) um dieses permanente TAG Großgeschreibe zu umgehen b) um z.B. lange Tags wie <strong> durch kürzere wie <b> zu ersetzen.

Naja danke für die Hilfe, ich meld mich wenn hakt


----------



## js-mueller (21. September 2003)

Hab mal ne Frage. Ist in den Tutorials erklärt wie auch für andere Browser geht?
Das würde mich nämlich am meisten interessieren.
Ich wollt mir jetzt nicht das ganze durchlesen um dann mittendrin zu merken das es net geht ;-)


----------



## Tim C. (21. September 2003)

Also die Lösung von devarticles läuft nur unter Internet Explorer.


----------



## Thomas Lindner (21. September 2003)

...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. (21. September 2003)

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 (21. September 2003)

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. (22. September 2003)

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 (22. September 2003)

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. (22. September 2003)

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. (22. September 2003)

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. (23. September 2003)

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 (23. September 2003)

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 (23. September 2003)

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;
        }
    }
}
```


----------



## horst (26. September 2003)

hallo  
wie kann ich den mit dem editor
"richedit.zip" die datei auf dem server speichern?
viele grüße  ....


----------



## Fabian H (26. September 2003)

Ich hab das bei mir so gemacht:

Ich hab einen unsichtbaren iFrame gemacht

```
<iframe style="width:0px;height:0px;" frameborder="0" src="saveframe.html" name="saveframe">
</iframe>
```
Die saveframe.html sieht so aus:

```
<html>
<body>
<form name="sform" action="admin.php" method="post">
    <input type="hidden" name="action" value="edit">
    <input type="hidden" name="seid" value="">
    <input type="hidden" name="step" value="2">
    <input type="hidden" name="code" value="">
</form>
</body>
</html>
```
Und die Funktion zum speichern sieht so aus:

```
code = window.document.getElementById("diveditable").innerHTML;

window.saveframe.document.sform.seid.value = seid;
window.saveframe.document.sform.code.value = code;
window.saveframe.document.sform.submit();
```

Nun kannst du in der admin.php mit _$_POST['code']_ auf den Inhalt darauf zugreifen und ihn z.B. in eine Datei schreiben o.Ä.


----------



## horst (27. September 2003)

hey dankeschön für deine flotte antwort ...
wie muss die admin.php aussehen?
oder habe ich etwas übersehen ?
wie muss ich dein beispiel mit den anderen dateien des richedit beispiels zusammenfügen?


----------



## Tim C. (10. Oktober 2003)

Verzeiht mir, dass ich meinen eigenen Thread nochmal neu hochhole, aber gehört einfach hier zu.

Ich kann ja Bilder einfügen, das ist auch alles kein Problem. Jetzt fragt mein "Kunde" resp. Arbeitgeber nach, ob es nicht möglich ist, die Bilder per Mouse frei im Dokument zu platzieren.

Hat einer eine Idee, wie man das angehen könnte ? Javascript + CSS Container evtl. ?

Wenn es zu aufwendig wird, geht das halt nicht.


----------



## horst (10. Oktober 2003)

das müßte weiter helfen:
http://msdn.microsoft.com/library/d...dhtml/reference/constants/IDM_2D_POSITION.asp


----------



## horst (10. Oktober 2003)

ich habe das mit dem speichern der seite immer noch nicht verstanden...
wer erklärt das einem anfänger ?
oder muss ich das woanders posten?


----------



## Tim C. (10. Oktober 2003)

Danke. Ich würde mir ja die Funktionsweise der Funktion gerne mal anschauen, aber ich habe absolut keine Ahnung, wie ich das einbinden soll.


----------



## horst (10. Oktober 2003)

ich benutze das nur in zusammenhang mit delphi...

habe hier aber was gefunden:
 document.execCommand("2D-Position", true, true);

auf dieser seite:
http://salsafuego.com/managesite/ace.htc


----------



## horst (10. Oktober 2003)

vielleicht hift dir das auch weiter
http://www.blox.tv/ie_55_editor
http://msdn.microsoft.com/library/en-us/dndude/html/carddesigner.asp


----------



## horst (11. Oktober 2003)

ich habe nun versucht das ganze als formular abzusenden...klappt aber auch nicht.  (kommen keine daten an) das beispiel zum abspeichern des richedit  ist bestimmt gut und richtig, ich kriege es nicht nachgebaut, mag mir jemand das nochmal etwas genauer beschreiben?


----------



## Tim C. (13. Oktober 2003)

Also ich habe es folgendermaßen gelöst. Beim klicken auf den Send Button, wird zunächst der HTML Code deines WYSIWYG Editors in ein hidden Feld eines Formulars geschrieben und dann wird das Formular abgeschickt. Bei mir wird es an eine PHP Datei übergeben, die die weitere Verarbeitung vornimmt.

Könnte z.B. so aussehen

```
<form name="hiddenForm" action="index.php?content=other&action=save" method="post">
    <input type="hidden" name="source" />
</form>

//und die Funktion die bei klicken des Send Buttons aufgerufen wird, heisst sendSource()
//und sieht folgendermaßen aus

function sendSource() {
      htmlCode = iView.document.body.innerHTML;
      document.hiddenForm.source.value = htmlCode;
      document.hiddenForm.submit();
}
```

Ich hoffe, das hilft dir etwas.

PS: Das freie verschieben funktioniert glaube ich nur, wenn man als Box ein Div verwendet. In einem iFrame scheint es nicht zu funktionieren.
Also werde ich wohl erstmal mit bestehenden Möglichkeiten das ganze auf dem iFrame zu Ende entwickeln und dann in meiner restlichen Zeit hier ohne "Druck"  das ganze evtl. auf ein DIV portieren.

Trotzdem danke für die Hilfe, habe ja jetzt gesehen, dass es geht.

Gruß
Tim


----------



## Andreas Gaisbauer (13. Oktober 2003)

> _Original geschrieben von Tim Comanns _
> * Das freie verschieben funktioniert glaube ich nur, wenn man als Box ein Div verwendet. In einem iFrame scheint es nicht zu funktionieren.
> Also werde ich wohl erstmal mit bestehenden Möglichkeiten das ganze auf dem iFrame zu Ende entwickeln und dann in meiner restlichen Zeit hier ohne "Druck"  das ganze evtl. auf ein DIV portieren.
> *


Hallo Tim, 
diesen Aufwand musst du gar nicht treiben, es funktioniert mit dem IFrame genausso:

Ich hab dir mal die "doImage()" Funktion erweitert - nicht 100% ok, aber es läuft  

```
function doImage() {
    var imgSrc = prompt('Enter image location', '');
    
    if(imgSrc != null)    
      imgSrc += '" style="position:absolute;';
      iView.document.execCommand('insertimage', false, imgSrc);
  }
```
Desweiteren musst du die Init() noch ergänzen:

```
function Init(){
    iView.document.designMode = 'On';
    iView.document.execCommand("2D-Position", true, true);
    window.setTimeout("iView.document.body.innerHTML = sourceCode",1000);
  }
```
danach sollte es eigentlich funktionieren...

bye


----------



## Tim C. (13. Oktober 2003)

Wenn du mir jetzt noch verrätst wie ich das einbaue, wenn man wie ich das ganze folgendermaßen gelöst hat, bekommst du nen Keks 

Ich habe ja ein Bilderpopup in dem alle zur Verfügung stehenden Bilder gelistet werden. Drückt man jetzt bei einem Bild auf hinzufügen führt der Klick im opener Fenster die doImage() Funktion aus.

Oder meinst du ich kann das einfach so pseudo mäßig an die URL anhängen ? Also an das URL Argument in der execCommand() Funktion ?


----------



## Andreas Gaisbauer (13. Oktober 2003)

Das ganze Problem bezieht sich auf dieses Stelle

```
imgSrc += '" style="position:absolute;';
```
wenn du auf ein Bild im Popup Klickst, dann denke ich mal, das der Aufruf von doImage() so aussieht (oder so ähnlich):

```
opener.doImage(this.src)
```
wenn das ungefähr stimmt, dann brauchst du das nicht an die Url hängen, du kannst es einfach in der "doImage" hinzufügen. Wenn du mir den Aufruf der do Image() im Popup und die aktuelle "doImage" Funktion postest, kann ich's dir demonstrieren 

bye


----------



## Tim C. (13. Oktober 2003)

Meine momentane Idee beinhaltet 2 Funktionen, fügt auch das Bild ein, allerdings nicht in der Editorbox sondern einfach im IE irgendwo. Sieht auch sehr lieblich aus 
Also

```
//Funktion doImage() wird aufgerufen beim Klick auf Button "Bild einfügen"
function doImage() {
    window.open('select_image.php','imageselect','width=510 height=300 scrollbars=yes');
  }

//In dem Popup gibt es folgende Stelle
<button name="add_image" onClick="opener.addImage('/final project/images/uploaded/<?php echo $file;?>')">hinzufügen</button>

//Und die Funktion addImage wiederum sieht so aus
function addImage(imgSrc) {
      imgSrc += '" style="position:absolute;';
      iView.document.execCommand('insertimage', false, imgSrc);   
  }
```
Wie gesagt. Leider ballert mir der Code das Bild in den IE und nicht in die Box.

EDIT: jetzt gehts irgendwie, zu geil 

Das einzige was mich bei genauerem darüber nachdenken wurmt ist, dass mir das ganze nichts nützt. Da das ja nur die Eingabemaske ist. Im Layout werden mit die Position absolute Angaben nichts bringen, da sie sich schätzungsweise falsch orientieren werden.


----------



## Andreas Gaisbauer (13. Oktober 2003)

> _Original geschrieben von Tim Comanns _
> *
> Das einzige was mich bei genauerem darüber nachdenken wurmt ist, dass mir das ganze nichts nützt. Da das ja nur die Eingabemaske ist. Im Layout werden mit die Position absolute Angaben nichts bringen, da sie sich schätzungsweise falsch orientieren werden. *


Hmmm... das kann echt ein Problem werden, aber evtl kannst du eine Funktion schreiben, die die absoluten Werte ergänzt (z.B. um den Platz den die Navigation braucht) - ansonsten wirds wohl echt nix bringen  - eine andere Möglichkeit  ohne position:absolute ist mir aber leider auch nicht bekannt  . Obwohl... vielleicht doch  - du kannst versuchen den Inhalt in eine Div zu schreiben, das sollte eigentlich klappen, da die absolut Werte am Rand der Elternelemente gemessen  werden. THEORETISCH sollte es klappen, praktisch musst du es erst testen...

bye


----------



## horst (14. Oktober 2003)

vielen dank...ich habe jetzt erst eure antworten gesehen, hab di mail wohl übersehen.
ich probier das glaich mal aus...


----------



## horst (15. Oktober 2003)

ich bekomme das nicht gebacken, hat jemand den nerv mir ein komplettes funktionierendes beispiel zuzeigen oder zu schicken? 


> Bei mir wird es an eine PHP Datei übergeben, die die weitere Verarbeitung vornimmt.


 @ Tim  
 das ist genau mein problem...wie muss den diese phpdatei aussehen...was macht die genau?
oder hab ich ein brett vorm kopf?


----------



## Tim C. (20. Oktober 2003)

@horst: Naja diese PHP Datei schreibt die Formulardaten, welche sie via POST übermittelt bekommt, in eine MySQL DB.

Wie komplex wäre es, "eigene" Funktionen zu implementieren ? Zum Beispiel existiert keine funktionstüchtige Funktion für Blocksatz. Änder ich jedoch in dem betreffenden <p> align auf justify, dann hat der Absatz Blocksatz.

Ich kann dem Endnutzer aber unter keinen Umständen zumuten/erlauben im HTML Code an sich rumzuspielen.

Also hat da einer eine Idee, wie ich mir selbst eine Funktion dazu schreibe ?


----------



## Andreas Gaisbauer (20. Oktober 2003)

Hi Tim,
ich hab zuminderst einen Ansatz - das Problem wäre jetzt das zurückschreiben in den Frame an die richtige Stelle (dazu hatten wir aber einen Thread vor kurzem (JS Forum). Topic: "Kann jemand den Code erklären" oder so ähnlich). Hab jetzt leider nicht die Zeit ihn zu suchen. Hier mein Ansatz:

```
<html>
<head>
    <script type="text/javascript">
      function justify(){
       if(document.selection.createRange().text!=""){
         var temp=(document.selection.createRange().text);
         var temp2='<p align="justify">';
         var temp3='</p>';
         var justified = temp2.concat(temp.concat(temp3));
         
         alert(justified); // Das irgendwie zurückschreiben in 
                           // den Frame
         
       }else{
         alert("Sie müssen Text markiert haben");
       }
      }
    </script>
</head>
<body>

<a href="#" onClick="justify(); return false;">justify</a>
<form name="txt">
<textarea name="inhalt">Test Test Test Test Test</textarea>
</form>
</body>
</html>
```

ciao Andreas


----------



## Tim C. (22. Oktober 2003)

Danke Andreas, aber ich habe beschlossen, dass Feature Blocksatz ist nicht durchzuführen  zumindest nicht bei Release v1.

Next Question: Ist es möglich für das Editor Fenster eine Stylesheet Datei zu definieren ? Das würde ich ganz gerne machen, da sich die Sache mit dem Zeilenumbruch recht problematisch darstellt, da ein <Enter> ja einen neuen <p> beginnt. In der Ausgabe kann ich diesen zwar via margin: 0px  "ignorieren" und wie einen <br> behandeln, allerdings sollte das ganze ja auch in dem WYSIWYG Editor so aussehen sonst wäre es ja eher ein WYSINRWYG (NR = not really) Editor 

PS: Ich glaube wenn das Dingen Fertig ist, kann man daraus ein SEHR umfangreiches Tutorial basteln *händereib*


----------



## Andreas Gaisbauer (22. Oktober 2003)

> _Original geschrieben von Tim Comanns _
> *Next Question: Ist es möglich für das Editor Fenster eine Stylesheet Datei zu definieren ? Das würde ich ganz gerne machen, da sich die Sache mit dem Zeilenumbruch recht problematisch darstellt, da ein <Enter> ja einen neuen <p> beginnt. In der Ausgabe kann ich diesen zwar via margin: 0px  "ignorieren" und wie einen <br> behandeln, allerdings sollte das ganze ja auch in dem WYSIWYG Editor so aussehen sonst wäre es ja eher ein WYSINRWYG (NR = not really) Editor
> *


Hmmm... ich hab was, weis aber nicht ob das für deine Zwecke optimal  ist...

```
function setCSS(){
    iView.document.open();
    iView.document.write('<html><head><style type="text/css">p{background-color:green;}'
                        +'</style></head><body></body></html>');
    iView.document.close();
}
```
Ich hab hier zur verdeutlichung nur die Hintergrundfarbe von <p>s geändert. Das Ganze muss dann "onLoad" VOR der Init() (die Funktion die den Inhalt in den Editor schreibt) geladen werden. Also: <body onLoad="setCSS(); Init();"> . Es sollte auch laufen wenn du nicht direkt den Style schreibst sondern ein externes Sheet  einbindest.... Wenns auch einfacher geht, lasst es mich wissen.




> _Original geschrieben von Tim Comanns _
> *PS: Ich glaube wenn das Dingen Fertig ist, kann man daraus ein SEHR umfangreiches Tutorial basteln *händereib*  *


Daran hab ich auch schon gedacht. Vielleicht wirds ja eine CoProduktion 

bye Andreas


----------



## Tim C. (23. Oktober 2003)

Danke das hat soweit funktioniert. Zwar ging das einbinden des externen Stylesheet nicht so recht, aber mehr als Schriftgröße und und margin musste ja eh nicht eingestellt werden. 

Danke nochmals.



> Daran hab ich auch schon gedacht. Vielleicht wirds ja eine CoProduktion


Davon ist, bedingt durch deine immense Hilfe, schwer auszugehen


----------



## MyCoder (27. Oktober 2003)

Hi

das brauchst Du nicht ein br-tag bekommst du mit [shift]+[Enter],  so  ist bei mir.

MfG


----------



## Thomas Lindner (27. Oktober 2003)

@ mYCoder:

Das mag in deinem Wysiwyg Editor funktionieren, weil er auf einer Executable unter Windows basiert, aber fürs Internet nutzt das Null, Null und Nichts!


----------



## Tim C. (27. Oktober 2003)

@MyCoder: Das funktioniert zwar, allerdings springt er damit aus dem zuvor eingestellten Ausrichtungsmodus (links, zentriert, rechts) raus und ausserdem kann ich das der Zielgruppe nicht antun.


----------



## MyCoder (27. Oktober 2003)

Hi

sowie ich Tim verstanden habe wollte er sowieso mit "execCommand" (ie)
arbeiten und da  das. Sonst ein onKeyEvent mit einbauen und damit klappt das dann auch. 

MfG


----------



## cgdesign (4. November 2003)

hallo,

ich habe gerade gelesen das es um den FCKeditor geht, vielleicht könnt ihr mir ja weiter helfen! Also es geht darum das ich den installiert habe usw. und er schreibt mir auch alles in die DB aber die Umlaute von äöüß usw. die stellt er nicht da. Ich habe keine Ahnung wieso das nicht geht... hatte einer von euch auch schon mal damit Probleme gehabt und kann mir dabei helfen?

Vielen Dank

Grüße


----------



## Xps (27. Dezember 2003)

*Dhtml Online Editor problem*

Ich hab ein großes Problem, wenn ich ein Bild einfügen,das wir d zwar angezeigt. Aber die Ausgabe mach einen Fehler rein, der Pfad zum Bild stimmt nicht.


*Fehler:*

```
<IMG alt=test hspace=0 src=\"http://www.i-lib.de/banner/klamm_468x60_dyn1.gif\" align=left border=0>
```
*Code zum Einfügen:*

```
function insertImage()
{
	window.document.getElementById("divEditable").focus();
    thetext = window.document.selection.createRange();

    if (thetext.text != undefined) {
	    swnd = window.showModalDialog("editor_bilder.php", "", "dialogHeight: 193px;dialogWidth: 450px;status:no;");

	    if (swnd[0] != "") {
	        text2paste = "<img src=" + swnd[0] + " alt=" + swnd[1] + "";
	        if (swnd[2] != "") {
	            text2paste += " border='"+swnd[2]+"'";
	        }
	        if (swnd[3] != "none") {
	            text2paste += " align='"+swnd[3]+"'";
	        }
	        if (swnd[4] != "") {
	            text2paste += " hspace='"+swnd[4]+"'";
	        }
	        if (swnd[5] != "") {
	            text2paste += " vspace=\""+swnd[5]+"\"";
	        }
	        text2paste += ">";

	        thetext.pasteHTML(text2paste);
	    }
    } else {
    	window.document.execCommand("InsertImage", true);
    }
}
```


----------



## tomi (6. April 2004)

Hallo!

Tut mir Leid dass ich diesen alten Thread ausgraben musste. Aber ich habe ein ähnliches Problem wie horst.

Und zwar, also ich verstehe wie der Inhalt an die Datei 'admin.php' weitergeleitet wird.
Es is jetzt aber so, dass ich in die Datei eine kleine Funktion geschrieben habe, die mir durch einen Eintrag in eine DB zeigt ob die Datei 'admin.php' tatsächlich von diesem Editor per Speichern aufgerufen wurde.

Aber dies ist eben nicht der Fall. Es werden keine Daten an die Datei 'admin.php' weitergegeben. Was kann ich da tun? Danke schonmal.


----------



## MarkiMark1985 (7. Februar 2005)

huhu also der FCK editor ist shcon ein nettes kleines Prg. nur ich habe null Plan mit Datenbanken...

Kann mir jemand sagen, wo es ggf. Anleitungen oder auch selbstgeschriebene Prg. ggf. gibt, wo man einfach nur noch DB Name usw. eingibt und dann HTML Seiten los editieren kann?

LG


----------



## Thomas Lindner (7. Februar 2005)

MarkiMark1985 hat gesagt.:
			
		

> huhu also der FCK editor ist shcon ein nettes kleines Prg. nur ich habe null Plan mit Datenbanken...
> 
> Kann mir jemand sagen, wo es ggf. Anleitungen oder auch selbstgeschriebene Prg. ggf. gibt, wo man einfach nur noch DB Name usw. eingibt und dann HTML Seiten los editieren kann?
> 
> ...



Ich glaube mal das Zauberwort ( Suchbegriff ) für dich könnte sein: CMS

Ein CMS kann zumindest solche Aufgaben erledigen / "automatisieren"...


----------



## MarkiMark1985 (7. Februar 2005)

mhhh danke für den tipp, ist es den möglich den fck editor mit dem typo cms zu verwenden
wo gibt es ggf. dafür eine anleitung.

meine seite hat eine index.php, wo die html seiten reingeladen werden...


----------



## Thomas Lindner (7. Februar 2005)

MarkiMark1985 hat gesagt.:
			
		

> mhhh danke für den tipp, ist es den möglich den fck editor mit dem typo cms zu verwenden
> wo gibt es ggf. dafür eine anleitung.
> 
> meine seite hat eine index.php, wo die html seiten reingeladen werden...



Da bin ich überfragt, am besten stellst du deine Frage mal im fachspezifischen Forum für Content Managment Systeme ( bei uns ).


----------



## tomate (22. Februar 2005)

Hallo zusammen,
auch ich habe einen WYSIWYG-Editor gebastelt und habe eine Frage zur Formatierung.
Angenommen man markiert ein Wort und möchte es "Fett" machen.

Ergebnis Firefox:

```
<span style="font-weight: bold;">Fett</span>
```
Ergebnis IE6:

```
<strong>Fett</strong>
```
Das hat zur Folge, daß der Text in jeweils anderen Browser nicht mehr zu editieren ist. Sprich, hat man die Änderungen im Firefox durchgeführt, kann diese Änderung im IE nicht mehr verändert werden und umgekehrt.

Kann man diesen Umstand umgehen?

Viele Grüße
Spielplan


----------

