Install FCKeditor on Drupal 6

A WYSIWYG makes life a lot easier for anyone wanting to create large articles in drupal. In this tutorial i’ll show you how to install FCK Editor on drupal 6.Requirement:

  1. Drupal 6
  2. FCKeditor drupal Module http://drupal.org/project/fckeditor
  3. FCKeditor Code http://www.fckeditor.net/download

Step1 Install FCKeditor

Go to http://drupal.org/project/fckeditor and download the module and place it in sites/all/modules. Download the FCKeditor and unzip the content into sites/all/modules/fckeditor/fckeditor.

Once everything has be copied over, go to Administer >> Site Building >> Modules and enable the module.

Step2 Configure FCKeditor

Permissions If you are logged on as the administer you’ll be able to see the editor display in the body text area if you create any content. But for other users to access the editor you’ll have to setup the permissions.

Go to the configure page for FCKeditor which is Administer >> Site Configuration >> FCKeditor. fig1.jpg

Straight up the module tells you that you need to setup the right permission. Just click on Permission and scroll down to fckeditor module and check “Access fckeditor” for anonymous or authenticated user.

NOTE:If authenticated users can’t see the editor, make sure you have given them the right permissions.

fig2.jpg Filters

For security reasons drupal filters out certain tag from being displayed. This can be controlled by adjusting the input filters in Administer >> Site Configuration >> Input Filters. We’ll have to adjust the input filters so certain tags generated by the editor will be displayed and not filtered out.

NOTE:If you are viewing a node and the styles are not right double check the filters and make sure you have added the right tags to the allowed list. Or you could use the Full HTML filter.

You have 2 option the first is giving full html access on all text areas or adding in the required tags. You can get a list of the required tags from the module README.txt in sites/all/modules/fckeditor. Or grab it from below:

<a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <strike> <caption>

To add the required the tags to the filers, go to Administer >> Site Configuration >> Input Filters and click “Configure” on the Filtered HTML.

fig3.jpg

Once in click on “Configure” again on the tabs next to the page header. Paste in the required HTML in the “Allowed HTML tags” text field.

fig4.jpg

FCKeditor Profiles

With the editor profiles it gives you the power to customise a lot of things. I wont go into great details about them except for the “Visibility Settings”.

The global “Visibility Settings” can be changed by clicking on edit for the FCKeditor Global Profile, this overrides the “Visibility Settings” for all other profiles.

fig5.jpg

Using the “Visibility Settings” you can control on which textarea the editor will be loaded. Often you don’t need the editor loaded on all textareas.

Thanks a lot for reading this article, feel free to leave any comments.