一、相信很多人都用过大名鼎鼎的FckEditor, 最新又出来了个ckEditor, 令人一下子搞不清楚, 到官方网站看看才知道FckEditor在2.6版本之后就改名为ckEditor了, 在这里特别说明一下, 以免混淆,因为网上搜出来的大多都是FckEditor相关配置的文章。
二、FckEditor里有java版本的配置,相信有些同行用过,支持php、asp.net、java版本,现在一下子变为ckEditor了。配置简单的编辑器很简单,这里不多说了,我想大多数人都希望能用到编辑器里的浏览/插入图片功能吧, 毕竟一条新闻没个图片说不过去。 当然我们自己做个上传功能,然后复制URL地址插入到URL里也是可以的。 但是这样客户操作难度太高了。
三、这里介绍一下解决办法,看到有个哥们的文章说ckEditor理把自带的上传功能去掉了, 需要修改config.js文件里的几个属性
config.filebrowserBrowseUrl = '/js/ckfinder/ckfinder.htm';
config.filebrowserImageBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Images';
config.filebrowserFlashBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Flash';
config.filebrowserUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
需要自己写这个上传附件和浏览服务器文件的方法, 这哥们还真的自己写了, 遗憾的是只给出部分代码。 自己写上传文件和浏览文件夹虽然说不是什么难事, 但难免有些繁琐费时。
四、于是自己抱有一点侥幸和偷懒的心理再google了几下, 发现一个关键字很频繁出现: cdeditor+ckfinder 后面老跟着asp.net php 之类的。于是就不服气滴想,难道就没有支持java的吗? ckfinder不是专门为asp.net量身定做的吧? 于是又仔细看了看cdeditor的官方网站, 然后点击了一下ckfinder链接, 发现ckfinder已经出了多个语言版本(php、asp.net等) 支持java是在2.0.2版本之后才出的, 这也就难怪关于cdeditor3.6.5+ckfinder2.0.2+jsp的配置介绍文章很少了,
这里方便大家下载我给个地址:
http://ckfinder.com/download 注意2.0.2版本以及以上的才支持java (收费的)
先上个效果图再贴代码!
点击插入图片图标
浏览/上传图片窗口
整合步骤:(注意红色字体部分是前后相呼应的)
1 下载的ckeditor-java-3.6.2.rar和ckfinder_java_2.0.2.zip解压,jsp头部引入两个头文件
<script type="text/javascript" src="${base}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base}/js/ckfinder/ckfinder.js"></script>
2 在web.xml里添加, 注意ckfinder版本是2.0.2 如果超过这版本,servlet的类名不一样小心!
<!-- ckeditor和ckfinder整合上传图片 开始 --> <servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class> <init-param> <param-name>XMLConfig</param-name> <param-value>/WEB-INF/ckfinder-config.xml</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern> /js/ckfinder/core/connector/java/connector.java </url-pattern> </servlet-mapping> <!-- ckeditor和ckfinder整合上传图片 结束 -->
3 在建立文件WEB-INF/ckfinder-config.xml 内容如下( 红色的upload/ckfinder/代表工程里的路径,可以对照eclipse截图
目录结构
4 修改/js/ckeditor/config.js里的内容如下:
CKEDITOR.editorConfig = function( config ){ config.pasteFromWordIgnoreFontFace = true; config.language='zh-cn'; config.uiColor='#AADC6E'; config.enterMode=CKEDITOR.ENTER_DIV; config.shiftEnterMode=CKEDITOR.BR; config.skin='office2003'; config.extraPlugins='autogrow'; config.resize_maxHeight = 1000; config.resize_maxWidth = 960;//改变大小的最大宽度 config.resize_minHeight = 250; //改变大小的最小高度 config.resize_minWidth = 750;//改变大小的最小宽度 config.toolbar = [ '/', ['Preview','Cut','Copy','Paste','PasteFromWord','Print','Undo','Redo','Find','RemoveFormat ','Bold','Italic','Underline','Strike','-','NumberedList','BulletedList'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','Image','Table','HorizontalRule','Smiley'], ['Styles','Format','Font','FontSize'], ]; config.filebrowserBrowseUrl='/js/ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl='/js/ckfinder/ckfinder.html?type=Images'; config.filebrowserFlashBrowseUrl='/js/ckfinder/ckfinder.html?type=Flash'; config.filebrowserUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash'; config.filebrowserWindowWidth='1000'; config.filebrowserWindowHeight='700'; };5 复制这几个jar包到WEB-INF/lib (前面贴出的那两个压缩文件解压之后有的
CKFinder-2.0.2.jar
CKFinderPlugin-FileEditor-2.0.2.jar
CKFinderPlugin-ImageResize-2.0.2.jar
Thumbnailator-0.3.3.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
6 在jsp页面写代码:
<script type="text/javascript" src="${base}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base}/js/ckfinder/ckfinder.js"></script>
<textarea id="content" name="content"></textarea>
<script type="text/javascript">
CKEDITOR.replace('content',{height:350});//设置编辑器高度
</script>
到此就大功告成啦, 运行截图就是上面那3张! 详细的配置属性请网上参考资料,都在ckfinder-config.xml里,可以控制上传的文件类型、大小、能否删除、能否创建子文件夹等。