Adding a WYSIWYG Editor on a HTML Text Area

guneetsahai — Sat, 05 Apr 2008 07:05:00 +0000

One of the applications that I’m currently working on required me to write a small Java program that allowed users to send email from a web page. [Yeah - Nothing so great about it but sending emails is not what this post is about]. The page allowed user with basic email facilities and also supported Email Attachments (Thanks to Apache commons File upload). It allowed users to compose text emails through a regular HTML Text Area.

On Completing the application, one of the first enhancement that came my way was to enable rich text & spell checker in the body of the email. This initially looked quite a challenge to me as I had no clue how to go about building this. However After spending some time with my dear friend – Google, I found a couple of Tools that could help me out. I ended up using FCKEditor, which enabled writing/editing rich text through Java Script.

The product was not very costly (license details can be found here) & was fairly easy to set up. After a couple of hours, I managed to set it up properly and the HTML text area in my form got modified to that shown below (click to en-large). Notice the tool bar on top of the email body text area. One of the greatest feature of this editor was that it supported copy/paste from MS Office applications (Word, Outlook) without breaking down the formatting.

The reset of this post provides brief instructions on how to set this up. For more details, please refer to their online documentation here.

1) Download FCK Editor from here [I used version 2.6].

2) Unzip the downloaded compressed file into your web-app directory. With Tomcat for example, the un-compressed folder (fckeditor by default) should be placed into %TOMCAT_HOME%\webapps\%YOUR_WEBAPP_NAME% directory.

3) Point your web browser to the following linke in order to test the installation. If correctly installed you would see a text area with a tool bar similar to the one shown above.

http://yourip:port/your-webapp/fckeditor/_samples/default.html

4) Add the following lines to your web page in the section

window.onload = function()

{

var oFCKeditor = new FCKeditor( ‘my_text_area’, ’90%’, ’400′, ‘Default’, ” ) ;

oFCKeditor.BasePath = “fckeditor/” ;

oFCKeditor.ReplaceTextarea() ;

}

window.onload = function()

{

var oFCKeditor = new FCKeditor( ‘my_text_area’, ’90%’, ’400′, ‘Default’, ” ) ;

oFCKeditor.BasePath = “fckeditor/” ;

oFCKeditor.ReplaceTextarea() ;

}

Note(s)

1. This example adds rich text toolbar to a text area with the name ‘my_text_area’. You might want to replace this with the actual name that is being used in your HTML form.

2. The Base Path refers to the directory where the editor is installed. It defaults to fckeditor which is the default directory in which fckeditor is unzipped.

3. For more details, please refer online documentation here.

Script to change network settings

guneetsahai — Tue, 19 Feb 2008 06:37:00 +0000

These days I’m working from my client’s office for some part of the day and continue from my office for the remaining portion of the day. This requires me to change network settings on my windows XP Dell laptop (almost) every time I boot it. This was a painful activity that I wanted to somehow get away with. If you have encountered this pain too, then read on for details on a method that worked well for me.

Today I sat down to figure out how can that be simplified. 10 minutes of googling showed up a nice utility called “netsh” which was in c:\windows\system32 folder on my machine. It provided simple ways to dump/export existing network settings into a text file and re-load/import the same from it later if required. This was all that was required. I dumped my network’s settings into a text file and created a batch file through which it could be imported back. Did this for both the networks & I ended up with two nice short-cuts on my desktop which allow me to change from one network to another in 5 seconds.

Thanks Google.

The steps that I followed in order to do this were

a) Opened a Dos Window

b) Exported the current settings into a text file (network1.txt) by typing the following

netsh -c interface dump >> network1.txt

c) Created another text file called switch-to-network1.bat [Name could be anything, but extension should be bat]

d) Opened this file in Notepad (or any other text editor) and type in the following

netsh -f network1.txt

Make sure that the bat file & text file are in the same directory

e) Right click on the bat file, create a short-cut (if desired change its icon) and put it on your desktop.

Guneet's Web Log » How To

Adding a WYSIWYG Editor on a HTML Text Area

Script to change network settings