template.js.ckeditor.plugins.confighelper.docs.install.html Maven / Gradle / Ivy
Configuration Helper plugin
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.
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";
Disclaimers
CKEditor is © CKSource.com