Although I am fairly confortable with using the plain editor to write HTML code, most of my customers aren't. They do not have technical background and feel difficulty just to look at a buch of opening and closing tags. WYSIWYG comes in handy here to provide an easy to use solution for non tech guys.
In my experiences, there are two things that most of my customers concern: "an editor with enough menu buttons" and "a tool to upload image". So when I see a Drupal 7 sites without them, the first thing in my mind is to get them installed.
On Drupal 6, my choice for the WYSIWYG editor is FCKEditor. CKEditor is the successor of FCK with better visual and functionality and it works well with Drupal 7. IMCE is a great tool for users to upload files. In the following sections, I will describe how to install and tune CKEditor and IMCE.
Installing CKEditor
CKEditor is not a separate module in Drupal 7. You have to install the WYSIWYG module and then install CKEditor as its library.
- Download WYSIWYG at http://drupal.org/project/wysiwyg
- Please install the WYSIWYG module as usual (put the module under /sites/all/modules and enable it via Admin -> Modules interface).
- Download CKEditor at http://ckeditor.com/download (go to CKEditor for Drupal section)
- Then create a folder called "libraries" at /sites/all and copy the ckeditor folder there.
Configure and tuning CKEditor
Go to Admin -> Configure -> WYSIWYG. The module should automatically detect the presence of CKEditor.
Customers generally donot like too many options. If you enable all buttons, they will feel confusing. They are also not document editor experts, so having many buttons there just makes them click and mess up. The webpage would load more slowly every they edit a node as well.
Therefore, you may need to enable neccessary buttons only on the Buttons and Plugins section. In my list, they are (but not restricted to):
Bold, Italic, Strike-through, Align left, Align center, Align right, Justify, Bullet list, Number list, Link, Unlink, Anchor, Image, Blockquote, Source code (must have for HTML lovers), Paste from Words (good for editors who prepare content from MS Word), HTML block format.
One tuning not for customer but for for web editor, you should enable "Apply source formatting". Otherwise, the HTML source code will turn into a string, it is hard to read for those who would like to edit HTML.
This is how the CKEditor looks like when you edit a node.
Note: if you don't see the editor, please go to Configuration -> Performance and turn on "Aggregate Javascript files" under Bandwidth Optimization section. This is a known problem which was described at d.o: http://drupal.org/node/1017612
Installing IMCE
IMCE is a file/image uploader for Drupal which your customer would need to upload images to articles for example. So you will have to install IMCE and integrate to CKEditor
- First you have to install IMCE itself from http://drupal.org/project/imce
- And install the IMCE WYSIWYG Bridge module at http://drupal.org/project/imce_wysiwyg
- Please go back to WYSIWYG profile configuration page, edit the CKEditor, and tick the IMCE option at the Button and Plugins section.
When you edit a node, please click on the Image icon on the CKEditor bar, a window will popup. You can click on the Browse server button to add images or upload new images to the node.
Done! Now your customers can feel more comfortable writing content for the websites.
