Java中fck自定义标签、JS调用fckeditor
在java开发中用得比较多的文本编辑器一般采用fckeditor。
现就fckeditor在JSP中的调用归纳如下：
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
1、FCKeditor自定义标签在JSP页面调用：
1）首先在web.xml中做简单的配置，配置文件内容如下，直接copy到web.xml即可：
<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>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</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>
<init-param>
<param-name>enabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/include/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/include/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
<taglib>
<taglib-uri>/include/fckeditor</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>
2）JSP页面要引入FCKeditor.tld这个文件，该文件放在WEB-INF文件夹下，页面引入代码如下：
<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck" %>
3）实现代码如下：
<tr>
<td class="tr_title_edit"><label for="f_content">内容</label></td>
<td class="tr_content_edit" colspan="3">
<fck:editor id="f_content" basePath="/dpsafe/include/fckeditor/"
height="500"
width="100%"
skinPath="/dpsafe/include/fckeditor/editor/skins/default/"
toolbarSet="Default"
imageBrowserURL="/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
</fck:editor>
</td>
</tr>
我将fckeditor单独入在一个公用的include文件夹中，以便任何要用到该编辑器的页面都能够引用它，节省空间，维护方便。
到此fckeditor编辑器也就能够使用了。
2、 在页面写这么多东西，感觉太复杂了一点，要写配置还要引用文件；用JS调用就相对要简单些，具体介绍如下：
1）引入fckeditor.js文件，具体代码如下：
<script language="javascript" type="text/javascript" src="<%=basePath%>/include/fckeditor/fckeditor.js"></script>
2) 页面具体的代码调用如下：
<tr>
<td class="tr_title_edit"><label for="f_content">内容</label></td>
<td class="tr_content_edit" colspan="3">
<script type="text/javascript">
<!--
var sBasePath = "<%=basePath%>/include/fckeditor/";
var oFCKeditor = new FCKeditor( 'f_content' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 500 ;
oFCKeditor.Create() ; //调用它的create()方法来直接在JSP嵌入FCKeditor编辑器
//-->
</script>
</td>
</tr>
另一种调用FCKeditor编辑器的方法的简单区别是：
<td>
<textarea id="f_content" name="f_content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>
<script type="text/javascript">
var sBasePath = "<%=basePath%>/include/fckeditor/";
var oFCKeditor = new FCKeditor( 'f_content' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 500 ;
oFCKeditor.ReplaceTextarea(); //替换文本域
</script>
</td>
3、 修改页面如何实现，只需修改几个部分即可，具体如下：
1）JSP修改页面只需在增加页面的基础上加一句代码：
<fck:editor id="f_content" basePath="/dpsafe/include/fckeditor/"
height="500"
width="100%"
skinPath="/dpsafe/include/fckeditor/editor/skins/default/"
toolbarSet="Default"
imageBrowserURL="/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
<%=pubDTO.getContent() %>
</fck:editor>
2）JS修改方法如下：
<tr>
<td class="tr_title_edit"><label for="f_content">内容</label></td>
<td class="tr_content_edit" colspan="3">
<script type="text/javascript">
var sBasePath = "<%=basePath%>/include/fckeditor/";
var oFCKeditor = new FCKeditor( 'f_content' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 500 ;
oFCKeditor.Value = '<%=f_content%>' ;
oFCKeditor.Create() ;
//-->
</script>
</td>
</tr>