FCKeditor 基于java servlet 的配置和 使用

大家都知道基于web的文本编辑器我们首先FCKEditor。因为它是免费的，使用方便。但是网络上介绍的FCK的使用方法都在JS中进行配置，这种方法不足之处是JS的兼容性不是很好。今天我给大家介绍使用servlet来配置FCKEditor，基于servlet 配置的FCKEditor可以很好的兼容不同的浏览器。下面是配置步骤。

1）先要找到需要的jar。jar的名称是：fckeditor-java-core-x.x.x.jar，可以通过maven或其他方式找到最新的jar 在这里我使用是fckeditor-java-core-2.4.1.jar。再到管方网站下载FCKEditor，把解压后的fckeditor文件夹copy到webContent下。

2）在web.xml配置servlet，在加web.xml中加入以下代码：

 

<servlet>
	<servlet-name>fckeditor</servlet-name>
	<servlet-class>
		net.fckeditor.connector.ConnectorServlet
	</servlet-class>
	<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
 	<servlet-name>fckeditor</servlet-name>
 	<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>  

 

3）在要显示FCKeditor编辑器的页面加头部加入以下代码：

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

 注：这是对FCK标签的配置。

4）在页面要显示编辑框的里面加入以下代码：

<DIV>
	<FCK:editor width="755" height="460" instanceName="holdProduct.productCname" value="${holdProduct.productCname}" >
		<FCK:config SkinPath="skins/office2003/" />
	</FCK:editor>
</DIV>

 

注：FCK：editor 中instanceName 的值要定义到struts2对象的属性，这里和定义其他name相同。value 属性的值是文本编辑器要显示的内容。

5）运行程序，打开编辑器页面，如下图：

 

6）实际的应用中，我们可以不需要这么多的工具菜单，有没有一种方法对工具栏进行配置呢 ？ 答案是肯定的。在FCK:editor有一个属性 toolbarSet  ，用来指定我们要想的工具栏。再问toolbarSet 的值是多少呢 ？这个也可以fckeditor的js中找到答案。我们找到fckeditor目录下的fckconfig.js文件，打开文件并搜索“Default”，你们找到了吗 ？如下图：

 默认的工具栏是：Default，下面还有一个Basic。我们试一下Basic 是个什么的工具栏。在FCK:editor的标签中加入 toolbarSet="Basic" 代码如下：

<DIV>
	<FCK:editor width="755" height="460" instanceName="holdProduct.productCname" value="${holdProduct.productCname}" toolbarSet="Basic">
		<FCK:config SkinPath="skins/office2003/" />
	</FCK:editor>
</DIV>

 

7）再次运行程度，打开编辑器页面，发现工具栏变了，如下图：

 

 看来我们的配置生效了。我们也可以自己定义 工具栏。方法是：在fckconfig.js 加入以下代码：

FCKConfig.ToolbarSets["Bbs"] = [
	['Source','Save','Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

 

我们自定义的工具栏取名叫：Bbs。加入两个新功能按钮 'Source','Save'，然后修改toolbasSet 的值，运行程序，如下图：

 

 可见我们的配置是正确的。

8）如果要加在JS代码获取文本编辑器中的内容，有办法吗 ？ 答案是肯定的。先在页面上引入要用到的JS文件：代码如下：

<script type="text/javascript" src="<%=basePath%>js/fckeditor.js"></script>

在页面定义两个按钮，代码如下：

<button οnclick="JavaScript:getFCKeditorInfo()">获取FCKEditro内容</button>
<BR/>		
<button οnclick="JavaScript:setFCKeditorInfo()">设置FCKEditro内容</button>

 对应的JS代码如下：

function getFCKeditorInfo() {
	alert(getFCKEditorTextContent('holdProduct.productCname'));
}

function setFCKeditorInfo() {
	setFCKEditorTextContent('holdProduct.productCname','我是fckeditor,你好吗？');
}

/**
 * 获取FCKEeditor控件中的文字内容
 * 
 * @param fckEditorName
 *            FCKEditor 实例的名字
 */
function getFCKEditorTextContent(instanceName) {
	var oEditor = FCKeditorAPI.GetInstance(instanceName);
	return(oEditor.GetXHTML());
}

/**
 * 设置FCKEditor控件中的文字内容
 * 
 * @param fckEditorName
 *            FCKEditor 实例的名字
 * @param contentStr
 *            要设置的内容
 */
function setFCKEditorTextContent(instanceName, contentStr) {
	var oEditor = FCKeditorAPI.GetInstance(instanceName);
	oEditor.SetHTML(contentStr);
}

 经过测试，JS代码生效。