CKEditor für WebsiteBaker - Bitte testen!

[Stefek]

Ja, genau.
Den CKE kann man so ziemlich für jeden Block im Frontend aufrufen.
Und grade deswegen wäre eine solche Template by Block Sache sehr sinvoll.

Stell dir jetzt John Doe am Rechner vor, der den Block im Frontend editieren will, wo keine Bilder reindürfen, da es für diesen Block aber kene editor....js gibt, haut er die trotzdem rein, plus eine H1 überschrift, weil er es schön groß haben möchte.

Einfachheit sollte nicht mit Armut verwechselt werden.
Das beste Design ist einfach. Aber nur, wenn es seine Funktion erfüllt

[Waldschwein]

Hallo!

Das ist ja wirklich komisch. Egal was ich versuche - es klappt einfach nicht. 

1.) Versuch:
Das hier: http://stackoverflow.com/questions/2701970/ckeditor-plugin-insert-php-variable-not-included
So macht es eigentlich auch die ckeditor.php selbst - also sollte es ja eigentlich funktionieren, aber mag nicht.

2.) Versuch:
Die wbdroplets.php umzuschreiben in

Code:

<?php

/**
 * @category        modules
 * @package         wysiwyg - ck editor - wbdroplets
 * @author          WebsiteBaker Project, Michael Tenschert
 * @copyright       2010, Michael Tenschert
 * @link            http://www.websitebaker2.org/
 * @license         http://www.gnu.org/licenses/lgpl.html
 */

// Include the config file
require('../../../../../../config.php');

// Create new admin object
require(WB_PATH.'/framework/class.admin.php');
$admin = new admin('Pages', 'pages_modify', false);

global $database;
$get_droplet = $database->query("SELECT * FROM `".TABLE_PREFIX."mod_droplets` where `active`=1 ORDER BY `name`");

$list = "[";
$desc_list = "var info = new Array();";

