Apr
29

Setting up WYSIWYG editor

by CK Ng

WYSIWYG is an acronym for What You See Is What You Get, or a client-side editors (a.k.a. WYSIWYG editors) for editing content. Here is a simple step by step installation to get you up and running with WYSIWYG editor and make your end users happy. And if you owned a forDrupal themes, we have included goodies to use with WYSIWYG editor just for you.

In Drupal, you can make use of WYSIWYG editors through their individual module, but most of these modules are bugs ridden or not actively maintained. In this article, we are going to use Wysiwyg API and TinyMCE 3 as an example editor.

Supported editors/plugins in Wysiwyg API are:

  • Editors: FCKeditor 2.6, jWYSIWYG 0.5, markItUp 1.1.5, NicEdit 0.9.0, TinyMCE 3, TinyMCE 2, Whizzywig 55
  • Plugins: Teaser break, Image Assist

Install Wysiwyg API

Download Wysiwyg API module and install just like other drupal module. The stable version as of this writing is 6.x-1.1.

# cd /tmp
# wget <a href="http://ftp.drupal.org/files/projects/wysiwyg-6.x-1.1.tar.gz<br />
#" title="http://ftp.drupal.org/files/projects/wysiwyg-6.x-1.1.tar.gz<br />
#">http://ftp.drupal.org/files/projects/wysiwyg-6.x-1.1.tar.gz<br />
#</a> cd /var/www                  /* or your web folder */
# cd sites/all/modules      /* create if not exist, or where you place your module */
# tar zxvf /tmp/wysiwyg-6.x-1.1.tar.gz

Install Wysiwyg Editor

Installation instruction can be found under admin/settings/wysiwyg/profile for all supported editors.

Let's download TinyMCE

# cd wysiwyg
# mkdir tinymce
# cd tinymce
# unzip /tmp/tinymce_3_2_3.zip

Refresh Wysiwyg API setting page admin/settings/wysiwyg/profile to ensure the TinyMCE is detected and set the Full HTML input filter Editor as TinyMCE.

Edit Input Filter

We are assuming you are using Full HTML as the default input filter. Setup your Full HTML input filter at admin/settings/filters, make sure "HTML filter" and "Line break converter" are disabled. It is recommended to create a new input filter and remember to give the input filter permission to the user.

Edit TinyMCE Profile

Now, we have to head back to admin/settings/wysiwyg/profile for the last time. Click "Edit" for the Full HTML input filter Editor, which you have set to TinyMCE 3.2.3 above, and customize to suit your need. If you are using forDrupal themes, setup the CSS portion using the settings below to reap the full benefit of the theme.

Goodies for forDrupal users

forDrupal users can put this into the CSS fieldset.
Block formats:

p,address,pre,h1,h2,h3,h4,h5,h6,div,blockquote

Editor CSS::

Define CSS

CSS path:

%b%t/css/base.css,%b%t/css/style.css

and if you modify the typography in custom.css

%b%t/css/base.css,%b%t/css/style.css,%b%t/css/custom.css

CSS classes:

text alt=alt
text small=small
text large=large
text quite=quiet
text loud=loud
text highlight=highlight
text added=added
text removed=removed
text increment leading=incr
text caps=caps
icon arrow=arrow
icon flag=flag
icon folder=folder
icon heart=heart
icon minus=minus
icon music=music
icon pencil=pencil
icon plus=plus
icon save=save
icon stop=stop
icon tag=tag
icon tick=tick

Customize the rest as you see fit.

Tags:
,