Home Tutorial Jsp WYSIWYG html editor in JSP

 
 

Share on Google+Share on Google+
WYSIWYG html editor in JSP
Posted on: April 6, 2011 at 12:00 AM
Advertisement
This tutorial explains how to create toolbar with textarea in jsp. This example is created in eclipse IDE and run on tomcat server.

WYSIWYG html editor in JSP

This tutorial explains how to create WYSIWYG html editor in JSP. This example is created in eclipse IDE and run on tomcat server.

We will use jQuery and jquery.wysiwyg for creating WYSIWYG html editor in JSP.

This tutorial applies following steps.

Step 1 :

First we create Dynamic web project "toolbar" in eclipse IDE . Now we create toolbar.jsp file under WebContent folder. The code of toolbar.jsp are given as:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Toolbar with TextArea </title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="css/jquery.wysiwyg.css" type="text/css" />

<link rel="stylesheet" href="examples.css" type="text/css" />

<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>

<script type="text/javascript" src="jquery/jquery.wysiwyg.js"></script>

<script type="text/javascript">

$(function()

{

$('#wysiwyg').wysiwyg();

});

</script>

</head>

<body>

<h1>Toolbar with TextArea </h1>

<div>

<textarea name="wysiwyg" id="wysiwyg" rows="5" cols="47"></textarea>

</div>

</body>

</html>

This example uses jquery and css file that is described in the above jsp file.

Step 2 :

Again create css folder under "WebContent"  folder and put inside "jquery.wysiwyg.css" file.

Step 3 :

Now create images folder under "WebContent"  folder and put inside "toolbarimage.gif" image.

Step 4 :

Now create jquery folder under "WebContent"  folder and put inside "jquery-1.3.2.js" and "jquery.wysiwyg.js" jquery files.

Step 5 :

Now open "web.xml"  file and modify as:

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

id="WebApp_ID" version="2.5">

<display-name>toolbar</display-name>

<welcome-file-list>

<welcome-file>toolbar.jsp</welcome-file>

</welcome-file-list>

</web-app>

 The project structure displays as:

toolbarimage

Step 6 :

When run application on tomcat server, it displays output as:

toolbarimage

You can select different button and modify different text format as given below:

toolbarimage

Again you select different heading format as:

toolbarimage

Similarly, you can also select another toolbar button as Undo, Redo, and text aligns.

Download Code

Download example code

Advertisement

Related Tags for WYSIWYG html editor in JSP:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 6, 2011

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com