一个绝好的在线html编辑器-fck
下面介绍一下我的实现方式，首先下载FCKeditor_2.4.3和FCKeditor-2.3包，FCKeditor-2.3包是jsp的实现方式，在WebRoot下新建一个目录fck,解压 FCKeditor_ 2.3包，将其中的editor文件夹到项目中的fck目录，将其中的 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夹到项目中的fck目录.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"
"http://java.sun.com/j2ee/dtds/web-app_2_2.dtd">
<web-app>
<display-name>FCKeditor Test Application</display-name>
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<!-- 此为文件浏览路径 -->
<param-name>baseDir</param-name>
<param-value>/fck/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</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>
<!-- 此为文件上传路径，需要在WebRoot 目录下新建 UserFiles 文件夹 -->
<!-- 根据文件的类型还需要新建相关的文件夹 Image、Flash -->
<param-name>baseDir</param-name>
<param-value>/fck/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<!-- 此参数为是否开启上传功能 -->
<param-name>enabled</param-name>
<param-value>false</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>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
</web-app>
注意上面的baseDir，默认是跟路径，你要在所配置的路径新建一个文件目录
下面是我写的测试文件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FCK</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" src="../../fckeditor.js"></script>
<script type="text/javascript">
function FCKeditor_OnComplete( editorInstance )
{
var oCombo = document.getElementByIdx( 'cmbToolbars' ) ;
oCombo.value = editorInstance.ToolbarSet.Name ;
oCombo.style.visibility = '' ;
}
function ChangeLanguage( languageCode )
{
window.location.href = window.location.pathname + "?toolbar=" + languageCode ;
}
</script>
</head>
<%
String toolBarSetStr=request.getParameter("toolbar");
if(toolBarSetStr==null) {
toolBarSetStr="";
}
String path = request.getContextPath();
%>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Select the toolbar to load:
</td>
<td>
<select id="cmbToolbars" onchange="ChangeLanguage(this.value);" style="VISIBILITY: hidden">
<option value="Default" selected>Default</option>
<option value="Basic">Basic</option>
</select>
</td>
</tr>
</table>
<br>
<form action="../1.jsp" method="post" target="_blank">
<FCK:editor id="fck" basePath="/blog/fck/"
toolbarSet="<%=toolBarSetStr%>"
imageBrowserURL="${path}/fck/editor/filemanager/browser/default/browser.html?Type=Image&Connector=${path}/editor/filemanager/browser/default/connectors/jsp/connector"
linkBrowserURL="${path}/fck/editor/filemanager/browser/default/browser.html?Connector=${path}/editor/filemanager/browser/default/connectors/jsp/connector"
flashBrowserURL="${path}/fck/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=${path}/editor/filemanager/browser/default/connectors/jsp/connectorr"
imageUploadURL="${path}/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="${path}/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="${path}/editor/filemanager/upload/simpleuploader?Type=Flash">
</FCK:editor>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
这里要注意的是路径问题，Connector和SimpleUploader是已经在wb.xml中配置过的servlet文件，所以在这里只需要在前面加${path}就够了，至于basePath，你在文件目录在那里，你就配那里！
这里密切要注意的是id="fck"，这个id就是要提交的内容，在接受方这样，例如：
String str = request.getParameter("fck");
out.println(str);
就可以把内容显示出来或自己实现写入数据库
如果我只想用编辑器里的源代码，图像,falsh,超链接等几个功能,其他的不用,也不让它们显示出来,要怎么弄呢?
你只需要修改fckconfig.js就够了
选择你所喜欢的吧
- FCKConfig.ToolbarSets["Default"] = [
- ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
- ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
- ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
- ['OrderedList','UnorderedList','-','Outdent','Indent'],
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
- ['Link','Unlink','Anchor','Image','Flash'],
- ['TextColor','BGColor','Table','Rule'],
- ['Style','FontFormat','FontName','FontSize']
- ] ;
这只是一篇提供入门的文章，大家有兴趣的可去深入研究！有心得大家再讨论！
浙公网安备 33010602011771号