25 -27 April, 2014 http://camp2014.drupal.dn.ua
CKEditor in Drupal:
detailed setting and
customization
Osman Seferov
skype...
CKEditor - the best web text editor for everyone
● Very Flexibility
● All is constructed on plug-ins and features
● Fast a...
Wysiwyg vs CKEditor
Wysiwyg CKEditor
WYSIWYG support integration of
multiple different client-side editors
Ability to assi...
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 d...
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...
Drop down of custom styles
You can easily add a new style options for different
CKEditor text formats
Drop down includes o...
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_ck...
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/CKE...
THANK YOU!
Upcoming SlideShare
Loading in …5
×

CKEditor в Drupal: тонкая настройка и кастомизация - Osman Seferov

1,282 views

Published on

Среди большого количества WYSIWYG редакторов, начинающему разработчику достаточно сложно выделить действительно мощный и удовлетворяющий всем требованиям инструмент. В своём докладе я расскажу о CKEditor и поделюсь собственным опытом использования, настройки и кастомизации под определённые нужды.

Published in: Internet, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,282
On SlideShare
0
From Embeds
0
Number of Embeds
356
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CKEditor в Drupal: тонкая настройка и кастомизация - Osman Seferov

  1. 1. 25 -27 April, 2014 http://camp2014.drupal.dn.ua CKEditor in Drupal: detailed setting and customization Osman Seferov skype: osmanseferov e-mail: osseferov@gmail.com
  2. 2. 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
  3. 3. Wysiwyg vs CKEditor Wysiwyg CKEditor WYSIWYG support integration of multiple different client-side editors Ability to assign different ones to different input formats It’s possible to determine your custom css only You 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 page Management of visibility settings for each role You can choose a theme for editor Opportunity to choose your own styles for editor and file manager settings Advanced option section for change config options
  4. 4. 25 -27 April, 2014 http://camp2014.drupal.dn.ua CKEditor Customization
  5. 5. CKEditor toolbar settings You can add new buttons or delete unnecessary ones using drug&drop
  6. 6. Definition of enter mode elements
  7. 7. Useful options More information : http://docs.ckeditor.com/#!/api/CKEDITOR.config
  8. 8. Advanced options CKEditor module provides convenient interface for configuration editing
  9. 9. 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 automatic the filter is configured by editor features (like plugins, buttons and commands) custom the filter is configured by the CKEDITOR.config.allowedContent option and only features that match this setting are activated. CKEDITOR.config.allowedContent = TRUE;
  10. 10. How to add own styles ckeditor.styles.js file ckeditor.styles.css file
  11. 11. 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”
  12. 12. 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
  13. 13. Definition of custom styles for editor
  14. 14. 25 -27 April, 2014 http://camp2014.drupal.dn.ua How to create CKEditor plugin
  15. 15. 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
  16. 16. Task formulation
  17. 17. Our plugin registration OR SET CKEDITOR.config.allowedContent = TRUE;
  18. 18. Dialog adding
  19. 19. Our new button and dialog window
  20. 20. “Ok” button function
  21. 21. When we press footnote button we should show selected footnote data
  22. 22. 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
  23. 23. THANK YOU!

×