admin 管理员组文章数量: 1086019
2024年4月17日发(作者：小程序制作拼图)
ＦＣ Ｋｅｄ ｉｔｏｒ编辑器在Ｊａｖａ中的应用
■中国人民银行上饶市中心支行朱勇士
在Ｊａｖａ的Ｗｅｂ应用开发中，大量文本输入往往因缺
乏像ＭＳ ｗｏｒｄ一样的版面编辑功能，页面输出显得不够
漂亮。最近几年虽然出现多款支持Ｊａｖａ的在线编辑器，
但也是良莠不齐。为此，笔者对ＦＣＫｅｄｉｔｏｒ；｝￣线编辑器在
Ｊａｖａ中的应用稍作介绍。
一
．
ＦＣＫｅｄｉｔｏｒ简介
ＦＣＫｅｄｉｔｏｒ是ｓｏｕｒｃｅｆｏｒｇｅ．Ｈｅ止一个轻量级的开源
项目，主要是实现网页所见即所得的在线编辑器，可
以让Ｗｅｂ程序拥有如Ｍｓ Ｗｏｒｄ这样强大的编辑功能。
ＦＣＫｅｄｉｔｏｒ＞￣仅在服务器端支持￣ＩＪａｖａ等多种语言，在客
户端支持多种主流浏览器，而且在性能上较其他网页编
辑器更为完美，可以说是集易用性与强大功能于一体。
二．ＦＣＫｅｄｉｔｏｒ应用部署
在应用中需要的ＦＣＫｅｄｉｔｏｒ插件，可以在官方网站
（ｈｔｔｐ：／／ｗｗｗ．ｆｃｋｅｄｉｔｏｒ．ｎｅｔ／）上下载，主要有两个压缩包：
ＦＣＫｅｄｉｔｏｒ
＿
２．６３．ｚｉｐ和ｆｃｋｅｄｉｔｏｒ－ｊａｖａ一２．４．ｚｉｐ。下载后，将
ＦＣＫｅｄｉｔｏｒ
一
２．６．３。ｚｉｐ解压，把ｆｃｋｅｄｉｔｏｒ３￣２件夹复制到我们
自建项目的／ＷｅｂＲｏｏｔ厂Ｆ。将ｆｃｋｅｄｉｔｏｒ－ｊａｖａ一２．４．ｚｉｐ解压
缩，将其中的ｆｃｋｅｄｉｔｏｒ—ｊａｖａ—ｃｏｒｅ一２．４．ｊａｒ１）．￣）．１ｉｂ目录下
的ｃｏｍｍｏｎｓ－ｆｉｌｅｕｐｌｏａｄ一１．２．１．ｊａｒ，ｃｏｍｍｏｎｓ—ｉｏ一１．３．２．ｊａｒ和
ｓｌｆ４ｉ—ａｐｉ一１．５．２ －．ｊａｒ三个类包复制到自建项目的／ＷｅｂＲｏｏｔ／
ＷＥＢ—ＩＮＦ／ｌｉｂ／￣ｏ
另外，还需要在官网中下载ｆｃｋｅｄｉｔｏｒ—ｉａｖａ—
ｄｅｍｏ一２．４．ｗａｒ文件。将其发布在ｔｏｍｃａｔ中，然后把
ｗｅｂａｐｐｓ＼ｆｃｋｅｄｉｔ０ｒ—ｊａｖａ—ｄｅｍｏ一２．４＼ＷＥＢ—ＩＮＦ＼ｌｉｂ中的
ｓｌｆ４ｊ—ｓｉｍｐｌｅ一１．５．２．ｊａｒ类包复制到自建项目的／ＷｅｂＲｏｏｔ／
ＷＥＢ—ＩＮＦ／ｌｉｂ厂Ｆ。
至此，ＦＣＫｅｄｉｔｏｒ应用配置基本完成。如果需要
实现文件上传功能，首先，要在自建项目的／ＷｅｂＲｏｏｔ／
ＷＥＢ—ＩＮＦ厂Ｆ的ｗｅｂ．ｘｍｌ文件中加入如下配置：
６４ Ｉ ２０１ １年・第１０期投稿邮箱ｈｎｆｃ＠２ｌｃｎ．ｎｅｔ
．
＜ｓｅｒｖｌｅｔ＞
＜ｓｅｒｖｌｅｔ —ｎａｍｅ＞Ｃｏｎｎｅｃｔｏｒ＜／ｓｅｒｖｌｅｔ——ｎａｍｅ＞
＜ｓｅｒｖｌｅｔ－ｃｌａｓｓ＞
ｎｅｔ．ｆｃｋｅｄｉｔｏｒ．ｃｏｎｎｅｃｔｏ Ｃ０ｎｎｅｃｔｏｒＳｅｒｖ１ｅｔ
＜／ｓｅｒｖ１ｅｔ—ｃｌａｓｓ＞
＜ｌｏａｄ—ｏｎ—ｓｔａｒｔｕｐ＞１＜／ｌ０ａｄ一０ｎ—ｓｔａｒｔｕｐ＞
＜／ｓｅｒｖｌｅｔ＞
＜ｓｅｒｖｌｅｔ－ｍａｐｐｉｎｇ＞
＜ｓｅｒｖｌｅｔ—ｎａｍｅ＞Ｃｏｎｎｅｃｔｏｒ＜／ｓｅｒｖｌｅｔ－ｎａｍｅ＞
＜ｕｒｌ—ｐａｔｔｅｒｎ＞
／ｆｃｋｅｄｉｔｏｒ／ｅｄｉｔｏｒ／ｆｉｌｅｍａｎａｇｅｒ／ｃｏｎｎｅｃｔｏｒｓ／
＜／ｕｒｌ－ｐａｔｔｅｒｎ＞
＜／ｓｅｒｖｌｅｔ—ｍａｐｐｉｎｇ＞
其次，在自建项目的ｓｒｃ目录中创建ｆｃｋｅｄｉｔｏｒ
ｐｒｏｐｅｒｔｉｅｓ，内容为：
ｃｏｎｎｅｃｔｏｒ．ｕｓｅｒＡｃｔｉｏｎＩｍｐｌ＝ｎｅｔ．ｆｃｋｅｄｉｔｏｒ．ｒｅｑｕｅｓｔｃｙｃｌｅ
ｉｍｐ１．ＵｓｅｒＡｃｔｉｏｎＩｍｐｌ。
三、ＦＣＫｅｄｉ ｔｏｒ的应用
完成以上配置以后，就可以在项目中使用ＦＣＫｅｄｉｔｏｒ
编辑器。
（一）调用ＦＣＫｅｄｉｔｏｒ
调用ＦＣＫｅｄｉｔｏｒ的方式主要有三种。
１．内联方式（建议使用）
首先，在页面的Ｈｅａｄ段中放）＇，Ｓｃｒｉｐｔ标志以引入
ＪａｖａＳｃｒｉｐｔ整合模块：
＜ｓｃｒｉｐｔ ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”ｓｒｃ：”／ｆｃｋｅｄｉｔｏｒ／
ｆｃｋｅｄｉｔｏｒ．ｊｓ”＞＜／ｓｃｒｉｐｔ＞
然后，在页面的Ｆｏｒｍ标志内需要插入编辑器的地
方置人以下代码：
￣ｓｃｒｉｐｔ ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ’ ＞
ｖａｒ ｏＦＣＫｅｄｉｔｏｒ＝ｎｅｗ ＦＣＫｅｄｉｔｏｒ（”ＦＣＫｅｄｉｔｏｒｌ”、：
ｏＦＣＫｅｄｉｔｏｒ．ＢａｓｅＰａｔｈ：”ｆｃｋｅｄｉｔｏｒ／”：
ｏＦＣＫｅｄｉｔｏｒ．Ｗｉｄｔｈ＝”５０％”：
ｏＦＣＫｅｄｉｔｏｒ．Ｈｅｉｇｈｔ＝”４００”：
ｏＦＣＫｅｄｉｔｏｒ．Ｖａｌｕｅ＝”ｉｎｉｔｉａｌ ｖａｌｕｅ”：
／／ｏＦＣＫｅｄｉｔｏｒ．ＴｏｏｌｂａｒＳｅｔ＝’’Ｂａｓｉｃ”：
／／默认是ｄｅｆａｕｌｔ
ｏＦＣＫｅｄｉｔｏｒ．ＴｏｏｌｂａｒＳｅｔ＝”Ｄｅｆａｕｌｔ”：
ｏＦＣＫｅｄｉｔｏｒ．Ｃｒｅａｔｅ（）；
＜／ｓｃｒｉｐｔ＞
２．ＴｅｘｔＡｒｅａ标记替换法（不建议使用）
＜ｈｅａｄ＞
＜ｓｃｒｉｐｔ ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”ｓｒｃ＝”ｆｃｋｅｄｉｔｏｒ／
ｆｃｋｅｄｉｔｏｒ．ｊｓ”＞＞／ｓｃｒｉｐｔ＞
＜ｓｃｒｉｐｔ ｔｙｐｅ＝”ｔｅｘｔ￣ａｖａｓｃｒｉｐｔ”＞
ｗｉｎｄｏｗ．ｏｎｌｏａｄ＝ｆｕｎｃｔｉｏｎ０｛
ｖａｒ ｏＦＣＫｅｄｉｔｏｒ＝ｎｅｗ ＦＣＫｅｄｉｔｏｒ（”ＭｙＴｅｘｔａｒｅａ”１：
ｏＦＣＫｅｄｉｔｏｒ．ＢａｓｅＰａｔｈ＝”ｆｃｋｅｄｉｔｏｒ／”：
ｏＦＣＫｅｄｉｔｏｒ．ＲｅｐｌａｃｅＴｅｘｔａｒｅａ０；
｝
＜／ｓｃｒｉｐｔ＞
＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
＜ｔ ｅ ｘ ｔ ａ ｒ ｅ ａ ｒ ｏ ｗ ｓ＝”４” Ｃ Ｏ ｌ Ｓ＝”６ ０”
ｎａｍｅ＝”ＭｙＴｅｘｔａｒｅａ”＞ｔｈｉｓ ｉｓ ａ ｖａｌｕｅ＜／ｔｅｘｔａｒｅａ＞
＜／ｂｏｄｙ＞
３．ＦＣＫｅｄｉｔｏｒ ｌ￣定义标签
使用标签，就必须使用到前面配置在／ＷｅｂＲｏｏｔ／
ＷＥＢ—ＩＮＦ／ｌｉｂｆＦ的ｊａｖａ类包，而且必须在调用ＦＣＫｅｄｉｔｏｒ
的页面中加头文件：
＜％＠ｔａｇｌｉｂ ｕｒｉ＝”ｈｔｔｐ：１１ｊａｖａ．ｆｃｋｅｄｉｔｏｒ．ｎｅｔ”
ｐｒｅｆｉｘ＝”ＦＣＫ”％＞
具体实现代码如下：
＜％＠ｐａｇｅ ｌａｎｇｕａｇｅ＝”ｊａｖａ”ｉｍｐｏｒｔ＝”ｊａｖａ．ｕｔｉｌ． ”
ｐａｇｅＥｎｅｏｄｉｎｇ＝”ｕｔｆ－８”％＞
＜％＠ｔａｇｌｉｂ ｕｒｉ＝”ｈｔｔｐ：／／ｊａｖａ．ｆｃｋｅｄｉｔｏｒ．ｎｅｔ”
ｐｒｅｆｉｘ＝”ＦＣＫ”％＞
＜ｈｔｍｌ＞
＜ｂｏｄｙ＞
＜ＦＣＫ：ｅｄｉｔｏｒ ｉｎｓｔａｎｃｅＮａｍｅ＝”ｍｙＥｄｉｔｏｒ”ｂａｓｅＰａｔｈ＝”
软件服务・实务
栏目编辑梁丽雯Ｅ—ｍａｉｋｌｉｖｅｎ ０１＠１６３ ｃｏｍ
ｆｃｋｅｄｉｔｏｒ”ｗｉｄｔｈ＝”７００”ｈｅｉｇｈｔ＝”５００”ｖａｌｕｅ＝” ”＞＜／
ＦＣＫ：ｅｄｉｔｏｒ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
说明：ｖａｌｕｅ值不能为空字符串。
（二）修改配置文件
通过以上三种方式调用即可使用ＦＣＫｅｄｉｔｏｒ编辑
器。但是，仍然有很多设置需要修改。实现这些设置
的修改，可以通过直接修改主配置文件ｆｃｋｃｏｎｆｉｇ．ｊｓ或者
自定义单独的配置文件，或者在页面的调用代码中对
ＦＣＫｅｄｉｔｏｒ的实例进行设置。笔者推荐使用白定义单独
的配置文件来实现设置项的修改。下面以该方式简单介
绍一般需要修改的设置。
先创建一个配置文件ｍｙｃｏｎｆｉｇ．ｊｓ，把需要修改的项
添加到该文件中，同时，将ｆｃｋｃｏｎｆｉｇ．ｊｓ中设置白定义配
置文件ｍｙｃｏｎｆｉｇ．ｊｓ：
ＦＣＫＣｏｎｆｉｇ．ＣｕｓｔｏｍＣｏｎｆｉｇｕｒａｔｉｏｎｓＰａｔｈ＝ＦＣＫＣｏｎｆｉｇ．
ＥｄｉｔｏｒＰａｔｈ＋”ｍｙｅｏｎｆｉｇ．ｊｓ”
然后就可以进行下面的设置。
１．修改默认语言设置
ＦＣＫＣｏｎｆｉｇ．ＡｕｔｏＤｅｔｅｃｔＬａｎｇｕａｇｅ＝ｆａｌｓｅ：
ＦＣＫＣｏｎｆｉｇ．ＤｅｆａｕｌｔＬａｎｇｕａｇｅ＝’ｚｈ—ｃｎ’：
２．添加中文字体列表
ＦＣＫＣｏｎｆｉｇ．ＦｏｎｔＮａｍｅｓ＝’宋体；黑体；隶书；楷体一
ＧＢ２３１２；Ａｒｉａｌ；Ｃｏｍｉｃ Ｓａｎｓ ＭＳ；Ｃｏｕｒｉｅｒ Ｎｅｗ；Ｔａｈｏｍａ；Ｔｉｍｅｓ
Ｎｅｗ Ｒｏｍａｎ；Ｖｅｒｄａｎａ ；
３．修改“回车”和“Ｓｈｉｔｆ＋回车”的换行行为
ＦＣＫＣｏｎｆｉｇ．ＥｎｔｅｒＭｏｄｅ＝’ｂｒ。：
ＦＣＫＣｏｎｆｉｇ．ＳｈｉｆｔＥｎｔｅｒＭｏｄｅ＝’Ｐ’：
４．白定义ＴｏｏｌｂａｒＳｅｔ
在ｉｎ Ｙ ｃ ｏ １１ ｆ ｉ ｇ．ｊ ｓ中添力ⅡＦ Ｃ Ｋ Ｃ ０ ｎ ｆ ｉ ｇ．
ＴｏｏｌｂａｒＳｅｔｓ［”ｍｙｔｏｏｌｂａｒ”］＝［］；其中：【］的内容参照Ｄｅｆａｕｌｔ
修改。
四、总结
ＦＣＫｅｄｉｔｏｒ编辑器功能强大，笔者在这里只是简单
地介绍了它的应用和一般设置，其他具体的使用就不
一一
举例，可以参考其帮助文档。总而言之，ＦＣＫｅｄｉｔｏｒ
编辑器是一款非常适￣Ｊａｖａ的Ｗｅｂ应用的在线编辑器，
其功能完善，能很好地满足用户的需求。匝盈
２０１１年・第１Ｏ期投稿邮箱ｈｎｆｃ＠２ｌｃｎ．ｎｅｔ ｌ ６５
版权声明：本文标题：FCKeditor编辑器在Java中的应用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1713292657a627946.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论