Question

I’ve got a problem with a CKEditor plugin.
I need PHP code to make use of a MySQL database and several variables the CMS (WebsiteBaker) gives me. The CKEditor plugin should open a new dialog, gives several links defined in the PHP part you can choose of.
In the plugin.js the code

CKEDITOR.dialog.add('wbdropletsdlg', this.path + 'dialogs/wbdroplets.php');

works good – but not on “real” UNIX server, only on XAMPP (Windows7). In the wblink.php there’s the PHP part and the necessary JavaScript part for CKEditor.

I tried to change in the plugin.js the code to

CKEDITOR.dialog.add('wbdropletsdlg', this.path + 'dialogs/wbdroplets.js');

put in there the JavaScript

CKEDITOR.dialog.add( 'wbdropletsdlg', function( editor ) {
CKEDITOR.scriptLoader.load(this.path + "wbdroplets.php");
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 ... 
                         *
                         */
                        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
};
} );

In the PHP-file the code

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) {

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";

function script($list)
{
    $out = "<script type=\"text/javascript\">";
    $out .= "//<![CDATA[\n";
    $out .= $list;
    $out .= $desc_list;
    $out .= "\n//]]>";
    $out .= "</script>\n";

    return $out;
}

But the CKEditor plugin is not opening – Firefox console says “list is not defined”.

Thanks very much for your help.

Answer 1

The scriptLoader has a second parameter that it’s the callback function to execute when the requested script has been loaded. If you develop in your computer it might return the data fast enough, but in a production environment it’s expected to have some delay so that’s the explanation about why it works in one situation and fails in the other.