BlogJava-爪哇东南的自留地-随笔分类-应用服务器http://www.blogjava.net/ericli1982/category/15160.html学习探讨开源和web开发zh-cnFri, 02 Mar 2007 03:07:39 GMTFri, 02 Mar 2007 03:07:39 GMT60富客户端技术（之一）　　　FCKEditor　　 最流行的文本编辑器http://www.blogjava.net/ericli1982/archive/2006/09/13/69443.htmlericliericliWed, 13 Sep 2006 12:14:00 GMThttp://www.blogjava.net/ericli1982/archive/2006/09/13/69443.htmlhttp://www.blogjava.net/ericli1982/comments/69443.htmlhttp://www.blogjava.net/ericli1982/archive/2006/09/13/69443.html#Feedback1http://www.blogjava.net/ericli1982/comments/commentRss/69443.htmlhttp://www.blogjava.net/ericli1982/services/trackbacks/69443.html     C/S体系结构采用了开放的模式在一定的程度上解决了人们对联机办公等的网络应用需求，导致了胖客户端应用（fat clients）流行。
    随着人们对网络应用需求的进一步深入，B/S结构的网络应用又随之诞生了，这种结构的网络应用又称为瘦客户端应用，只要通过Web浏览器，各种处理任务都可以调用系统资源来完成，这样大大简化了客户端，减轻了系统维护与升级的成本和工作量，降低了用户的总体拥有成本（TCO）。
    今天的网络应用需要从“什么都用Web浏览器”到“根据情况采用强化客户端技术”进行本质的转变。人们需要更为复杂而精美的应用交互界面，发布和表现多种复杂形式的多媒体和内容，对形式多样而丰富的信息内容进行更好的组织和表现，而这些正是目前广泛应用的B/S结构所不能达到的，于是富客户端技术应运而生。
   作为开源的j2ee技术中涉及到view层的富客户端是一种趋势，而今天要介绍就是其中的一个简单的开源技术FCKEditor，运用它，可以在你的的页面展示出类似word页面的效果，而且无须安装，只需要在你的项目中引入相关的jar文件，在需要控件的地方适当的调用就可以了。
   下面我做一个简单的演示给大家
   1．首先，我们先去了解一下FCKEditor　　 http://www.fckeditor.net/
   英文介绍简单明了：
   This HTML text editor brings to the web many of the powerful functionalities of desktop editors like MS Word.
It's lightweight and doesn't require any kind of installation on the client computer.  
   ２．然后去下载相关的文件，这里我下载的是FCKeditor_2.3.1.zip文件
   ３．解压文件，本人使用的jsp页面，还需要下载　FCKeditor.Java　的相关文件
   ４．从sample01.jsp开始，使用中来体会学习
************************************jsp页面*********************************************
 
<%@ page language="java" import="com.fredck.FCKeditor.*" %>

<!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">
  <meta name="robots" content="noindex, nofollow">
  <link href="../sample.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">

function FCKeditor_OnComplete( editorInstance )
{
 window.status = editorInstance.Description ;
}

  </script>
 </head>
 <body>
  <h1>FCKeditor - JSP - Sample 1</h1>
  This sample displays a normal HTML form with an FCKeditor with full features
  enabled.
  <hr>
<!--  自己的 action 方式  -->
  <form action="sampleposteddata.jsp" method="get" target="_blank">
<%
//以下是修改的关键
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;//初始化的一些配置，第二个参数EditorDefault就是这个字段的名称
oFCKeditor.setBasePath( "/FCKeditor/" ) ;//为了寻找相应的frame页面：fckeditor.html;同时传递参数；这里设置为我们需要的路径！
//oFCKeditor.setBasePath( "/nhoa/FCKeditor/" ) ;//我的例子，就是指明你的文件放在哪个目录下
oFCKeditor.setValue( "ligang's example!" );//初始化页面显示的数据
out.println( oFCKeditor.create() ) ;//建立吧，看源码很简单！
%>
   <br>
   <input type="submit" value="Submit">
  </form>
 </body>
</html>
************************************jsp页面***********************************

使用步骤：
（１）项目中import 这个包包：fckEditor.jar（将src的java代码打包），需要看源码也可以！
（２）修改你的jsp页面，在需要添加该效果的地方模仿以上jsp页面进行修改
（３）想想，好象没有什么事了！
（４）试试吧！
５．分析实现原理
主要就是oFCKeditor.create() ，通过这个方法建立控件，在源代码中可以看见
public String create() {
  StringBuffer strEditor=new StringBuffer();
  
  strEditor.append("<div>");
  String encodedValue=HTMLEncode(value);

   if(isCompatible()) { //浏览器版本符合要求产生我们的控件
   strEditor.append("<input type=\"hidden\" id=\"" + instanceName + "\" name=\"" + instanceName + "\" value=\"" + encodedValue + "\">");
  
   strEditor.append(createConfigHTML());
   strEditor.append(createIFrameHTML());
  
  }
  else{//浏览器版本不符合要求，产生一个textarea，呵呵，也不失是一种弥补的方式
   strEditor.append("<TEXTAREA name=\"" + instanceName + "\" rows=\"4\" cols=\"40\" style=\"WIDTH: " + width + "; HEIGHT: " + height + "\" wrap=\"virtual\">"+encodedValue+"</TEXTAREA>");
  }
  strEditor.append("</div>");
  return strEditor.toString();
 }
   其实就是一个servelt向浏览器写一些html语句，其中的createConfigHTML（）就是通过配置文件config.js向控件传递一些参数，在页面是通过hidden域来传递的,但是自己没有找到这个文件的位置，希望明白的朋友可以告诉我．．．．．．
createIFrameHTML()就是建立控件的方法，其中最重要的一个参数就是sLink，
String sLink=basePath + "editor/fckeditor.html?InstanceName=" + instanceName;它指明了控件数据的名称就是instanceName，它有时在那里被用户初始化的呢，呵呵，是在构造方法里面，FCKeditor 类有一个构造方法
 public FCKeditor(HttpServletRequest req, String parInstanceName){
  request=req;
  basePath = request.getContextPath() + "/FCKeditor/";
  instanceName=parInstanceName;
  oConfig = new FCKeditorConfigurations() ;
 }
我们在jsp页面上，看到
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;//初始化的一些配置，第二个参数EditorDefault就是这个
变量
６．到这里，需要我们试用者了解的部分就这些了，剩下的工作就是控件自己实现了，呵呵，真的很简单啊
总结：
使用就要做两件事情：import　fckEditor.jar，这个jar包是我自己通过开源的代码自己编译后打的
还有就是在需要的地方添加代码，注意两个地方，一个是选取合适的构造函数和构造函数参数，还有就是
设定好自己项目摆放FCKeditor文件的目录，基本没有什么问题，今天在工作的项目上使用了一下没有什么问题．



ericli 2006-09-13 20:14 发表评论
]]>