CKEditor в Drupal: тонкая настройка и кастомизация - Osman Seferov
-
Upload
drupalcampdn -
Category
Internet
-
view
659 -
download
0
description
Transcript of CKEditor в Drupal: тонкая настройка и кастомизация - Osman Seferov
25 -27 April, 2014
http://camp2014.drupal.dn.ua
CKEditor in Drupal: detailed setting and
customizationOsman Seferovskype: osmanseferove-mail: [email protected]
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!