Drupal Hack: How to Install Wysiwyg API Module With jWYSIWYG

Drupal 6.x don’t have a ‘What You See is What You Get’ (WYSIWYG) feature by default. There are a few WYSIWYG module available for Drupal 6.x, for example FCKEditor, TinyMCE, widgEditor, WYMeditor and Wysiwyg API.. I’ve tried most of these modules but somehow none of them work on my blog. Maybe the problem is caused by other installed modules or the browser that I use (Opera), but I’m not very sure.

I try again with Wysiwyg API. Wysiwyg API supports many editors such as TinyMCE, jWYSIWYG, nicEdit, FCKeditor and Whizzywig, but again, none of these editor work with my blog. Either I get error from Drupal or the editor didn’t show in my browser. jWYSIWYG however cannot be installed since the Wysiwyg API module shows that it doesn’t support jWYSIWYG 0.4. Then I tested with jWYSIWYG 0.3 and 0.2, but Wysiwyg API module still gives the ‘not supported’ error. Since jWYSIWYG is a very lightweight editor (101KB only including images), I’ve decided to hack the Wysiwyg API module. It is pretty easy actually.

Note: In this post, I will use Wysiwyg API 6.x 0.5 and jWYSIWYG 0.4. I will not responsible if this method renders your site unfunctional, but so far it works for me =)

1. You need to download the Wysiwyg API 6.x 0.5 and jWYSIWYG 0.4.

2. Extract the content of Wysiwyg API. You should have a wysiwyg folder created. Open the wysiwyg folder. Create a new folder named jwysiwyg inside it.

3. Extract jWYSIWYG. Copy all the extracted files (jquery.wysiwyg.css, jquery.wysiwyg.gif, jquery.wysiwyg.jpg, jquery.wysiwyg.js and jquery.wysiwyg.pack.js) and put it inside folder jwysiwyg that you created in step 2.

Note: In the next steps that involve editing files, I will use Notepad++ and I recommend you to use it if you are using Windows. It also available as a portable version.

4. In wysiwyg folder, open the editors folder. Click and drag jwysiwyg.inc into Notepad++ to edit it. Find this function:

function wysiwyg_jwysiwyg_editor()

Find this code:

‘versions’ => array(
‘0.5‘ => array(
‘js files’ => array(‘jwysiwyg.js’),
‘css files’ => array(‘jquery.wysiwyg.css’),
),
),

Change the bolded 0.5 value to 0.4 (1). This will force Wysiwyg API to work with jWYSIWYG 0.4. Save the changes.

5. Next, open the jwysiwyg. Edit jquery.wysiwyg.js. This method is to enable all the toolbar buttons of jWYSIWYG.

Find TOOLBAR : {. Change all the visible : false value to visible : true (2). For example, changing strikeThrough : { visible : false to strikeThrough : { visible : true will enable the ‘strike through’ button in jWYSIWYG toolbar. The last button to enable is the removeFormat button (3). Save the file.

6. These steps are the steps to install Wysiwyg API to your Drupal 6.x installation. Upload the wysiwyg folder into your Drupal’s /sites/all/modules/ folder.

7. To enabling the module, go to your Drupal’s Administration > Site Building > Modules > List. Enable Wysiwyg module under User interface.

8. Next, we need to create the input filter to be used by Wysiwyg API. I recommend you to create a new filter. Go to Site configuration > Input formats > Add Input Format. Give it a unique name (I will name it WYSIWYG), assign which group can use this filter and disable “HTML filter”, “Line break converter”, and (optionally) “URL filter”.

9. To configure Wysiwyg API, go to Site configuration > Wysiwyg. Select jWYSIWYG 0.4 (4) as the editor for the input filter that you’ve created in step 8. Save the configuration.

Now you have a working WYSIWYG editor for your Drupal site! To use it, select WYSIWYG (the input format name that you’ve created in step 8) under Input format. However, only the users with the selected access (step 8) will be able to use the WYSIWYG editor.

[Download: Wysiwyg API] [Download: jwysiwyg]

Related posts:

1. How to Install WYSIWYG Editor in Drupal 6, Using WYSIWYG API and jwysiwyg
2. Drupal 6: Integrating Adsense for Search
3. Drupal 6: Slow Administration Page or Administration Page Returned Blank Page
4. Introducing… My Timer 0.1.0 beta 1
5. How To: Install All Hardware Drivers Easily

Tags: Drupal, Hack, Tips, Tutorial