SpringSide开发实战（七）：在项目中整合FCKeditor - 编程入门网

了解浏览器技术的人都不难想到，Web编辑器其实应该是客户端技术，它是通过 JavaScript来控制页面上的元素和通过弹出窗口来模拟对话框而做到的；只有在提交文章或 者上传文件的时候才需要跟服务器端交互。因此，要将该编辑器快速整合到项目中以看到效 果，是非常简单的。

SpringSide开发实战（七）：在项目中整合FCKeditor(3)

三、使用JavaScript整合FCKeditor

将刚刚解压得到的fckeditor目录拷贝到我们的项目中的src\main\webapp目录下，打开 刚才建立的EditPosts.jsp，加入如下代码：

1　< script src = " fckeditor/fckeditor.js " ></ script > 2　< script language = " javascript " > 3　window.onload　=　 function ()　{ 4　　　var　oFCKeditor　=　 new　FCKeditor( ''myTextArea'' ) ; 5　　 oFCKeditor.BasePath　=　 " fckeditor/ " ; 6　　 oFCKeditor.ReplaceTextarea(); 7 } 　　　 </scrip>

在这里，第一行代码是引入fckeditor中的fckeditor.js文件，其中定义了FCKeditor类 ，第四行就是利用该类创建一个编辑器对象，而myTextArea是表单中文本区域的名字，在第 六行，通过FCKeditor类的ReplaceTextArea方法，文本区域就被替换成了Web编辑器。刷新 页面，就可以看到效果：

FCKeditor类提供几个基本属性，可以让我们对编辑器进行简单的控制，它们是：

InstanceName：返回编辑器示例的名字

Width：设置编辑器的宽度，默认为100%

Height：设置编辑器的高度，默认值为200

ToolbarSet：设置编辑器的工具条集合，默认值为"default"，稍后会讲到怎样自定义工 具条

Value：设置显示在编辑器中的内容（包含HTML），默认值为空

BasePath：编辑器的目录，一定要设置正确，否则编辑器会找不到它需要的文件，在本 例中，由于我们直接将fckeditor目录放到项目的根目录下，因此设置为"fckeditor/"

CheckBrowser：设置是否检测浏览器，默认为true

DisplayErrors：设置是否显示错误信息，默认为true

SpringSide开发实战（七）：在项目中整合FCKeditor(4)

此外，FCKeditor类还有一个集合属性Config[ key ] = value，通过该集合属性，我们 可以进行一个更高级的设置，如设置默认语言、更换皮肤等等。

<script src="fckeditor/fckeditor.js"></script> <script language="javascript"> window.onload = function(){ 　　 var oFCKeditor = new FCKeditor( ''myTextArea'' ) ; 　　 oFCKeditor.BasePath = "fckeditor/"; 　　 oFCKeditor.Width = "800"; 　　 oFCKeditor.Height = "300"; 　　 oFCKeditor.ToolbarSet = "Basic"; 　　 oFCKeditor.Config["SkinPath"] = "skins/office2003/"; 　　 oFCKeditor.ReplaceTextarea(); } </script>

效果图：

SpringSide开发实战（七）：在项目中整合FCKeditor(5)

四、通过FCKeditor.java整合FCKeditor

使用JavaScript整合FCKeditor，我们很快就能看到编辑器的效果，并进行文章的编辑。 但是，在需要和服务器端进行交互的时候（比如上传图片），就会出错。因此，我们不得不 在服务器端做一点手脚。这里，我们需要使用的是FCKeditor.java，其最新版本是2.3，还 是在刚才的下载页面，找到下载链接，如下图：

将下载文件解压，我们可以看到有doc目录，有src目录，甚至还有一个build.xml，让我 们可以重新构建

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!