fckeditor -
(1)资料介绍与安装
fckeditor介绍
fckeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。
1.fckeditor官网：
2.fckeditor下载：
fckeditor_2.6.3（客户端javascript主程序）
fckeditor.java（支持j2ee web平台服务器端程序）
fckeditor-java-2.4-bin.zip(执行文件)
fckeditor-java-2.4-src.zip（源文件）
fckeditor-java-demo-2.4.war（样例）
3.fckeditor样例
demo1:默认fckeditor
demo2:多语言
demo3:自定义工具集
demo4:更换皮肤
4.fckeditor文档
开发者手册:http://docs.fckeditor.net/fckeditor_2.x/developers_guide
使用者手册:http://docs.fckeditor.net/fckeditor_2.x/developers_guide
安装
参考文档：
试验环境:
myeclipse6.0+tomcat5.0+mysql5.0
步骤:
1.在myeclipse中新建一个web工程testfckeditor
2.把fckeditor_2.6.3解压后的生成的文件夹fckeditor拷贝到webroot下
3.检测安装是否成功访问
fckeditor - (2)集成
集成javascript步骤
参考文档：
1.将javascript集成模块脚本放入<head>标签中
html代码
<script
type="text/javascript"
src="fckeditor/fckeditor.js"></script>
<script type="text/javascript"
src="fckeditor/fckeditor.js"></script>
2.创建fckeditor
方法一：（内联）
在<body>标签适当位置放入如下代码（通常放在标签中）
html代码
<script>
var ofckeditor = new
fckeditor(‘fckeditor1‘);
ofckeditor.basepath =
"fckeditor/";
ofckeditor.create();
</script>
方法二：（替代<textarea>）
在<head>标签中添加onload方法
window.onload = function()
{
var
ofckeditor = new fckeditor( ‘mytextarea‘ ) ;
ofckeditor.basepath = "fckeditor/"
;
ofckeditor.replacetextarea()
}
</script>
在<body>标签中添加以下代码
<textarea id="mytextarea"
name="mytextarea">
this is
<b>the</b> initial value.
</textarea>
方法三：（动态生成）
在<head>标签中定义
createfckeditor()方法
function createfckeditor()
div = document.getelementbyid("myfckeditordiv");
var fck = new
fckeditor("myfckeditor");
fck.basepath = "fckeditor/" ;
div.innerhtml = fck.createhtml();
</script>
在中div中动态显示fckeditor
<a href="javascript:void(0);"
onclick="createfckeditor();"> 动态创建fckeditor </a>
<div id="myfckeditordiv">
</div>
fckeditor对象属性
属性名 描述 默认值
width 宽度
100%
height 高度
200
value 编辑器初始化内容
空字符串
toolbarset 工具条集合的名称(default，basic，或自定义)
default
bathpath
编辑器的基路径,basepath要正确设置，以“/”结尾 /fckeditor
例如：
js代码
var ofckeditor = new fckeditor( ‘myfckeditor‘ ) ;
ofckeditor.basepath = "fckeditor/" ;
ofckeditor.width="80%";
ofckeditor.height="200";
ofckeditor.value="ok";
ofckeditor.toolbarset="basic";
fckeditor构造器
var
fckeditor=function(instancename,width,height,toolbarset,value) ;
instancename:编辑器输出的textarea元素的name属性或id属性的值，必须指定其他参数会赋给同名属性
例如:
var ofckeditor = new fckeditor( ‘myfckeditor‘
,‘80%‘,‘300‘,‘basic‘,‘ok‘) ;
集成java步骤
1.载入jar包
将
fckeditor-java-demo-2.4.war放入运行中的tomcat安装目录下的webapps文件夹中让其解压，从解压后的
fckeditor-java-demo-2.4\web-inf\lib下拷贝所有的jar文件，加入web工程的classpath中（可以拷贝到
webroot\web-inf\lib文件夹下）
jar文件包括：
fckeditor-java-core-2.4.jar
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
slf4j-api-1.5.2.jar
slf4j-simple-1.5.2.jar
2.在jsp页面中加入tablib指令和fck标签
参看fckeditor-java-core-2.4.jar/meta-inf/fckeditor.tld
xml代码
<short-name>fck</short-name>
<uri>http://java.fckeditor.net</uri>
在jsp页面中加入tablib指令
<%@ taglib uri=""
prefix="fck"%>
在<body>中加入自定义标签
<fck:editor instancename="fck1"
basepath="/fckeditor" value=" "></fck:editor>
注意：basepath以"/"开头代表工程的根路径而非web服务器的根路径，一定要指定value属性，而且值不能为空字符串"",否则会抛nullpointexception。
fckeditor - (3)配置
参看文档：
自定义配置方法
1.直接修改主配置文件fckconfig.js
fck主配置文件：fckeditor/fckconfig.js
2.定义单独的配置文件（只需要写需要修改的配置项）
2.1.创建myfckconfig.js配置自定义属性
将myfckconfig.js放入fckeditor/editor文件夹下，
java代码
//系统是否自动检测并运用适当的语言界面
fckconfig.autodetectlanguage = false
;
//手动设置默认的语言：法语
fckconfig.defaultlanguage = "fr" ;
2.2载入自定义配置文件
方法一：全局载入(对工程中所有fckeditor有效)
在fckconfig.js找到
js代码
fckconfig.customconfigurationspath = ‘‘
;
输入myfckconfig.js位置，fckconfig.basepath值fckeditor/editor文件夹
fckconfig.customconfigurationspath =
fckconfig.basepath+‘myfckconfig.js ‘ ;
方法二：局部载入（只对当前网页有效）
js代码
var ofckeditor = new fckeditor( "fckeditor1" )
ofckeditor.config["customconfigurationspath"]
= "myconfig.js" ;
ofckeditor.create() ;
3.在页面的调用代码中对fckeditor的实例进行配置
js代码
var ofckeditor = new fckeditor( "fckeditor1" )
ofckeditor.config["autodetectlanguage"] =
"fasle" ;
ofckeditor.create() ;
配置加载顺序
1.加载主配置文件fckconfig.js
2.加载自定义的配置文件（如果有），覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项（只对当前实例有效）
主配置文件（fckconfig.js部分属性中文注释）
fckconfig.customconfigurationspath = ‘‘ ; //
自定义配置文件路径和名称
fckconfigfckconfig.editorareacss = fckconfig.basepath
‘css/fck_editorarea.css‘; // 编辑区的样式表文件
fckconfig.editorareastyles = ‘‘ ; //
编辑区的样式表风格
fckconfig.toolbarcombopreviewcss =‘‘;
//工具栏预览css
fckconfig.doctype
= ‘‘ ;//文档类型
fckconfig.basehref = ‘‘; //
相对链接的基地址
fckconfig.fullpage
= false ; //是否允许编辑整个html文件,还是仅允许编辑body间的内容
fckconfig.startupshowblocks = false
;//决定是否启用"显示模块"
fckconfig.debug = false
;//是否开启调试功能
fckconfigfckconfig.skinpath = fckconfig.basepath
‘skins/default/‘ ; //皮肤路径
fckconfig.preloadimages=...
//预装入的图片
fckconfig.pluginspath = fckconfig.basepath ‘plugins/‘ ;
//插件路径
fckconfig.autodetectlanguage = true ;
//是否自动检测语言
fckconfig.defaultlanguage = ‘zh-cn‘ ;
//默认语言
fckconfig.contentlangdirection = ‘ltr‘ ;
//默认的文字方向,可选"ltr/rtl",即从左到右或从右到左
fckconfig.processhtmlentities = true ;
//处理html实体
fckconfig.includelatinentities = true ;
//包括拉丁文
fckconfig.includegreekentities = true
;//包括希腊文
fckconfig.processnumericentities = false
;//处理数字实体
fckconfig.additionalnumericentities = ‘‘ ;
//附加的数字实体
fckconfig.fillemptyblocks = true ;
//是否填充空块
fckconfig.formatsource = true ;
//在切换到代码视图时是否自动格式化代码
fckconfig.formatoutput = true ;
//当输出内容时是否自动格式化代码
fckconfig.formatindentator = ‘ ‘ ;
//当在源码格式下缩进代码使用的字符
fckconfig.startupfocus = false ;
//开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上
fckconfig.forcepasteasplaintext = false ;
//是否强制粘贴为纯文件内容
fckconfig.autodetectpastefromword = true ;
//是否自动探测从word粘贴文件,仅支持ie
fckconfig.showdropdialog = true
;//是否显示下拉菜单
fckconfig.forcesimpleampersand = false
;//是否不把&符号转换为xml实体
fckconfig.tabspaces = 0
;//按下tab键时光标跳格数,默认值为零为不跳格
fckconfig.showborders = true
;//合并边框
fckconfig.sourcepopup = false
;//弹出
fckconfig.toolbarstartexpanded = true
;//启动fckeditor工具栏默认是否展开
fckconfig.toolbarcancollapse = true
;//是否允许折叠或展开工具栏
fckconfig.ignoreemptyparagraphvalue = true
;//是否忽略空的段落值
fckconfig.floatingpanelszindex = 10000
;//浮动面板索引
fckconfig.htmlencodeoutput = false
;//是否将html编码输出
fckconfig.templatereplaceall = true
;//是否替换所有模板
fckconfig.toolbarlocation = ‘in‘
;//工具栏位置,
fckconfig.toolbarsets = object ; //
编辑器的工具栏，可以自行定义，删减，可参考已存在工具栏
fckconfig.entermode = ‘p‘; // 编辑器中直接回车，在代码中生成，可选为p | div |
br
fckconfig.shiftentermode
= ‘br‘; // 编辑器中shift 回车，在代码中生成，可选为p | div |
fckconfig.contextmenu =
字符串数组; // 右键菜单的内容
fckconfig.fontcolors = "";
// 文字颜色列表
fckconfig.fontnames = ""; //
字体列表
fckconfig.fontsizes =
""; // 字号列表
fckconfig.fontformats = ""; // 文字格式列表
fckconfig.stylesxmlpath = ""; //
css样式列表的xml文件的位置
fckconfig.templatesxmlpath = ""; //
模版的xml文件位置
fckconfig.spellchecker = "iespell/spellerpages"; //
拼写检查器
fckconfig.iespelldownloadurl = ""; //
下载拼写检查器的网址
fckconfig.fullpage = true/false; //
是否允许编辑整个html文件，还是仅允许编辑body间的内容
var _filebrowserlanguage = ‘php‘ ; // asp | aspx | cfm | lasso |
perl | php | py
var _quickuploadlanguage = ‘php‘ ;// asp | aspx | cfm | lasso |
php[/code]
//第一个是文件浏览器使用的语言，第二个快速上传使用的语言，改成你需要的
fckconfig.linkuploadallowedextensions = "" ; // empty for
all
fckconfig.linkuploaddeniedextensions
=".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"
//这是两个允许和拒绝上传的文件类型列表
fckconfig.imagebrowser = false
;//是否在插入图片功能里面启用服务器文件浏览功能
fckconfigfckconfig.imagebrowserurl = fckconfig.basepath
‘filemanager/browser/default/browser.html?type=imageconnector=connectors/‘
_filebrowserlanguage ‘/connector.‘ _filebrowserextension
;
//type=image
表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面
fckconfig.flashbrowser = false
;//是否在插入flash功能中启用服务器文件浏览功能
fckconfig.linkupload = false
;//是否启用插入链接的快速上传功能
fckconfig.imageupload = false
;//是否启用图片快速上传功能
fckconfig.flashupload = false ;//是否启用flash上传功能
fckconfigfckconfig.smileypath = fckconfig.basepath
‘images/smiley/msn/‘; // 表情文件存放路径
fckconfig.smileyimages = ‘‘; //
表情文件名称列表，具体参考默认设置
fckconfig.smileycolumns = 8; //
表情窗口显示表情列数
fckconfig.smileywindowwidth = 320; //
表情窗口显示宽度，此窗口会因为表情文件的改变而作调整
fckconfig.smileywindowheight = 240; //
表情窗口显示高度，此窗口会因为表情文件的改变而作调整
常用自定义配置样例
修改语言
fckconfig.autodetectlanguage = false ;
fckconfig.defaultlanguage = ‘zh-cn‘ ;
添加中文字体
fckconfig.fontnames =
‘宋体;黑体;隶书;楷体_gb2312;arial;comic sans ms;courier new;tahoma;times new
roman;verdana‘ ;
更换换行模式
fckconfig.entermode = ‘br‘
; // p | div | br
fckconfig.shiftentermode = ‘p‘ ; // p | div | br
自定义表情
fckconfig.smileypath = fckconfig.basepath + ‘images/ftl/‘
fckconfig.smileyimages
=[‘01.gif‘,‘02.gif‘,‘03.gif‘,‘04.gif‘,‘05.gif‘,‘06.gif‘,‘07.gif‘,‘08.gif‘,‘09.gif‘,‘10.gif‘,‘11.gif‘,‘12.gif‘,‘13.gif‘,‘14.gif‘,‘15.gif‘,‘16.gif‘,‘17.gif‘,‘18.gif‘,‘19.gif‘,‘20.gif‘,‘21.gif‘]
fckconfig.smileycolumns = 8 ;
fckconfig.smileywindowwidth = 480 ;
fckconfig.smileywindowheight = 180 ;
如果表情图片太多，可以设置滚动条
1.在fckeditor/editor/dialog/fck_smiley.html
中找到
window.onload = function ()
{
oeditor.fcklanguagemanager.translatepage(document)
dialog.setautosize( true )
}
将dialog.setautosize(
true ) 改为dialog.setautosize(
false)
2.再找到
html代码
<body style="overflow: hidden">
<body>
将
hidden改为auto
更换皮肤
js代码
fckconfig.skinpath = fckconfig.basepath +
‘skins/office2003/‘ ;
fckeditor默认提供三种皮肤，如果想得到更多皮肤请访问:
自定义工具集
fckeditor提供两种工具集default/basic,也可以自己定义
fckconfig.toolbarsets["mytoolbar"] = [
[‘source‘,‘-‘,‘fitwindow‘,‘-‘,‘preview‘],
[‘undo‘,‘redo‘],
[‘link‘,‘unlink‘,‘anchor‘],
[‘image‘,‘flash‘,‘table‘,‘rule‘,‘smiley‘,‘specialchar‘],
[‘justifyleft‘,‘justifycenter‘,‘justifyright‘],
[‘about‘],
‘/‘,
[‘bold‘,‘italic‘,‘underline‘],
[‘orderedlist‘,‘unorderedlist‘,‘-‘,‘outdent‘,‘indent‘,‘blockquote‘],
[‘fontname‘,‘fontsize‘],
[‘textcolor‘,‘bgcolor‘]
] ;
在页面调用,要显示设置fckeditor对象的toolbarset属性
java代码
var ofckeditor = new fckeditor( ‘mytextarea‘ )
ofckeditor.basepath = "fckeditor/"
ofckeditor.config["customconfigurationspath"]
=‘myfckconfig.js ‘ ;
ofckeditor.toolbarset="mytoolbar";
ofckeditor.create();
(4)文件上传
fckeditor默认不支持文件上传，需要下载web服务器端程序（fckeditor.java），并进行配置
1.在web.xml中加入connectorservlet的配置信息
xml代码
<servlet>
<servlet-name>connector</servlet-name>
<servlet-class>
net.fckeditor.connector.connectorservlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
2.在classpath路径上创建fckeditor.properties(在src文件夹下创建)
connector.useractionimpl=net.fckeditor.requestcycle.impl.useractionimpl
乱码问题
由于fckeditor未考虑中文乱码问题，所以需要对connectorservlet做修改
解决fckeditor创建文件夹中文乱码问题
在connectorservlet的doget方法中找到string
newfolderstr =
utilsfile.sanitizefoldername(newfoldername);这行代码，在其上添加如下2行代码。
java代码
//newfoldername为新创建的文件夹名称，先用iso-8859-1编码将字符串还原成字节数组，在用utf-8重新编码
string newfoldername =
request.getparameter("newfoldername");
newfoldername = new
string(newfoldername.getbytes("iso-8859-1"), "utf-8");
string
newfolderstr = utilsfile.sanitizefoldername(newfoldername);
解决上传文件名为中文文件时出现乱码
fckeditor
在java平台采用的是commons-upload组件进行文件上传，只要修改servletfileupload的headerencoding属性
为utf-8就能解决上传文件名是中文时所出现的乱码问题。在connectorservlet的dopost方法中找到servletfileupload
upload = new servletfileupload(factory);在其后加入下面代码
fileitemfactory factory
= new diskfileitemfactory();
servletfileupload upload = new
servletfileupload(factory);
//解决上传文件名为中文名时出现乱码
upload.setheaderencoding("utf-8");
中文图片不能引用
修改server.xml
端口为8080的connector，添加属性uriencoding="utf-8"
<connector port="8080" maxhttpheadersize="8192"
maxthreads="150" minsparethreads="25" maxsparethreads="75"
enablelookups="false" redirectport="8443" acceptcount="100"
connectiontimeout="20000" disableuploadtimeout="true" uriencoding="utf-8"
/>
解决上传文件名重名问题
上传文件名用uuid随机生成的32位字符串代替，防止文件名重复
string filename =
filenameutils.getname(rawname);
string
basename = filenameutils.removeextension(filename);
string extension =
filenameutils.getextension(filename);
//上传文件名用uuid随机生成的32位字符串代替，防止文件名重复
filename=uuid.randomuuid().tostring().replace("-",
"")+"."+extension;
控制允许上传文件的文件类型
fckeditor把上传的文件分为四种：file，image，flash，media
fckeditor会对上传文件的类型进行两次验证（前台javascript验证和后台java验证）所以需要对myconfig.js和fckeditor.propertise进行配置
例如：限制上传图片格式为gif和png
在myconfig.js增加下面配置（可参看fckconfig.js的具体配置选项）
fckconfig.imageuploadallowedextensions = ".(gif|png)$"
在fckeditor.propertise进行配置（可参看）
connector.resourcetype.image.extensions.allowed=gif|png
控制允许上传文件的文件大小
1.
在服务端的servlet中，在保存文件之前先判断一下文件大小，如果超出限制，就传递一个自定义的错误码，并且不再保存文件,在
connectorservlet的dopost方法中找到if (!extensionshandler.isallowed(resourcetype,
extension))
在后面添加else
if语句块
//如果文件的扩展名不允许上传
if (!extensionshandler.isallowed(resourcetype,
extension))
ur = new
uploadresponse(uploadresponse.sc_invalid_extension);
//如果文件大小超出限制10k
else if(uplfile.getsize()>10*1024){
//传递一个自定义的错误码
uploadresponse(204);
}
//如果不存在以上错误，则保存文件
else {
...
}
2.修改对应的页面中的回调函数，增加对这个自定义的错误码的处理
找
到fckeditor/editor/filemanager/browser/default/frmupload.html和fckeditor
/editor/dialog/fck_image/fck_image.js中的onuploadcompleted方法，
在switch
语句块中添加如下代码
case 204 :
alert( ‘文件太大‘ ) ;
break ;
![Java小案例——随机数猜测随机数猜测[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)