FCKeditor is an open source text editor for internet. It is compatible with most internet browsers which includes IE, Firefix, Mozilla and Netsacpe. On the server side, FCKeditor offers the JSP Integration Pack which makes it very easy to use FCKeditor in JSP web pages.
1. Download the JSP Integration Pack from the following URL:
http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=129511
And download FCKeditor editor from the following URL:
http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845
2. Install FCKeditor in a JSP environment:
Unzip the Java Integration Library, put the jar files FCKeditor-x-x.jar and commons-fileupload.jar in your webapp's WEB-INF/lib/ directory.
Unzip the FCKeditor editor zip file and put all JavaScript scripts in the /FCKeditor/ directory of your webapp.
The director structure is as follows:
/FCKeditor
/WEB-INF
/classes
/lib
/fckeditor-x-x.jar
/commons-fileupload.jar
3. Use FCKeditor in jsp pages
1) Put this taglib definition at the top of the JSP page:
2) Use the tag in jsp:
<FCK:editor id="marketing_scope" basePath="/FCKeditor/" height="300"
skinPath="/FCKeditor/editor/skins/office2003/"
imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector">
</FCK:editor>
3) Config the File Browser Connector by adding the following piece of code in web application's web.xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
<description>FCKeditor Test</description>
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
</web-app>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
</web-app>
And put in the fckconfig.js the following line:
4) Get and set the content in the editor with javascript:
function getEditorValue( instanceName )
{
// Get the editor instance that we want to interact with.
var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;
// Get the editor contents as XHTML.
return oEditor.GetXHTML( true ) ; // "true" means you want it formatted.
}
function setEditorValue( instanceName, text )
{
// Get the editor instance that we want to interact with.
var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;
// Set the editor contents.
oEditor.SetHTML( text ) ;
}
4. Full example source code
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function setEditorValue( instanceName, text )
{
// Get the editor instance that we want to interact with.
var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;
// Set the editor contents.
oEditor.SetHTML( text ) ;
}
function getEditorValue( instanceName )
{
// Get the editor instance that we want to interact with.
var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;
// Get the editor contents as XHTML.
return oEditor.GetXHTML( true ) ; // "true" means you want it formatted.
}
</script>
</head>
<body>
Hello World! FCKeditor
<%
String submit = request.getParameter("submit");
if (submit != null) {
String content = request.getParameter("content");
if (content == null) content = "";
out.println("Content: " + content);
out.println("
");
}
%>
<form method="post">
<FCK:editor id="content" basePath="/FCKeditor/" height="300"
skinPath="/FCKeditor/editor/skins/office2003/"
imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector">
</FCK:editor>
<input type="button" value="Set Value" onclick="setEditorValue('content', 'Hello World!')" />
<input type="button" value="Get Value" onclick="alert(getEditorValue('content'))" />
<input type="submit" value="Submit" name="submit" />
</form>
</body>
</html>
