Aug 4, 2012

Drupal 7 + WYSIWYG + CkEditor | Install and configure




Before we start how to Install and configure Wysiwyg and CKEditor into your Drupal site , lets have a quick look about it?

What does WYSIWYG stands for?
It stands for What You See Is What You Get

Why do we use it?
WYSIWYG editors are used to generate the HTML code necessary for viewing web page content.

How useful they’re?
They are particularly useful for people with limited or no knowledge of HTML code in other words you do not need HTML tags to use.

As you create your content, the editor creates the code in background.

For example, if you want your text to appear in different colours, fonts in different sizes, all you need is to highlight the text and select the appropriate option from the tools available in the editor.

What is CKEditor?

CKEditor is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice. 
This is the ideal editor for developers, created to provide easy and powerful solutions to their users.

Installation and Configurations
  • Download wysiwyg module from http://drupal.org/project/wysiwyg
  • Extract to your (modules sites/all/modules) directory
  • Then navigate to admin/config/content/wysiwyg to download the editor Library you want to install in your site
  • So, here I am going to select CKEditor
    • and I downloaded it from http://ckeditor.com/download
    • once the .zip file is downloaded extract the file and place it in sites/all/libraries folder
  • Go back again to admin/config/content/wysiwyg, now you’ll see the window as shown below in image 1.0

Image 1.0
  • Here is the place that I am going to select which input format is going to use the CKEditor/Wysiwyg
  • I’ll select the Filtered HTML format and hit “Save” (when the input format is selected to be filtered html I’ll be able to see the CKEditor whenever I create a block, node etc...)
  • ^^^ Even after the above step we’ll not find the needed icons or plugins in the editor, it will look simply plain

Image 2.0

  • Now you need to enable all the plugins that you need to appear in the CKEditor as shown in the Image 4.0 Navigate to admin/config/content/wysiwyg/profile/filtered_html/edit and expand the option “Buttons and Plugins” and check all the plugins that you wanted to appear in the Editor.
 
Image 3.0

  • We’ve done it! didn’t we ? check it for yourself , go and create a content , make sure the input format is “Filtered HTML" ------
    Boooom!
Image 4.0