Configuration Helper Plugin for CKEditor

Introduction

This plugin tries to help setup CKEditor by providing additional configuration options to perform some kind of common tasks.

Currently if offers a "removeDialogFields" that allows to remove individual fields in the dialogs (versus removing whole tabs with removeDialogTabs, and "dialogFieldsDefaultValues" defines default values for dialog fields.

Author:

Alfonso Martínez de Lizarrondo

Version history:

1.0: 26-February-2012. First version.
1.1: 16-February-2012. Added placeholder.
1.2: 23-April-2012. Added hideDialogFields.
1.3: 1-December-2012. Compatibility with CKEditor 4.
1.4: 28-March-2013. Compatibility of the "placeholder" attribute with the inline mode of CKEditor 4.
1.5: 16-April-2013. Version 1.4 was broken in CKEditor 3.
1.6: 16-August-2013. Handle the setData method to update the "placeholder" status
1.7: 6-October-2013. Patch by bfavors to fix handling placeholder on initial load of editor
1.8: 9-March-2014. Check for IE11 by Russel Ward
Set caret into the empty paragraph correctly on first focus, patch by glanchow
1.8.1: 5-April-2014. Fix IE8 & IE9 problem with "inline textarea" if it's empty on start
1.8.2: 12-April-2014. Protect detection of empty content

Installation

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this

ckeditor\
	...
	images\
	lang\
	plugins\
		...
		confighelper\
			plugin.js
			docs\
				install.html
		...
	skins\
	themes\

2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file: config.extraPlugins='confighelper';

3. Configuration

config.removeDialogFields

This entry is a string, the fields are defined as dialogName + ":" + tab + ":" + field. Fields are joined with semicolons. In order to learn the name of the parameters you can use the "Developer Tools plugin", launch that sample and open the dialog that you want to customize. Now a little popup with appear showing the info about that field, for example:

Element Information
Dialog window name : image
Tab name : info
Element ID : txtBorder
Element type : text

so in order to remove the class attribute for images the config is:

config.removeDialogFields="image:info:txtBorder";

removing another field

config.removeDialogFields="image:info:txtBorder;image:info:txtHSpace";

config.dialogFieldsDefaultValues

This setting uses directly a JSON object as the configuration value, first an object that has the dialog names as properties, each property is a new object with the name of the tabs and finally each property name maps to the field name and it's value is the default value to use for the field.

An example might be much better as I might have messed up something in the description:

config.dialogFieldsDefaultValues =
{
	image:
		{
			advanced:
				{
					txtGenClass : 'myClass',
					txtGenTitle : 'Image title'
				}
		}
};

config.placeholder

This a text that will be shown when the editor is empty following the HTML5 placeholder attribute. When the user focus the editor, the content is cleared automatically.

The value can be set in the configuration or as an attribute of the replaced element

config.placeholder = 'Type here...';

config.hideDialogFields

This entry uses the same sintax that the 'removeDialogFields' option. The difference is that some fields can't be removed easily as other parts of the dialog might not be ready and might try to always use it, generating a javascript error. In other cases the layout might be broken if the field is removed instead of hidden.
In those cases it's possible to hide the fields using this entry, and the preview in the image dialog is an example of such a field.

config.hideDialogFields="image:info:htmlPreview";