以下均在tomcat服务器下操作(不是开发环境下的操作)
首先下载两个包:
FCKeditor_2.6.4.zip,(FCKeditor主文件)
FCKeditor-2.3.zip,(jsp,FCKeditor整合包)
第一步:
解压FCKeditor_2.6.4.zip,(FCKeditor主文件),将fckeditor目录复制到网站根目录下,如果架设一个以bbs为名的网站,把fckeditor目录复
制到bbs目录下(注意是tomcat下面的bbs文件目录,而不是开发环境下的bbs目录)。
第二步:
解压FCKeditor-2.3.zip,(jsp,FCKeditor整合包,在官网上它是属于java文件那个部分),将FCKeditor-2.3/web/WEB-INF/web.xml中的两个
servlet,servlet-mapping定义复制到自已项目的web.xml文件(注意是tomcat下的/bbs/WEB-INF/web.xml的web.xml文件)中
修改自已项目的web.xml文件中的:
<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>
为 :
<servlet-mapping>
<servlet-name> Connector </servlet-name>
<url-pattern> /fckeditor/editor/filemanager/browser/default/connectors/jsp/connector </url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name> SimpleUploader </servlet-name>
<url-pattern> /fckeditor/editor/filemanager/upload/simpleuploader </url-pattern>
</servlet-mapping>
将FCKeditor-2.3/web/WEB-INF/lib目录下文件复制到自已项目的lib文件夹(注意是tomcat下的/bbs/WEB-INF/lib文件夹)中,
第三步:
在(bbs下)网站根目录建立一个test.jsp和test1.jsp文件
test.jsp文件的内容是:
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<form action=test1.jsp method="post">
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;
oFCKeditor.setBasePath( request.getContextPath() + "/fckeditor/" ) ;
oFCKeditor.setValue( "This is some <strong> sample text </strong> . You are using <a
href=\"http://www.fredck.com/fckeditor/\"> FCKeditor </a> ." );
out.println(oFCKeditor.create()) ;
%>
<input type="submit" name="Submit" value="提交" onClick="return checkForm()" />
<input type="reset" name="Submit2" value="重置">
</form>
test1.jsp文件的内容是:
<%@ page language="java" import="java.util.*"%>
<%
String contentString = (String)request.getParameter("EditorDefault");
out.println("***************<br>");
out.println("contentString="+contentString);
out.println("***************<br>");
%>
意思是,在test.jsp中创建一个FCKeditor对象,然后在它的初始化方法中把EditorDefault作为属性,并且和request关联起来
然后在test1.jsp里面通过request.getParameter读取属性EditorDefault的值,这个值就是文本编辑器的内容,可以直接存放到数据库中
读出来以后是按html翻译后的,即和编辑时的一模一样。
注意事项:
以下是使用在线编辑器必不可少的
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;
oFCKeditor.setBasePath( request.getContextPath() + "/fckeditor/" ) ;
out.println(oFCKeditor.create());
%>
精简内容(以下均为摘抄):
最后开始配置工具栏,工具栏的配置主要是对 fckeditor 目录下的 fckconfig.js 进行修改。
可以在网上搜索‘fckconfig.js’或者 ‘FCK 工具栏’,找到一篇文章:FCK编辑器精简工具栏
fckconfig.js 中关于工具栏的设置原始为:
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
文章里精简为:
//默认编辑器工具栏设置
FCKConfig.ToolbarSets["Default"] = [
['Source'],['PasteText','PasteWord','-'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','ShowBlocks'],
'/',
['Bold','Italic','Underline','StrikeThrough'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],['TextColor','BGColor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['FontFormat','FontName','FontSize'],
] ;
最后我去除了一些功能,精简为:
FCKConfig.ToolbarSets["Default"] = [
['PasteText','PasteWord','-'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['Link','Unlink'],['TextColor','BGColor'],
['Table','Rule','SpecialChar','PageBreak'],
'/',
['Bold','Italic','Underline','StrikeThrough'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['FontFormat','FontName','FontSize'],
] ;
注意里面可以任意变换顺序, '/', 代表分行, 一个 [] 里的内容为一个集中区域。