服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > 新手入门 > 基础入门 > 查看文档

fckeditor在线编辑器的使用


试用了一下fckeditor,根据网上的文章小结一下:
1.下载
fckeditor.java 2.3 (fckeditot for java)
fckeditor 2.2 (fckeditor基本文件)

2.建立项目:tomcat/webapps/testfckeditor.

3.将fckeditor2.2解压缩,将整个目录fckeditor复制到项目的根目录下,
目录结构为:tomcat/webapps/testfckeditor/fckeditor
然后将fckeditor-2.3.zip(java)压缩包中/web/web-inf/lib/目录下的两个jar文件拷到项目的/web-inf/lib/目录下。把其中的src目录下的fckeditor.tld文件copy到testfckedit/fckeitor/web-inf/下

4.将fckeditor-2.3.zip压缩包中/web/web-inf/目录下的web.xml文件合并到项目的/web-inf/目录下的web.xml文件中。

5. 修改合并后的web.xml文件,将名为simpleuploader的servlet的enabled参数值改为true,
以允许上传功能,connector servlet的basedir参数值用于设置上传文件存放的位置。
添加标签定义:
<taglib>
<taglib-uri>/testfckeditor</taglib-uri>
<taglib-location>/web-inf/fckeditor.tld</taglib-location>
</taglib>

运行图:

fckeditor在线编辑器的使用

6. 上面文件中两个servlet的映射分别为:/editor/filemanager/browser/default/connectors/jsp/connector
和/editor/filemanager/upload/simpleuploader,需要在两个映射前面加上/fckeditor,
即改为/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector和
/fckeditor/editor/filemanager/upload/simpleuploader。

7.进入skin文件夹,如果你想使用fckeditor默认的这种奶黄色,
那就把除了default文件夹外的另两个文件夹直接删除.

8.删除/fckeditor/目录下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件以外的所有文件
删除目录/editor/_source,
删除/editor/filemanager/browser/default/connectors/下的所有文件
删除/editor/filemanager/upload/下的所有文件
删除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四个文件的所有文件

9.打开/fckeditor/fckconfig.js
修改 fckconfig.defaultlanguage = 'zh-cn' ;
把fckconfig.linkbrowserurl等的值替换成以下内容:
fckconfig.linkbrowserurl
= fckconfig.basepath + "filemanager/browser/default/browser.html?connector=connectors/jsp/connector" ;

fckconfig.imagebrowserurl
= fckconfig.basepath + "filemanager/browser/default/browser.html?type=image&connector=connectors/jsp/connector" ;

fckconfig.flashbrowserurl
= fckconfig.basepath + "filemanager/browser/default/browser.html?type=flash&connector=connectors/jsp/connector" ;


fckconfig.linkuploadurl = fckconfig.basepath + 'filemanager/upload/simpleuploader?type=file' ;
fckconfig.flashuploadurl = fckconfig.basepath + 'filemanager/upload/simpleuploader?type=flash' ;
fckconfig.imageuploadurl = fckconfig.basepath + 'filemanager/upload/simpleuploader?type=image' ;

10.其它
fckconfig.js总配置文件,可用记录本打开,修改后将文件存为utf-8 编码格式。找到:

fckconfig.tabspaces = 0 ; 改为fckconfig.tabspaces = 1 ; 即在编辑器域内可以使用tab键。

如果你的编辑器还用在网站前台的话,比如说用于留言本或是日记回复时,那就不得不考虑安全了,
在前台千万不要使用default的toolbar,要么自定义一下功能,要么就用系统已经定义好的basic,
也就是基本的toolbar,找到:
fckconfig.toolbarsets["basic"] = [
['bold','italic','-','orderedlist','unorderedlist','-',/*'link',*/'unlink','-','style','fontsize','textcolor','bgcolor','-',
'smiley','specialchar','replace','preview'] ] ;
这是改过的basic,把图像功能去掉,把添加链接功能去掉,因为图像和链接和flash和图像按钮添加功能都能让前台
页直接访问和上传文件, fckeditor还支持编辑域内的鼠标右键功能。

fckconfig.contextmenu = ['generic',/*'link',*/'anchor',/*'image',*/'flash','select','textarea','checkbox','radio','textfield','hiddenfield',
/*'imagebutton',*/'button','bulletedlist','numberedlist','tablecell','table','form'] ;

这也是改过的把鼠标右键的“链接、图像,flash,图像按钮”功能都去掉。

  找到: fckconfig.fontnames = 'arial;comic sans ms;courier new;tahoma;times new roman;verdana' ;
加上几种我们常用的字体
fckconfig.fontnames
= '宋体;黑体;隶书;楷体_gb2312;arial;comic sans ms;courier new;tahoma;times new roman;verdana' ;

7.添加文件 /testfckeditor/test.jsp:
<%@ page language="java" import="com.fredck.fckeditor.*" %>
<%@ taglib uri="/testfckeditor" prefix="fck" %>
<script type="text/javascript" src="/testfckeditor/fckeditor/fckeditor.js"></script>

<%--
三种方法调用fckeditor
1.fckeditor自定义标签 (必须加头文件 <%@ taglib uri="/testfckeditor" prefix="fck" %> )
2.script脚本语言调用 (必须引用 脚本文件 <script type="text/javascript" src="/testfckeditor/fckeditor/fckeditor.js"></script> )
3.fckeditor api 调用 (必须加头文件 <%@ page language="java" import="com.fredck.fckeditor.*" %> )
--%>

<%--
<form action="show.jsp" method="post" target="_blank">
<fck:editor id="content" basepath="/testfckeditor/fckeditor/"
width="700"
height="500"
skinpath="/testfckeditor/fckeditor/editor/skins/silver/"
toolbarset = "default"
>
input
</fck:editor>
<input type="submit" value="submit">
</form>
--%>

<form action="show.jsp" method="post" target="_blank">
<table border="0" width="700"><tr><td>
<textarea id="content" name="content" style="width: 100%; height: 400px">input</textarea>
<script type="text/javascript">
var ofckeditor = new fckeditor('content') ;
ofckeditor.basepath = "/testfckeditor/fckeditor/" ;
ofckeditor.height = 400;
ofckeditor.toolbarset = "default" ;
ofckeditor.replacetextarea();
</script>
<input type="submit" value="submit">
</td></tr></table>
</form>

<%--
<form action="show.jsp" method="post" target="_blank">
<%
fckeditor ofckeditor ;
ofckeditor = new fckeditor( request, "content" ) ;
ofckeditor.setbasepath( "/testfckeditor/fckeditor/" ) ;
ofckeditor.setvalue( "input" );
out.println( ofckeditor.create() ) ;
%>
<br>
<input type="submit" value="submit">
</form>
--%>

添加文件/testfckeditor/show.jsp:
<%
string content = request.getparameter("content");
out.print(content);
%>

8.浏览http://localhost:8080/testfckeditor/test.jsp
ok!

扫描关注微信公众号