Erfahrungen mit WYSIWYG-Editor + APF

[Megger]

Hi

Habe in letzter Zeit versucht bei mir einen WYSIWYG Editor zu integrieren. Wegen diesem Thema bin ich darauf gekommen. Habe auch schon probiert den tiny_mce Editor einzubauen. Nachdem ich allerdings das _-Problem gelöst hatte, werden keine weiteren Fehler angezeigt. Firebug zeigt die korrekte Einbindung der Datei an und auch die Javascript-Konsole zeigt keine Fehler an, allerdings bleibt die Textarea wie sie ist. Habe schon unzählige Einstellungsmöglichkeiten durch und auch die FAQ von TinyMCE zur Rate gezogen, allerdings will er nichts anzeigen.

Deswegen wollte ich mal Fragen ob schon wer Erfahrungen hat und vielleicht einen Editor empfehlen kann?

[APFelsahne]

hab gute erfahrungen mit dem ckeditor (http://ckeditor.com/) gemacht.
hat bei mir bisher immer gut funktioniert und lies sich auch anpassen, so dass eigene css-klassen etc verwendet werden können.

[dr.e.]

Dito, ich verwende ebenfalls den CKEditor und habe mir eine Taglib geschrieben, die Mandanten (=Context)-abhängige Konfiguration bezieht. Etwas gewöhnungsbedürftig ist am Anfang zwar die Konfiguration der angebotenen Menüs, aber das steht in einem HOWTO ganz gut beschrieben. Bei Interesse kann ich auch gerne den Code posten.

[Megger]

Ja das wäre gut wenn du den Code mal postest. Werde den Editor heute Abend mal ausprobieren.

[dr.e.]

Hallo Tobias,

hier ist der Quelltext:

Code: Alles auswählen

   class form_taglib_ckeditor extends form_control {

      public function transform(){
         
         $id = $this->getAttribute('id');
         if($id === null){
            throw new InvalidArgumentException('id attribute not set!',E_USER_ERROR);
         }

         $tagContent = (string)'';
         $tagContent .= '<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>';
         $tagContent .= '<script type="text/javascript" src="./ckeditor/config.js"></script>';
         $tagContent .= '<textarea ';
         $tagContent .= $this->__getAttributesAsString($this->__Attributes);
         $tagContent .= '>'.$this->getContent().'</textarea>';
         $tagContent .= PHP_EOL.'<script type="text/javascript">';
         
         // config see http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
         $tagContent .= '  CKEDITOR.replace(
            \''.$id.'\',
            {
               customConfig : \''.$this->getCustomConfigPath().'\',
               height: 600,
               filebrowserWindowWidth : \'1000\',
               filebrowserWindowHeight : \'700\',
               toolbar: [
                           [\'Source\',\'-\'],
                           [\'Bold\',\'Italic\',\'Underline\',\'Strike\',\'-\',\'Subscript\',\'Superscript\'],
                           [\'NumberedList\',\'BulletedList\',\'-\',\'Outdent\',\'Indent\',\'Blockquote\',\'CreateDiv\'],
                           [\'JustifyLeft\',\'JustifyCenter\',\'JustifyRight\',\'JustifyBlock\'],
                           [\'Link\',\'Unlink\',\'Anchor\'],
                           [\'Image\',\'Flash\',\'Table\',\'HorizontalRule\',\'SpecialChar\'],
                           \'/\',
                           [\'Styles\',\'Format\',\'Font\',\'FontSize\'],
                           [\'TextColor\',\'BGColor\'],
                           [\'ShowBlocks\'],

                           [\'Cut\',\'Copy\',\'Paste\',\'PasteText\',\'PasteFromWord\'],
                           [\'Undo\',\'Redo\',\'-\',\'Find\',\'Replace\',\'-\',\'SelectAll\',\'RemoveFormat\'],
                        ],
               startupOutlineBlocks : true,
               disableNativeSpellChecker : true,
               scayt_autoStartup : false
            }
         );';
         return $tagContent.PHP_EOL.'</script>';
         
       // end function
      }

      private function getCustomConfigPath(){
         $configBasePath = Registry::retrieve('apf::core','URLBasePath');

         $url = parse_url($_SERVER['REQUEST_URI']);
         if(isset($url['path'])){
            $configBasePath .= preg_replace('~/$~','',$url['path']);
         }

         $env = Registry::retrieve('apf::core','Environment');
         $customer = Registry::retrieve('cms::core','Customer');
         return $configBasePath.'/config/'.$env.'_config_'.$customer.'.js';
      }

      /**
       * Implements presetting for the ckeditor.
       */
      protected function __presetValue(){
         $name = $this->getAttribute('name');
         if(isset($_REQUEST[$name])){
            $this->setContent($_REQUEST[$name]);
         }
      }
      
    // end class
   }

Aktuell nutze ich die Registry um die Customer- und Umgebungs-abhängige Konfiguration zu laden. Das ist deshalb wichtig, da dort unterschiedliche Stylesheet-Locations auftreten können, die für die WYSIWYG-Styles geladen werden müssen/sollen.

[Megger]

Funktioniert wunderbar, danke für den Code

[dr.e.]

Freut mich. Ich habe das gleich ins Wiki gepostet: http://wiki.adventure-php-framework.org ... -Formulare

[Megger]

Ein Problem habe ich noch:
Wie kann man mehrere Instanzen des CKEditor auf einer Seite nutzen? Habe gedacht, dadurch, dass ich verschiedene IDs verwende, sollte es eigentlich ohne Probleme möglich sein zwei Instanzen zu haben. Allerdings kann ich nur in einem Editor etwas schreiben und wenn ich auf einen Knopf drücke, dann reagieren beide Editoren.

Code: Alles auswählen

<form:ckeditor id="ShortText"></form:ckeditor>
<form:ckeditor id="Description"></form:ckeditor>

Muss ich da noch irgendetwas beachten? Habe in der Dokumentation nichts gefunden (die finde ich eh ziemlich kurz, oder ich habe die richtige Dokumentation noch nicht gefunden)

[dr.e.]

Hallo Tobias,

soweit ich das verstanden habe muss sowohl das "id"- als auch das "name"-Attribut gesetzt werden. In den Beispielen auf der DEMO-Seite unter "Skins" sind mehrere eingebunden. Kannst mal vergleichen, ob deine Einbindung mit der dort übereinstimmt.

[Joe]

Hallo Leute,

ich habe neuerdings Probleme mit dem Einbinden verschiedener Editoren (TinyMce und Ckdeditor). Habe die Editoren bisher über den Code im Forum eingebunden und nun schlägt die Content Security Policy (CSP) von Chrome Alarm und verhindert das Ausführen von Javascript (Buttons sind ausgegraut, bei FIrefox / Edge das gleiche, im IE geht zwar alles aber das freut mich eher weniger...)

Die Meldung lautet dann immer >>Refused to execute inline script because it violates the following Content Security ... usw.<<

Ich weiß nicht warum die CSP vom APF getriggert wird, da das eigentlich nur bei der Entwicklung von Chrome Extensions passieren sollte. (Bei einem einfachen lokalen Beispiel ohn APF funktionierts mit dem Inline-Script, daher hats wahrscheinlich was mit meinen Einstellungen im APF zu tun.

Der Fehler passiert egal an welcher Stelle ich die Editor-Dateien einbinde (head/body), für Ideen /Vorschläge zur Lösung wär ich sehr dankbar,

Gruß Joe

[dr.e.]

Hallo Joe,

willkommen im APF-Forum!

Das von dir beschriebene Problem klingt spannend. Um das näher zu analysieren und zu verstehen wäre es interessant, welche HTTP-Header der Server bei Auslieferung der Seite schickt. Sollte die CSP forciert werden, sollten wir einen entsprechenden Header dazu finden.

Auch interessant wäre ein kurzes Snippet wie und wo du die Libraries einbindest ("lokal" vom Server oder von der Anbieter-Domain).

Ich denke damit kommen wir dem Problem näher.

[dr.e.]

Hallo Joe,

konnte ich dir weiterhelfen? Falls nicht, lass mich das gerne wissen.