25 -27 April, 2014

http://camp2014.drupal.dn.ua

CKEditor in Drupal: detailed setting and

customizationOsman Seferovskype: osmanseferove-mail: osseferov@gmail.com

CKEditor - the best web text editor for everyone

● Very Flexibility● All is constructed on plug-ins and features● Fast and easy● Many add-ons● CKBuilder● Support content inline editing ● Active Open Source community

Wysiwyg vs CKEditor

Wysiwyg CKEditor

WYSIWYG support integration of multiple different client-side editorsAbility to assign different ones to different input formatsIt’s possible to determine your custom css onlyYou can not change the order of buttons on the page of settings

CKEditor offers more granular control over some of the editor configuration settings on the module settings pageManagement of visibility settings for each roleYou can choose a theme for editorOpportunity to choose your own styles for editor and file manager settingsAdvanced option section for change config options

25 -27 April, 2014

http://camp2014.drupal.dn.ua

CKEditor Customization

CKEditor toolbar settings

You can add new buttons or delete unnecessary ones using drug&drop

Definition of enter mode elements

Useful options

More information : http://docs.ckeditor.com/#!/api/CKEDITOR.config

Advanced options

CKEditor module provides convenient interface for configuration editing

Advanced Content Filter

ACF is a highly configurable CKEditor core feature

● Limit and adapt of input data● It may also deactivate features which generate HTML code that is not

allowed by the configuration

ACF works in two modes

automaticthe filter is configured by editor features (like plugins, buttons and commands)

customthe filter is configured by the CKEDITOR.config.allowedContent option and only features that match this setting are activated.

CKEDITOR.config.allowedContent = TRUE;

How to add own styles

ckeditor.styles.js file

ckeditor.styles.css file

Setting up the toolbar

config.stylesCombo_stylesSet =

'drupal:/sites/all/theme/theme_name/ckeditor.styles.js';

Add a style control

Remove “Format”, ”Font” and “Size controls”

Drop down of custom styles

You can easily add a new style options for different

CKEditor text formats

Drop down includes only styles we have approved for site

Definition of custom styles for editor

25 -27 April, 2014

http://camp2014.drupal.dn.ua

How to create CKEditor plugin

Structure of custom plugin files

You can add your plugin into CKEditor library or into your module that implements hook_ckeditor_plugin()

File that will contain the plugin logic

This file will contain the definition for the dialog that we are

going to use in our plugin

Task formulation

Our plugin registration

OR SET

CKEDITOR.config.allowedContent = TRUE;

Dialog adding

Our new button and dialog window

“Ok” button function

When we press footnote button we should show selected footnote data

Useful links

➢https://drupal.org/project/ckeditor➢https://drupal.org/project/wysiwyg➢http://docs.ckeditor.com/#!/api/CKEDITOR.config➢http://ckeditor.com/addons/plugins/all➢http://docs.ckeditor.com/#!/guide/plugin_sdk_intro➢http://drupalwoo.com/content/how-customize-

ckeditor-drupal-7-site➢https://drupal.org/node/1793710

THANK YOU!