Introduction to Drupal 7

Bonus Session – Session 5.1

WYSIWYG Editor

1Course by Init Lab (http://initlab.org)Drupalist: Kalin Chernev

Agenda

• What is actually the WYSIWYG editor

• Installing WYSIWYG editor

• Most common configurations

• Popular add-on modules for WYSIWYG editors

2Course by Init Lab (http://initlab.org)Drupalist: Kalin Chernev

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

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

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

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

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

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

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

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

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

Time for questions

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

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