Introduction to Drupal 7 - Installing and configuring WYSIWYG editors in Drupal

2,909 views

Published on

Short and practical tutorial on how to install and configure the popular WYSIWYG editors as: ckeditor, tinymce editor, etc

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,909
On SlideShare
0
From Embeds
0
Number of Embeds
154
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to Drupal 7 - Installing and configuring WYSIWYG editors in Drupal

  1. 1. Introduction to Drupal 7 Bonus Session – Session 5.1 WYSIWYG EditorDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 1
  2. 2. Agenda• What is actually the WYSIWYG editor• Installing WYSIWYG editor• Most common configurations• Popular add-on modules for WYSIWYG editorsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 2
  3. 3. The WYSIWYG editor• WYSIWYG = what you see is what you get• In simple terms, this is a set of Word-like editor buttons that enable you do nice thingsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 3
  4. 4. Installing a WYSIWYG editor in Drupal• To have a WYSIWYG editor in Drupal, you need – The WYSIWYG API module; – Any of the following external editor libraries: • TinyMCE; • FCKeditor; • jWysiwyg; • markItUp; • NicEdit; • openWYSIWYG; • Whizzywig; • WYMeditor; • YUI editor;Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 4
  5. 5. Installing the editor library, step 1• Install the WYSIWYG API module as normal;• Go to Administration > Configuration > Content authoring > WYSIWYG Profiles• URL: admin/config/content/wysiwyg• Choose the editor you’re going to use, for example let’s install the ckeditor one;• Go to http://ckeditor.com/download and download the latest version of the libraryDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 5
  6. 6. Installing the editor library, step 2• In your website sites/all folder create a new folder named “libraries”• Place the un-archived version of the library in the libraries folder you just created• The following file structure has be available sites/all/libraries/ckeditor/ckeditor.js• Refresh the WYSIWYG profiles page and select the editor for any desired input formatDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 6
  7. 7. Configuring your editor library• Select the buttons you want to be available in the WYSIWYG editorDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 7
  8. 8. Add the option to clean-up on paste• This will make sure a nice cleanup is done if Word text is pasted in the editorDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 8
  9. 9. Add the option to use default css• This will fix your editor styling to be ok in any theme you’re using for the front-endDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 9
  10. 10. Adding files management option• You need to install IMCE module to have integrated files management capabilities to your WYSIWYG editor;• In order for the IMCE module to be really used with the WYSIWYG API module, you’ll need to install the IMCE Wysiwyg bridge module• After installing these 2 modules, you’ll need to go to the WYSIWYG profiles pages again and add the new IMCE button manually;Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 10
  11. 11. Enabling the IMCE button• Enabling the IMCE button will add the files management capabilities to your editorDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 11
  12. 12. Time for questionsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 12
  13. 13. ContactsKalin Chernev – E: kalata@shtrak.eu – T: twitter.com/kalinchernev – B: http://shtrak.eu/kalataDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 13

×