if($get_droplet->numRows() > 0) {
    
    /**
     *    Loop through ...
     *
     */
    while($droplet = $get_droplet->fetchRow()) {
        
        $title    = stripslashes($droplet['name']);
        $desc    = stripslashes($droplet['description']);
        $comm    = stripslashes($droplet['comments']);
        
        $list .= "\n['".$title."', '[[".$title."]]'],";
        $desc_list .= "info['[[".$title."]]']='".trim($desc)."<br /><br />".trim($comm)."';"; 
        
    }
    $list = substr( $list, 0, -1 );
}
$list .= "]";
$desc_list .= "\n";
$js = "
<script type=\"text/javascript\">
CKEDITOR.dialog.add( 'wbdropletsdlg', function( editor ) {
    return { 
        title: editor.lang.wbdroplets.name,
        minWidth: 280,
        minHeight: 80,
        contents: [ 
            {
                id: 'tab1',
                label: 'Tab1',        
                title: 'Tab1',
                elements : [{
                        id: 'wbdroplets',
                        type: 'select',
                        label: \"Droplets\",
                        labelLayout:'horizontal',
                        widths:['20%','80%'],
                        style: 'width: 150px; margin-left: 10px; margin-top:-3px;',
                        validate : function() { },
                        items: " . $list .",
                        onMouseUp: function() { 
                            /** 
                             *    code to display the description of the droplets ... 
                             *
                             */
                            echo ".$desc_list.",
                            var droplet_name = this.getValue();
                            var ref = document.getElementById(\"droplet_info\");
                            ref.innerHTML = info[droplet_name];
                        },
                        onShow: function() { 
                            this.onMouseUp();
                        }
                    } , {
                        id: 'droplet_info_box',
                        type: 'html',
                        label: 'Info',
                        labelLayout:'horizontal',
                        widths:['20%','80%'],
                        style:    \"display: inline; \" +
                                \"float: left; \" +
                                \"margin-left: 0; \" +
                                \"padding-left: 10px; \" +
                                \"width: 250px !important; \" +
                                \"height: 100px;\" +
                                \"white-space: normal !important;\",
                        html: \"<div id='droplet_info'>Hello</div>\"
                    } ] 
            }
            ],
         onOk: function() {
             
             /**
              *    Getting the value of our droplet-select
              *
              */
             var droplet_name = this.getContentElement(\"tab1\", \"wbdroplets\").getInputElement().getValue();
             
             editor = this.getParentEditor();
             editor.fire('paste', { 'text' : droplet_name } );
             
            return true;
         },
       
         resizable: 2
    };
} );
</script>";
echo $js;
?>

Aber leider auch hier kein Erfolg, obwohl (laut Quelltext) der PHP Code ja schon ausgeführt wird. Also sollte man der Lösung nahe sein...
Firefox Fehlerkonsole meldet bei 2. Versuch:

Fehler: syntax error
Quelldatei: http://www.websitebaker-dev.org/wborg/modules/ckeditor/ckeditor/plugins/wbdroplets/dialogs/wbdroplets.php?t=A39E
Zeile: 4, Spalte: 4
Quelltext:
    return { 
----------------------
Fehler: [CKEDITOR.dialog.openDialog] Dialog "wbdropletsdlg" failed when loading definition.
Quelldatei: http://www.websitebaker-dev.org/wborg/modules/ckeditor/ckeditor/ckeditor.js?t=A39E
Zeile: 96

Hmm... Kennt sich da jemand aus?

Gruß Michael

[aldus]

Hallo Michael

Ja - der kommt mit den Hochkommata durcheinander ... aber warum erst in eine (temp) Variable schreiben?
Damit hast Du es mit dem de-buggen drei-fach-schwerer ...

Egal - hier nun das WB Page(-link) Modul ...

Gruß
Aldus

[Waldschwein]

Hallo!

Nun, ich wollte das in eine Variable schreiben, weil man so das Problem auf vielen Servern umgehen kann, dass eben der JavaScript Teil nicht ausgeführt wird in der PHP.
Momentan ist das Problem, dass auf XAMPP die Plugins mit der einzelnen .php wunderbar funktionieren - aber kommen sie auf einen Webserver, funktioniert der JavaScript Teil nicht mehr.
Ich habe schon alle Möglichkeiten durchprobiert - letztendlich wird man wohl AJAX / JSON bemühen müssen. Letzteres aber wird wohl weniger sinnvoll sein, da es PEAR vorraussetzt, und das würde wohl das (Core)-Modul sprengen.
So frei nach http://www.rutschmann.biz/php-javascript-mysql/wie-funtkioniert-ajax-mit-php-und-jquery/wie-funtkioniert-ajax-mit-php-und-jquery.html - weil jQuery gibt's ja schon, oder PQuery http://www.ngcoders.com/pquery/user_guide/help/start.html
Allerdings xajax habe ich mir auch angesehen - das ist zu komplex für das kleine Problem.
Vielen lieben Dank für das Modul - sieht gleich besser aus!

Edit: Ok, das WBLink Modul funktioniert nun wunderbar - aber eben nur auf XAMPP. Wenn es so überall funktionieren würde wäre es wirklich super. Nur kommt man da eben um eine AJAX / XML / "bugfreie" Lösung meinerseits da oben nicht drum herum...

Gruß Michael

[aldus]

?? Da bist Du aber leider auf dem Holzweg.
Der JS Block wird definitiv an der Stelle __nicht__ ausgeführt, sonder die Def. nur __angefordert__
und erst, wenn ich den Dialog-Prozess los-"trete" ausgeführt .... zu dem Zeitpunkt hat PHP rein gar nichts
mehr mit der Source oder dem Prozess zu tun. Siehe Rübe - Buttons u.s.w __vorgeladen__ aber funktionier(t)en
nicht (wg. Pfadproblemen). Egal ... solange die Großbuchstaben da noch mit drin sind ist es mit Unix essig.

Ansonsten: wenn Du es dennoch so herum aufbröseln willst, verlierst Du alle Unterstüzzung duch einen
JS-Editor, auch ZDE kommt da durcheinander und kann nicht mehr helfen: weil die nicht mit bekommen,
das deine einfache Zeichenkette ein ausführbarer Code sein soll. Für die ist das nichts weiter als ein String ...
Zusätzlich hast Du Probleme mir reservierten Befehlen/Zeichen wie "rerturn" oder "+" die in PHP und
JS unterschiedlich behandelt werden ...

Wenn schon, dann nimm irgendeine (am besten die von WB selber) Template-engine und lager das JS aus dem
PHP Block aus ... dann kannst Du wenigstens das JavaScript sauber debuggen.

Gruß
Aldus

[Waldschwein]

Hallo aldus,

nein, ich habe alles durchprobiert - an der Groß und Kleinschreibung liegt es definitiv nicht.
Ich kann dir einen Zugang geben, wenn du willst auf einem Server, wo es auch nicht funktioniert - ich habe zum Beispiel grundsätzlich alles klein geschrieben - keine Änderung. Es wird erst das Dialogfenster geöffnet, wenn die /dialogs/wbxy.php in eine dialogs/wbxy.js (!) umgenannt wird - was aber natürlich dann den PHP Teil ausführt.
Also:
Entweder man hat eine .php, wo der JS Teil nicht ausgeführt wird (weil die Buttons werden ja _nicht_ in der /dialogs/wbxy.php definiert, sondern in der plugins.js, die erst einmal die dialogs überhaupt aufruft, siehe http://docs.cksource.com/FCKeditor_3.x/Design_and_Architecture/Dialog_System#Workflow ) oder man hat eine .js, wo der PHP Teil nicht ausgeführt wird.
Beides zusammen geht aber nicht!

Edit: Ich wollte noch anmerken, dass ich mit ziemlicher Sicherheit einen ähnlichen Server wie Rübe habe - wir sind beide bei AllInkl.

Gruß Michael

[DarkViper]

Also irgendwie hört sich das alles wie eine Megamäßige Sammlung aus Kraut und Rüben an....

Evt. einmal die Grundlagen auffrischen:

JS => Javascript:: eine Scriptsprache, die ausschließlich im Browser des Besuchers ausgeführt wird. Für einen Webserver sind JS-Zeilen nichts anderes als eine sinnlose Aneinanderreihung seltsamer Zeichen, mit denen er absolut nichts anfangen kann.

PHP:: eine Scriptsprache, die ausschließlich auf dem Webserver ausgeführt wird. Kein Browser der Welt kann damit auch nur das geringste anfangen. Einzig die per Echo oder Print ausgegebenen Texte werden vom Webserver an den Browser weitergeleitet.

Die normalerweise einzige Verbindungsmöglichkeit zwischen diesen grundverschiedenen Welten besteht darin, dass ein PHP-Script gültigen JS-Code als String aufbauen und in <script>-Tags geklammert an den Browser senden kann, der daraufhin den JS-Text parst und ausführt. Rückmeldungen an PHP sind innerhalb des Programmablaufes nicht möglich.

Ablauf:  erst wird auf dem Server das PHP-Script vollständig abgearbeitet und beendet. Sämtliche Ausgaben werden in reiner Textform an den Browser geschickt und die Verbindung danach beendet. Der Browser parst jetzt den übergebenen Text nach HTML-Tags und stellt diese auf dem Bildschirm dar. Wird zwischendurch ein <script>-Tag mit gültigem JS-Code entdeckt, so stoppt die HTML-Ausgabe, das JS-Script wird ausgeführt und danach die Ausgabe der HTML-Tags fortgesetzt.

[Waldschwein]

Hallo!

Und genau das ist das, was ich nicht wirklich verstehe - denn manchmal werden die Plugins von aldus ausgeführt, manchmal nicht. Gibt es da irgendeinen php.ini Wert, der automatisch JavaScript parsen kann? Keine Ahnung, ist ja alles möglich...

Die Verbindung zwischen PHP und JavaScript ist wirklich nur mit <script> möglich. Aber theoretisch weiße ich in der .php einer Javascript Variable (siehe den $out... Aufruf) den PHP Wert zu und greife dann mit der JavaScript Datei auf die JavaScript Variable in der PHP-Datei zu. Soweit die Theorie...

Gruß Michael

[DarkViper]

Aber theoretisch weiße ich in der .php einer Javascript Variable (siehe den $out... Aufruf) den PHP Wert zu...

Genau diese Denkweise ist falsch!
Du machst innerhalb einer .php nichts anderes als den JS-Quelltext zu verändern, bevor dieser an den Browser gesendet und dort dann ausgeführt wird. Du hast niemals die Möglichkeit, aus PHP heraus Variablen im laufenden JS zu ändern. Da kannst die PHP.ini auf den Kopf stellen oder vorher rückwärts verknoten... das ist einfach physikalisch unmöglich.

[Waldschwein]

Hallo!

So, vielen Dank aldus - ich habe wohl doch mehr Probleme gemacht als eigentlich vorhanden waren. (Man sollte auch seine Testinstallationen pflegen...).

Es gibt jetzt eine Version, die zwar "nur" 0.2.8 heißt, aber ich schon fast als RC bezeichnen würde - es funktioniert alles, auch auf manch komischen Servern (alle sieht man eh erst später...).


AMASP: http://www.websitebakers.com/pages/admin/admin-tools/ckeditor.php
Git: http://github.com/Tenschert/ckeditor/downloads
Bitte alle und alles testen - die Version sollte nun wirklich alles können und machen was sie verspricht!
Am besten: Alle bisherigen CKEditor Module / Installationen / wie auch immer deinstallieren und völlig neu diese hier installieren.

Gruß Michael

[mr-fan]

Hi,

also echt eine klasse sache dieser Editor.....auch der "alte" Filemanager passt da schon mit rein (evtl. kann man ja die Optik noch ein wenig auffrischen)

getestet Lokal auf mehreren Installationen und Einstellungen/_fast_ alle Optionen des CKE durch...

:: WBdroplets Plugin geht nicht mit gleicher Fehlermeldung wie im EN Threat beschrieben

:: ein Vorschlag noch (falls möglich) wäre für den tollen integrierten FileUpload (Link einfügen) einen Ordner in /media/ bestimmen zu können...

:: auch Stefeks Vorschlag mit evtl. variablen Farben je nach Section wäre gar nicht so schlecht - die Farbe ansich sieht schon mal sehr übersichtlich aus da der CKE ja den ganzen Block farblich schön "umrahmt" wirkt das gesamte Backend "aufgeräumter"!!

echt DER neue Editor für WB

Danke an alle Beteiligten!

Schönen Sonntag
Martin

[Stefek]

:: auch Stefeks Vorschlag mit evtl. variablen Farben je nach Section wäre gar nicht so schlecht -

Hallo Martin, danke, dass Du Dich für meine Idee "stark machst", aber so richtig verstanden wurde ch da nicht.

Es geht nicht so sehr um die "Farbe" des Editors, sondern darum, welche editor.css/editor.js geladen wird, je nach block[].

Der Vorteil davon ist, dass wenn ich z.B. eine Section mit 300px Breite und einem dunklen Hintergrund und heller Schrift habe, ich es über die editor.css genau so darstellen kann im Backend.

Das macht den Leuten, die die Eingaben machen sollen sofort Sinn.

Aber wie ich auch sagte, das ist wohl etwas, das keiner außer mir braucht. Kann sein, dass ich einfach zu anspruchsvoll bin.
 

Gruß,
Stefek

[dbs]

0.3.1.0 rc1 zeigt NULL fehler bis jetzt

etwas sehr bonbonfarbig in den dialogen, dafür sauschnell. *daumen hoch*

[Stefek]

Hallo,
wer Lust hat, kann den folgenden filemanager zum CKE ausprobieren...



Für Vollbild hier klicken:
http://www.ecard-module.com/downloads/filemanager_preview.png


Der Download ist hier:
http://www.ecard-module.com/downloads/filemanager.zip

Ich habe nicht vorgehabt, das ganze aufzublähen, daher ist es höchstens 2-3kB größer, als das vorige.

Wünschenswert wäre noch gewesen, etwas wie ein "Bild-Tooltip", wie Ruud in seinem Media Manager, doch ich wollte keine zusätzlichen aufblähenden javascripte einbinden.

jQuery wäre sinnvoll, vielleicht, doch ich habe es einfach erstmal sein lassen.

So wirkt es schon passender und leichtgewichtig.

Vor allem gefällt mir, dass die einzelnen Dateien eher nebeneinander, als untereinander stehen.
Das macht das finden des nötigen Bilders einfacher.

Getestet habe ich es nur auf dem FF.
Nicht grade viel Zeit.


Feedback erwünscht.

Gruß,
Stefek

[dbs]

kurz den filemanager getestet und der ist sehr schick und very schnell. die vorschaubildchen sind groß genug, da braucht es kein hover mehr.

[Stefek]

Freut mich.

Wäre super, wenn jemand das mal mit dem IE testen könnte.

Stefek

[dbs]

im ie8 sieht er auch gut aus, allerdings gibt es keinen automatischen umbruch. heißt die bildchen sind in einer reihe und über den scrollbalken zu erreichen.

der button für neuen ordner heißt da nur "create new fold"

[Stefek]

Danke,
leider habe ich hier keine IEs im Moment.

Hättest Du Lust, diese kleinen Bugs zu beheben?
Das wäre eine super Hilfe.

Ich glaube, "Create New Folder" würde reichen, wenn es "New Folder" heißt.

Gruß,
Stefek

[mr-fan]

Im IE 8 wird bei mir schlicht das erste Bild auf die gesamte Breite gezogen...?

Eine Idee?

mfg martin

ps.: sieht echt genial aus - einfach halt nur schlicht das was man braucht -

[dbs]

hatte ich vergessen zu erwähnen. ja, das erste bild nimmt die ganze breite des fensters und alle anderen folgen dann normal in einer reihe.

beheben, ich?  no plan... bis jetzt

[Stefek]

Hallo,
dieses hier müßte jetzt im IE besser funktionieren.
Ich kann es im Moment einfach nicht testen.

Bitte schaut nochmal.

Der Download ist hier:
http://www.ecard-module.com/downloads/filemanager.zip

Gruß,
Stefek

[dbs]

ja das hat was gebracht. das erste bild ist nun nicht mehr so breit wie das fenster.

bleibt nur noch der automatische umbruch. 

[Waldschwein]

Hallo!

super, vielen Dank Stefek, wurde unter IE7, IE8, Firefox 3.6, Chrome4 und Opera 10.5 getestet und klappt.

Zu den unterschiedlichen Farben der Abschnitte von Martin (nicht das von Stefek): Dafür gibt es den UIColor Dialog in CKEditor (erste Zeile ganz rechts). Dort kann man (wird leider nicht gespeichert, hab's versucht, klappt aber nicht wirklich) die Farbe des jeweiligen CKEditors schnell verändern.

Gruß Michael
 

[maverik]

0.3.1.0 rc1 zeigt NULL fehler bis jetzt

hab ich was verpasst?

finde nur die 0.29 und da klappt das mit den droplets nicht bei mir. bin aber den ganzen tag noch ziemlich im stress und werde wohl vor heute nacht nicht dazu kommen etwas genaueres zu schreiben bzw genauer zu testen.

[Waldschwein]

0.3.1.0 rc1 zeigt NULL fehler bis jetzt

hab ich was verpasst?

finde nur die 0.29 und da klappt das mit den droplets nicht bei mir. bin aber den ganzen tag noch ziemlich im stress und werde wohl vor heute nacht nicht dazu kommen etwas genaueres zu schreiben bzw genauer zu testen.

Hallo!

Aldus hat hier http://www.websitebakers.com/pages/posts/new-module-ckeditor-179.php die 0.3.1.0 RC1 veröffentlicht.
Ich habe einmal eine 0.3.2 http://github.com/Tenschert/ckeditor/downloads hier mit Stefek's Filebrowser veröffentlicht.
Allerdings hat die 0.3.2 noch ein Problem in WBLink, daher habe ich einmal das nicht auf AMASP hochgeladen. Aldus ist aber dran - dauert natürlich noch etwas, aber gute Dinge haben eben Weile. 

Gruß Michael