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

1. Introduction to Drupal 7
Bonus Session – Session 5.1
WYSIWYG Editor
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 1

2. Agenda
• What is actually the WYSIWYG editor
• Installing WYSIWYG editor
• Most common configurations
• Popular add-on modules for WYSIWYG editors
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 2

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 things
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 3

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. 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 library
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 5

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 format
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 6

7. Configuring your editor library
• Select the buttons you want to be available in
the WYSIWYG editor
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 7

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 editor
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 8

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-end
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 9

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. Enabling the IMCE button
• Enabling the IMCE button will add the files
management capabilities to your editor
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 11

12. Time for questions
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 12

13. Contacts
Kalin Chernev
– E: kalata@shtrak.eu
– T: twitter.com/kalinchernev
– B: http://shtrak.eu/kalata
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 13