java与ckeditor和ckfinder整合后实现上传图片功能
最近在java项目中要用到图片上传功能，因为之前没接触过ckeditor在线编辑器，在网上也搜索了很多例子和使用方法，结合自己的项目
总算给做了出来，在此总结出来，希望对大家有所帮助
1，下载ckeditor_3.6.2.zip和ckfinder_java_2.1.zip，然后分别解压出来为ckeditor文件和ckfinder文件，
如图：
2，把解压出来的文件复制放在项目中webRoot目录下（注：ckfinder是复制解压出来的ckfinder文件下的CKFinderJava.war再解压后的CKFinderJava文件目录下的）
3，在jsp页面导入js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
然后在jsp页面中引入在线编辑器
<textarea rows="20" cols="70" name="content"></textarea>
<script type="text/javascript">
if( CKEDITOR.instances['content'] ){
} //解决 例外被抛出且未被接住 问题
var editor =place("content");//引号中的字符串要和文本域中name的值一致
CKFinder.setupCKEditor(editor,'ckfinder/');
</script>
4，配置l文件
<config>
<!-- 开启上传功能，如果为false为提示
：
因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
并且默认你是是为false的 -->
<enabled>true</enabled>
<!-- 文件存放的地址 /ckfinder/userfiles/ (自动创建) -->
<baseURL>/userfiles/</baseURL>
<!--检查双扩展名 -->
<checkDoubleExtension>true</checkDoubleExtension>
<!-- 在缩放后检查大小 -->
<checkSizeAfterScaling>true</checkSizeAfterScaling>
<!-- 配置路径以及格式 -->
<types>
<type name="Files">
<url>%BASE_URL%files/</url>
<directory>%BASE_DIR%files</directory>
<maxSize>0</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>0</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>0</maxSize>
<allowedExtensions>swf,flv</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
</types>
<!-- 可允许的操作 -->
<accessControls>
<ac
cessControl>
<role>*</role>
<resourceType>*</resourceType>
<folder>/</folder>
<folderView>true</folderView>
<folderCreate>true</folderCreate>
<folderRename>true</folderRename>
<folderDelete>true</folderDelete>
<fileView>true</fileView>
<fileUpload>true</fileUpload>
<fileRename>true</fileRename>
<fileDelete>true</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>tor.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>tor.plugins.FileEditor</class>
<params></params>
</plugin>
</plugins>
<basePathBuilderImpl>figuration.ConfigurationPathBuilder</basePathBuilderImpl>
</config>
5，配置l文件
<!-- =================ckeditor+ckfinder图片上传功能的配置=================== -->
<servlet>
<!-- servlet的命 名===注册名称，这个名称可以任意的 -->
<servlet-name>ConnectorServlet</servlet-name>
<!-- servlet 所在包 -->
<servlet-class>tor.ConnectorServlet</servlet-class>
<init-param>
<!-- 初始化设置 -->
<param-name>XMLConfig</param-name>
<param-value>/l</param-value>
</init-param>
<init-param>
<!-- 设置是否可以查看debug，在正常时候需要设置为false. -->
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<!--
load-on-startup 元素在web应用启动的时候指定了
servlet被加载的顺序，它的值必须是一个整数。
如果它的值是一个负整数或是这个元素不存在，
那么容器会在该servlet被调用的时候，加载这个servlet
。如果值是正整数或零，容器在配置的时候就加载并初始化这个servlet，
容器必须保证值小的先被加载。如果值相等，容器可以自动选择先加载谁。
在此不是必须的
-->
<load-on-startup>1</load-on-startup>
</servlet>
<!-- 映射的相对路径，主要是在其他地方使用，比如js，页面访问 -->
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/ckfinder/core/connector/java/connector.java
</url-pattern>
</servlet-mapping>
<!-- =================ckeditor+ckfinder图片上传功能的配置结束=================== -->
6，导入需要的jar包，放在lib目录下
，这些jar包可以在下载的ckeditor文件和ckfinder文件里到，如果没到，也可在网上下载
ckeditor-java-core-3.5.3.jar
CKFinder-2.1.jar
CKFinderPlugin-FileEditor-2.1.jar
CKFinderPlugin-ImageResize-2.1.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
Thumbnailator-0.3.10.jar
7，配置上传路径
在webRoot/ckeditor/config.js中加入下面的内容：
CKEDITOR.editorConfig = function( config )
{
编辑器在线使用//加入的内容
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.language = 'zh-cn'; // 配置语言
//
// config.uiColor = '#fff'; // 背景颜
//
config.width = '800px'; // 宽度
config.height = '300px'; // 高度
//
// config.skin = 'office2003';// 界面v2,kama,office2003
//
// lbar = 'Full';// 工具栏风格Full,Basic
//
/
/ config.font_names='宋体/宋体；黑体/黑体；仿宋/仿宋_GB2312；楷体/楷体_GB2312;' +
// '隶书/隶书；幼圆/幼圆；微软雅黑/微软雅黑;'+ config.font_names;
// config.htmlEncodeOutput = true;
//config.startupOutlineBlocks = false;
/*** 文件上传功能的配置-----------------------
*/
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
//---------------------------文件上传功能的配置结束--------
};
8，到此为止，java与ckeditor和ckfinder的配置已经完成，可以重启tomcat，重新打开项目就可看到页面上编辑器的文本框，此时点击图像
可以上传了
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论