cdeditor3.6.5+ckfinder2.0.2+jsp编辑器配置 支持服务器浏览/上传图片、Flash
2011-10-09 01:18
489 查看
cdeditor3.6.5+ckfinder2.0.2+jsp编辑器配置 支持服务器浏览/上传图片、Flash
分类：Web开发 2011-10-09 01:18
359人阅读 评论(0)
收藏
举报
一、相信很多人都用过大名鼎鼎的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://ckeditor.com/download
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的类名不一样小心！
view plaincopy to clipboardprint?
<span style="font-size:16px;"> <!-- ckeditor和ckfinder整合上传图片 开始 -->
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class><span style="color:#ff0000;">com.ckfinder.connector.ConnectorServlet</span<
4000
/span>></servlet-class>
<init-param>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/<span style="color:#ff0000;">ckfinder-config.xml</span></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>
<span style="color:#ff0000;">/js/ckfinder/core/connector/java/connector.java</span>
</url-pattern>
</servlet-mapping>
<!-- ckeditor和ckfinder整合上传图片 结束 --></span>
view plaincopy to clipboardprint? <span style="font-size:18px;"><config> <enabled>true</enabled> <baseDir></baseDir> <baseURL><span style="color:#ff0000;"></span><span style="color:#ff0000;">upload/ckfinder/</span></baseURL> <licenseKey></licenseKey> <licenseName></licenseName> <imgWidth>1600</imgWidth> <imgHeight>1200</imgHeight> <imgQuality>80</imgQuality> <uriEncoding>UTF-8</uriEncoding> <forceASCII>false</forceASCII> <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar> <checkDoubleExtension>true</checkDoubleExtension> <checkSizeAfterScaling>true</checkSizeAfterScaling> <secureImageUploads>true</secureImageUploads> <htmlExtensions>html,htm,xml,js</htmlExtensions> <hideFolders> <folder>.svn</folder> <folder>CVS</folder> </hideFolders> <hideFiles> <file>.*</file> </hideFiles> <defaultResourceTypes></defaultResourceTypes> <types> <type name="Files"> <url>%BASE_URL%files/</url> <directory>%BASE_DIR%files</directory> <maxSize>10m</maxSize> <allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip </allowedExtensions> <deniedExtensions></deniedExtensions> </type> <type name="Images"> <url>%BASE_URL%images/</url> <directory>%BASE_DIR%images</directory> <maxSize>2m</maxSize> f5f6 <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions> <deniedExtensions></deniedExtensions> </type> <type name="Flash"> <url>%BASE_URL%flash/</url> <directory>%BASE_DIR%flash</directory> <maxSize>20m</maxSize> <allowedExtensions>swf,flv</allowedExtensions> <deniedExtensions></deniedExtensions> </type> </types> <accessControls> <accessControl> <role>*</role> <resourceType>*</resourceType> <folder>/</folder> <folderView>true</folderView> <folderCreate>true</folderCreate> <folderRename>false</folderRename> <folderDelete>false</folderDelete> <fileView>true</fileView> <fileUpload>true</fileUpload> <fileRename>false</fileRename> <fileDelete>false</fileDelete> </accessControl> </accessControls> <thumbs> <enabled>true</enabled> <url>%BASE_URL%_thumbs/</url> <directory>%BASE_DIR%_thumbs</directory> <directAccess>false</directAccess> <maxHeight>100</maxHeight> <maxWidth>100</maxWidth> <quality>80</quality> </thumbs> <plugins> <plugin> <name>imageresize</name> <class>com.ckfinder.connector.plugins.ImageResize</class> <params> <param name="smallThumb" value="90x90"></param> <param name="mediumThumb" value="120x120"></param> <param name="largeThumb" value="180x180"></param> </params> </plugin> <plugin> <name>fileeditor</name> <class>com.ckfinder.connector.plugins.FileEditor</class> <params></params> </plugin> </plugins> <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl> </config></span> <span style="font-size:18px;"><config> <enabled>true</enabled> <baseDir></baseDir> <baseURL><span style="color:#ff0000;"></span><span style="color:#ff0000;">upload/ckfinder/</span></baseURL> <licenseKey></licenseKey> <licenseName></licenseName> <imgWidth>1600</imgWidth> <imgHeight>1200</imgHeight> <imgQuality>80</imgQuality> <uriEncoding>UTF-8</uriEncoding> <forceASCII>false</forceASCII> <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar> <checkDoubleExtension>true</checkDoubleExtension> <checkSizeAfterScaling>true</checkSizeAfterScaling> <secureImageUploads>true</secureImageUploads> <htmlExtensions>html,htm,xml,js</htmlExtensions> <hideFolders> <folder>.svn</folder> <folder>CVS</folder> </hideFolders> <hideFiles> <file>.*</file> </hideFiles> <defaultResourceTypes></defaultResourceTypes> <types> <type name="Files"> <url>%BASE_URL%files/</url> <directory>%BASE_DIR%files</directory> <maxSize>10m</maxSize> <allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip </allowedExtensions> <deniedExtensions></deniedExtensions> </type> <type name="Images"> <url>%BASE_URL%images/</url> <directory>%BASE_DIR%images</directory> <maxSize>2m</maxSize> <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions> <deniedExtensions></deniedExtensions> </type> <type name="Flash"> <url>%BASE_URL%flash/</url> <directory>%BASE_DIR%flash</directory> <maxSize>20m</maxSize> <allowedExtensions>swf,flv</allowedExtensions> <deniedExtensions></deniedExtensions> </type> </types> <accessControls> <accessControl> <role>*</role> <resourceType>*</resourceType> <folder>/</folder> <folderView>true</folderView> <folderCreate>true</folderCreate> <folderRename>false</folderRename> <folderDelete>false</folderDelete> <fileView>true</fileView> <fileUpload>true</fileUpload> <fileRename>false</fileRename> <fileDelete>false</fileDelete> </accessControl> </accessControls> <thumbs> <enabled>true</enabled> <url>%BASE_URL%_thumbs/</url> <directory>%BASE_DIR%_thumbs</directory> <directAccess>false</directAccess> <maxHeight>100</maxHeight> <maxWidth>100</maxWidth> <quality>80</quality> </thumbs> <plugins> <plugin> <name>imageresize</name> <class>com.ckfinder.connector.plugins.ImageResize</class> <params> <param name="smallThumb" value="90x90"></param> <param name="mediumThumb" value="120x120"></param> <param name="largeThumb" value="180x180"></param> </params> </plugin> <plugin> <name>fileeditor</name> <class>com.ckfinder.connector.plugins.FileEditor</class> <params></params> </plugin> </plugins> <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl> </config></span>
目录结构
4 修改/js/ckeditor/config.js里的内容如下：
view plaincopy to clipboardprint?
<span style="font-size:18px;">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=<span style="color:#ff0000;">'/js/ckfinder/ckfinder.html?type=Images'</span>;
config.filebrowserFlashBrowseUrl='/js/ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl='/<span style="color:#ff0000;">js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'</span>;
config.filebrowserFlashUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth='1000';
config.filebrowserWindowHeight='700';
};</span>
<span style="font-size:18px;">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=<span style="color:#ff0000;">'/js/ckfinder/ckfinder.html?type=Images'</span>;
config.filebrowserFlashBrowseUrl='/js/ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl='/<span style="color:#ff0000;">js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'</span>;
config.filebrowserFlashUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth='1000';
config.filebrowserWindowHeight='700';
};</span>
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里，可以控制上传的文件类型、大小、能否删除、能否创建子文件夹等。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ckeditor3.6.5+ckfinder2.0.2+jsp编辑器配置 支持服务器浏览/上传图片、Flash
- CKEditor+CKFinder+JSP实现在线编辑器上传文件（包括图片、flash）
- SouthidcEditor编辑器如何支持上传png图片
- SouthidcEditor编辑器如何支持上传png图片
- JSP使用ckfinder实现中文图片上传后，无法显示，主要是tomcat不支持中文路径
- Ckeditor and ckfinder 配置实现截图上传图片到远程服务器
- Extjs 支持图片上传的Html编辑器（StarHtmleditor）及其bug修正
- ckfinder,ckeditor 编辑器 上传图片配置
- Drupal 7 配置ckeditor和ckfinder编辑器实现图片上传--不用wysisyg
- Fckeditor上传图片出现“因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件。”
- IE7 预览待上传的本地图片(Image Upload Preview) ,放上服务器浏览就不行了。什么破IE7，这个都不支持了
- CKEditor3.x 在Java项目中配置、包括图片上传(支持FTP、图片压缩)
- 推荐ajaxfilemanager for tiny_mce 比较完善的tiny_mce编辑器的图片上传及图片管理插件PHP版 支持中文
- tinymce编辑器上传图片插件配置
- flash 头像上传裁剪预览支持多种语言php,jsp,asp,asp.net
- eWebEditor V7.3 for asp.net版本编辑器带后台版本_新增加防止图片木马上传
- tomcat配置图片服务器，上传图片到服务器的硬盘上，而不是项目下
- CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩
- 关于CKEditor4.5.6的使用，自定义toolbar配置，上传图片案例（SpringMVC+MyBatis案例），自定义行高，去编辑器的中内容，将编辑器中内容设置到指定的位置等
- CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