Using FCKeditor in JSP web pages

zhou2324

浏览: 18638 次
性别:
来自: 长沙

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

fckeditor JSP Web Java JavaScript

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:

/webapp
   /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:

<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>

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:

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

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>
<title>FCKeditor - JSP Sample</title>
<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>
<h1>Hello World! FCKeditor</h1>
<hr><%
String submit = request.getParameter("submit");
if (submit != null) {
    String content = request.getParameter("content");
    if (content == null) content = "";
    out.println("Content: " + content);
    out.println("<hr>");
}
%>
<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>
<br>
<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>

分享到：

第一篇 | 好男人找不到女朋友的原因

2009-06-11 11:39
浏览 1050
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论