How to Install WYSIWYG Editor in Drupal 6, Using WYSIWYG API and jwysiwyg

Submitted by whiztech on Fri, 06/12/2009 - 17:13

In my previous post, I've written about Drupal Hack: How to Install Wysiwyg API Module With jWYSIWYG. Since jwysiwyg 0.5 is already available, this post is meant to update my previous post. By default, there is no built in WYSIWYG editor in Drupal 6. In this post, you will find out on how to install a WYSIWYG editor in Drupal 6 using WYSIWYG API module and a lightweight WYSIWYG editor, jwysiwyg. The Drupal's WYSIWYG API module will simplifies the installation of editors and allows you to define which editor to use depending on the input format.

1. I assume you already have a working Druapl 6 installation. Download the latest WYSIWYG API and jwysiwyg. In this post, I will use WYSIWYG API version 2.0 and jwysiwyg version 0.5.

2. Extract WYSIWYG API module files and upload folder 'wysiwyg' to your Drupal's 'sites\all\modules' folder.

3. Extract the content of jwysiwyg. We will edit 'jquery.wysiwyg.js' file to enable jwysiwyg toolbar control. Open 'jquery.wysiwyg.js' file with your favourite text editor. If you are on Windows, I recommend you to use Notepad++ to edit the file.

Find 'TOOLBAR : {'. The codes for enabling the toolbar will start here. Change 'visible : false' value to '


visible : true

' (1) to enable the toolbar that you want to be enabled for the editor. For example, changing '

justifyCenter : { 
visible : false

' to 'justifyCenter : { visible : true' will enable the 'justify center' button in jwysiwyg toolbar. Only 'false' value under 'visible' attribute are the one that you need to change. The last button to enable is the 'removeFormat' button (2). Save 'jquery.wysiwyg.js' changes.

4. Next, create a folder with the name 'libraries' in your Drupal's 'sites\all' folder. Create a new folder named 'jwysiwyg' in the newly created 'libraries' folder. Upload all jwysiwyg file (jquery.wysiwyg.css, jquery.wysiwyg.gif and jquery.wysiwyg.js) to the newly created 'jwysiwyg' folder. (the jwysiwyg files will be placed in 'sites\all\libraries\jwysiwyg')

5. To enable WYSIWYG API module, go to your Drupal's 'Administer' > 'Site building' > 'Modules'. Select 'Enable' (3) for WYSIWYG API module to enable it. Click 'Save configuration' (4) to save the changes.

6. Go to 'Administer' > 'Site Configuration' > 'Input formats'. We will select the type of input format to be used with WYSIWYG editor. You can create a new input format if you want. I will use the default 'Filtered HTML'. Click configure (5) to configure the input format. Under the 'Edit' tab, you can select what type of users can use this input format and you choose to enable the filters. I highly recommend you to enable the 'HTML filters' (6) to avoid malicious codes to be posted to your site (if you're planning to allow your site visitor to use WYSIWYG editor). Click 'Save configuration' if you've made any changes.

7. Next, under the input format configuration, click the 'Configure' (7) tab. We will need to add the allowed HTML tags (8) for the WYSIWYG editor. I recommend you use '

<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <strike> <u> <blockquote> <sup> <sub> <img> <big> <small>

'. You can also enable the 'Spam link deterrent' (9) which will make Drupal to add 'rel="nofollow"' to all links. Click 'Save configuration' to save the changes.

8. Finally, we will enable the jwysiwyg editor in WYSIWYG API module to be used with the input format. Go to 'Administer' > 'Site Configuration' > 'Wysiwyg'. Then, select 'jWYSIWYG 0.5' (10) for the input format type that you want to use with WYSIWYG editor. Click 'Save' to save the configuration.