Using FCKeditor in JSP web pages

最新推荐文章于 2017-11-27 16:14:00 发布

zhou1862324

最新推荐文章于 2017-11-27 16:14:00 发布

阅读量89

点赞数

分类专栏： s 文章标签： fckeditor JSP Web Java JavaScript ViewUI

本文链接：https://blog.csdn.net/zhou1862324/article/details/83405673

版权

s 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

zhou1862324

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Using FCKeditor in JSP web pages

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 Integr...
复制链接

扫一扫