Category Archives: Javascript

Rich Text Editor in Java, JSP

Today my friend asking me to implement Rich Text Editor in Java. Their current application is standard Java web application.

Talking to my friend who use to talk using Ruby, he recommends me to use CKEditor. From the forum and the feedback this javascript library, I can say already mature.

They have implement also the taglib for JSP (either make this more complicated or easier is up to developer who uses it).

Since the friend who asks a help already implement in java way for the sake of maintaining purpose.

For anyone who still has doubt on how the Rich Text Editor (RTE) looks like, it is like this

1

The common use case when the RTE use is when we need to let user has a fancy post (like in Jira) , instead of writing  HTML code to draw a table and insert an image. Others use case is for in some web application that required the user admin to create an email template in a fancy way but easier.

So, now you have a solid reason to have the feature on your web application. The steps to implement it as follow.

I assume you use maven base project, and you can add ckeditor taglib library to the project


<!-- WYSWYG lib CK Editor -->
<dependency>
     <groupId>com.ckeditor</groupId>
     <artifactId>ckeditor-java-core</artifactId>
     <version>3.5.3</version>
</dependency>

After the jar is added (either trough maven or manual), download the ckeditor from here http://ckeditor.com/download/releases ( I used ckeditor 3.5.3)

and copy all to your javascript folder (later we use the location in our jsp). In my project will be like this

1

Once the javascript and all the ckeditor added into the project then we can start add and work on our jsp.

Add this snipped on top of your jsp, so you can start using the taglib


<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

 

within the form tag, you ckeditor:editor instead of textarea like below

<tr>
<td class="field-label" colspan="2">Void Email Template
<ckeditor:editor basePath="${contextPath}/js" editor="voidTemplate"         value="${settingForm.voidTemplate}" /></td>
</tr>

basePath=”${contextPath}/js is location where the ckeditor javascript located

Start deploying the application, you should be able to use the CK Editor as your RTE.

 

 

Advertisements