Online WYSIWYG Editor: Selber machen oder anpassen ?

[Tim C.]

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]

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.]

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]

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.]

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]

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]

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

 

[horst]

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.]

@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]

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