Implement a Wordpress like WYSIWYG text input interface for Drupal
Wordpress comes with a intuitive What You See is What You Get [WYSIWYG] input area for creating posts. This makes it really easy for users to format their posts, with little or no knowledge of HTML. Current versions of Drupal unfortunately lack such an arrangement. However, with the wealth of modules available, a responsive rich text editor is not hard to implement in Drupal.
The Wysiwyg module is best suited for the task. It allows a whole range of front-ends, namely : FCKeditor, jWYSIWYG, markItUp, NicEdit, openWYSIWYG, TinyMCE, WYMeditor, and the YUI editor. I like TinyMCE and FCKeditor from among among these.
The Editor interface:

To get started, upload the module to Drupal's Modules folder and enable the module from the administration interface. To use the module, you will need to obtain the front-end libraries and upload them to your server.
For example consider the TinyMCE library. The TinyMCE download library is available at: http://tinymce.moxiecode.com/download.php Upload it to the sites/all/libraries/ folder. You may need to create this folder if it does not exist. Once it is uploaded Wysiwyg should automatically detect it. You can use the drop down menus in the administration section to set the front-end for a particular input type.

Its important to note here that, if the Wysiwyg is assigned to the “Filtered HTML” input type, then it will not work correctly. Images, headings (the <h1>, <h2> tags) and tables will not appear in the final published post, although they are seen in the editor and preview. This is because, the “Filtered HTML” type is designed to strip out all tags that are not included in its safe list. By default its safe list includes:
<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
You can modify this list of allowed tags by going to the Administration>”Input Formats” section. Click on “configure” and then on “Configure” again. Here in the alowed HTML tags sections you can add other tags. For all practical purposes, you might want to enable these tags:
<p> <a> <em> <strong> <b> <i> <u> <strike> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <table> <tbody> <tr> <td> <th> <h1> <h2> <h3> <h4> <h5> <h6> <blockquote> <hr> <span> <br> <font> <sup> <sub> <div>
Once these tags have been allowed, Wysiwyg should function correctly.
Graphically, the configuration steps are:


You will notice from the screen-shots, that I have created a “Part HTML” input type. The site which I have used to illustrated the example, is a public site with general users uploading the content. From the point of view of security and not breaking the layout, I have disabled header, horizontal rule, table, font, and div tags, in addition to the ones listed above. However the moderators have been allowed the option of using these restricted tags through the “filtered HTML” input. Such a set-up can be implemented through user-roles and permissions.
There are some alternative rich-text modules available for Drupal as well. But the Wysiwyg module seems to be the best maintained among them.
Here is a screen-shot of the TinyMCE editor in action:

And yes, TinyMCE does come with Emoticons!
![]()

That will be really good for new drupal users.
a very good tutorial i must say. I used Drupal once for hosting a website inside of my college. This will be of great use to me.
I don't know If I said it already but ...I'm so glad I found this site...Keep up the good work I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say GREAT blog. Thanks, :)
A definite great read....
That's great... It'll be really helpful.
Thanks for sharing.
Post new comment