With Version 4.1, I am using a custom plugin designed to change the default dialog for tables. (set percentage instead of fixed width).
However ckeditor does not appear in the browser and Chrome console returns the following error
Uncaught TypeError: Cannot read property 'icons' of null
My plugin code is below. (from http://ckeditor.com/comment/49377#comment-49377)
I am not a coder and would appreciate any help with this.
------------------------------
// Set defaults for tables
CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Table" dialog).
if ( dialogName == 'table' )
{
// Get a reference to the "Table Info" tab.
var infoTab = dialogDefinition.getContents( 'info' );
txtWidth = infoTab.get( 'txtWidth' );
txtWidth['default'] = 80;
cmbWidthType = infoTab.get( 'cmbWidthType' );
cmbWidthType['default'] = 'percents';
txtCellPad = infoTab.get( 'txtCellPad' );
txtCellPad['default'] = 4;
}
});
Cannot read property 'icons' of null
Here's something that I suspect regarding that error: the plugin that you registered either with CKEDITOR.plugins.addExternal or by creating a folder in the plugins directory does not have a corresponding plugin object, created by CKEDITOR.plugins.add. I received a similar error when I tried to create a plugin. This is what I did to try to resolve my issue:
Make sure that you create a plugin object in your plugin.js file by using CKEDITOR.plugins.add. A good place to see an example of how this method is used is in the CKEditor 4 Plugins intro or even the CKEditor 3 Plugins intro. In the CKEditor 4 intro, there's a bit that's off: the way the 'icons' attribute is used doesn't actually create an icon (at least for me); what worked was to specify the 'icon' attribute when using
Without knowing what you did, I really can't say what is the exact issue. If the above did not work, would you provide a transcript of your plugin.js file? This might help others identify the reason that you are getting the bug.
Thank you for your help and input
The code in in first post is in fact a full transcript of my plugin.js file.
Having followed the notes in the links that you gave, my code now read as below. Unfortunatley it still doesn't work for me.
I am using the ckeditor module for Drupal if this is of relevace.
----------
// Set defaults for tables
CKEDITOR.plugins.add( 'tablewidths', {
icons: 'tablewidths',
init: function( editor ) {
CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Table" dialog).
if ( dialogName == 'table' )
{
// Get a reference to the "Table Info" tab.
var infoTab = dialogDefinition.getContents( 'info' );
txtWidth = infoTab.get( 'txtWidth' );
txtWidth['default'] = 80;
cmbWidthType = infoTab.get( 'cmbWidthType' );
cmbWidthType['default'] = 'percents';
txtCellPad = infoTab.get( 'txtCellPad' );
txtCellPad['default'] = 4;
}
});
}
});
Ah, yes. I have the EXACT
Ah, yes. I have the EXACT same problem with the Drupal CKEditor hook in registering a CKEditor plugin (i.e. using hook_ckeditor_plugin) IMO, this is the drupal module problem. At some point in the next 72hrs, I am going to go through the CKEditor module code and see exactly when this hook is called and what this hook does. You may wish to monitor the issues on the drupal side of things (i.e. the ckeditor module page).
For now, a good fix would be to save the plugin js file in your drupal module directory, and use CKEDITOR.plugins.addExternal to register your CKEditor plugin.
Thank you evilwire. I will
Thank you evilwire. I will keep a close eye on developments.
Just out of interest. Of the two code snippets that I have provided, which one should I use?
Thank you evilwire. I will
Thank you evilwire. I will keep a close eye on developments.
Just out of interest. Of the two code snippets that I have provided, which one should I use?
A bit more information
If you have used the CKEditor module, then you should definitely use CKEDITOR.plugins.add to register a plugin. In fact --- not sure if this is the way the creators of CKEditor intended to extend their system --- I would say always use CKEDITOR.plugins.add to register a plugin and insert any initialization code at as the 'init' property.
Looking at what the CKEditor module did, and it seems that it is working, I believe now that the first time I used it, I might have not have correctly setup my plugin in hook_ckeditor_plugin().
Assuming that:
is your plugin.js, which is located at 'sites/all/modules/tablewidths/plugins/tablewidths/', see if you can get your plugin to register by having the following code in your hook_ckeditor_plugin():
Namely, did the 'NULL' error go away. If not, then let's try to get you a boilerplate plugin working so you can modify the internals.
Good luck.
P.S. source code that is somewhat well-structured is the ckeditor_link module for drupal. It successfully registers a ckeditor plugin (in the function ckeditor_link_ckeditor_plugin, on line 200 of ckeditor_link.module.)
I'm sorry, but this is going
I'm sorry, but this is going over my head really. I'm not a coder and therefore struggle to even get the formatting correct :-(
That is ok, we all have to
That is ok, we all have to start somewhere.
On the drupal side, am I correct to assume that you have created a module? If you can let me know what is the name of the module, maybe I can give you the code in your module to register the CKEditor plugin.
kind words :-)
What I am trying to acheive is to set the default width of tables to 100% instead of the normal value of 500px; believing this setting to be better for responsive layouts. I think that this nuance is above the understanding of a regular content editor and so wish to change the default settings.
Yes, I have created a module although it doesn't work. However, it does appear as an available plugin under 'editor appearance' within the Drupal config settings at admin/config/content/ckeditor/edit/*
I have called the plugin 'tablewidths' have placed it at sites/all/modules/ckeditor/plugins/tablewidths . Code as above
Your help is much appreciated.
Instructions
For your information, I have no idea if the supplied source code does what you do, but I can get you started: register a plugin using the drupal hook, and then get your plugin up and running. In the interest of being complete, I am quite lengthy, for which I'm sorry. This is what you may wish to try (because it works for me):
ckeditor_tablewidths/
ckeditor_tablewidths.info
ckeditor_tablewidths.module
plugins/
tablewidths/
plugin.js
This is so we can create a Drupal module with the name "ckeditor_tablewidths", and use it to register the "tablewidths" CKEditor plugin.
The benefit of putting the CKEditor plugins file in the drupal module folder is for maintainability purposes: whenever you update CKEditor files, you do not have to worry about whether or not you have overwritten this plugin file.
Keeping the file in the module directory will also make it easier to distribute the drupal module to other drupal systems (should you decide to do this)
This file signals to the drupal system that in this directory, there is a file by the name of ckeditor_tablewidths. The info file specifies the display name (CKEditor Table Widths), a description, the broad package category that this module belongs to (User Interface), the version of drupal (7.x) this module applies, and the dependencies (ckeditor).
You can read more about drupal module .info files here: writing drupal module .info files.
What the code above does is to define a hook that is run whenever the main CKEditor javascript files are included on the page. The code in the hook returns an array which the ckeditor module uses to insert a script tag that includes your CKEditor plugin.js javascript file (located in ckeditor_tablewidths/plugins/tablewidths), and create a checkbox in the CKEditor configuration page.
Regarding how CKEditor plugins work, here's a bit of back story:
CKEditor plugins are deployed by registering them with the CKEDITOR javascript object. To do this, you must (a) register a plugin name with this CKEDITOR object, and (b) by supplying an actual plugin object under that name.
The titular error that you get occurs when CKEDITOR cannot find the plugin object associated to the registered plugin name. To do this, we must make sure (1) the plugin.js is located in the right directory, (2) the plugin.js file contains the code to add the associated plugin object, and (3) the code is executed correctly.
What the above does is that it stipulates that when all parts of the HTML documents are done loading ($(document).ready), call CKEDITOR.plugins.add, which defines the plugin object associated to the plugin name "tablewidths" registered earlier with the drupal module.
Explanation of why you received your error:
In your first attempt at creating the CKEditor plugin, the CKEDITOR did not register your plugin object successfully. In this case, the drupal module hook registered a plugin name with CKEDITOR, but there is no corresponding plugin object that it could access. When CKEDITOR initialises, it tries to access any plugin object by that name; no such object exists, so it received "null." The code was setup such that the CKEDITOR object then tries to access the "icons" property of that plugin object (whether or not it's non-existent) resulting in the error that you received.
The second attempt faces a different issue. Here's the thing:
All javascript code are executed as soon as the they loaded by the browser. This means that regardless of whether other (dependent) files are downloaded and processed, the scripts in this file will be processed and executed by the browser. Since files are downloaded asynchronously (meaning that the order is often not in order of dependence), the script in your file may be executed "too soon" --- for example, before the CKEDITOR object is created and properly initialised. Although the file contains the instructions to create a plugins object, if CKEDITOR has not yet been initialized properly, invoking CKEDITOR.plugins.add will cause errors, this time because CKEDITOR does not exist.
This is the reason that we wrap our plugin registration code in $(document).ready, which ensures that when the CKEDITOR.plugins.add is executed when all requisite objects are defined and initialized.
Summary
In the future, to create a CKEditor plugin and register it with drupal, this is what you need to do:
I have created a github repository containing all the files in the directory structure introduced in step 1. You can find this repository by visiting the ckeditor_tablewidths repo page on my GitHub account. Good luck, and let me know if any of this works.
Blimey, that a huge effort evilwire. Thank you so much
As well as learning a great deal I have followed your instructions step by step.
The module seems to register with both Drupal as well as ckedior and I am able to enable the module.
Unfortunatley the module still does not work and I suspect that the code that I provided for the plugin.js file must be incorrect. When the table icon is clicked, the editing window goes grey, but the table dialogue interface fails to launch and the page has to be reloaded to continue.
In trying to get it working I have changed some of the values, for example percents to % , as recommended here. I even removed all of the code below from the plugin.js file. Result is the same.
Clarification
It seems that you want the table dialog to display the default value of "100%" under "width" when you click the Table button. Is this correct? If so, give me a few days, and I'll look into what the problem is/how to solve it.
The meanwhile, do you have any error output? If you use chrome, you can use Developer's Tools to add a watch and breakpoint to the line "var infoTab = ..." and read the value of the output. This will help us narrow down the problem.
Yes you are correct - 100% default table width
Chrome console reports the following error...
For the benefit of anybody else searching, maybe the module should be renamed CKEditor Responsive Tables