ckeditor3.6.5+ckfinder2.0.2+jsp编辑器配置 支持服务器浏览/上传图片、Flash

最新推荐文章于 2021-03-19 12:08:37 发布
最新推荐文章于 2021-03-19 12:08:37 发布
阅读量4.6k 收藏 1
点赞数 2
分类专栏： Web 文章标签： jsp 服务器 fckeditor asp.net flash java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinlff/article/details/6854211
版权

             一、相信很多人都用过大名鼎鼎的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的类名不一样小心！ 

    <!-- 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截图

<config>
	<enabled>true</enabled>
	<baseDir></baseDir>
	<baseURL>upload/ckfinder/</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>


目录结构

 

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里，可以控制上传的文件类型、大小、能否删除、能否创建子文件夹等。

 

西兹兹
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
tikzcd-editor：一个简单的可视化编辑器，用于创建交换图
02-03
tikzcd编辑器 一个简单的可视化编辑器，用于创建交换图。 您可以以自行托管，也可以在。 建造 确保已安装和npm。 首先，克隆此存储库： $ git clone https://github.com/yishn/tikzcd-editor $ cd tikzcd-editor 使用npm安装依赖项： $ npm install 您可以使用build命令进行build ： $ npm run build 这将创建一个缩小的bundle bundle.js及其源映射。 要启动，只需在您喜欢的现代浏览器中打开index.html 。 使用watch命令进行开发： $ npm run watch 要创建准备好分发的独立归档文件，请运行以下命令： $ npm run dist 这将在dist文件夹中创建一个文件夹和一个zip文件。 贡献 始终欢迎错误报告和请求请求！ 请先查阅以获取现有问题。 您也可以通过来支持该项目。 捐赠者 非常感谢这些可爱的人： 杰里米·劳斯（Jeremy Rouse） 马克·罗德里格斯（Marko Rodriguez） 史蒂夫·海姆 最大新 张
cdeditor 使用
u014164005的博客
10-16 262
jsp 代码   &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;script type="text/javascript" src="../../js/jquery-1.8.3.min.js"&g
CKFinder 2.0.2 去除 This is the demo version of CKFinder. Click here to visit our web site
xiaofeiazi的专栏
10-28 1128
在使用FCKEditor时发现浏览服务器文件不方便，后来发现CKFinder可以和其配合使用而且支持预览图片，感觉很不错，可惜CKFinder在允许你免费使用的同时，窗口始终有一个“This is the demo version of CKFinder. Click here to visit our web site.”的提示，很是不爽，毕竟这个思路还简单，这种情况一般是显示一个DIV层或ta
解决Struts2中CKFinder上传图片等文件后没有响应(服务器上也没有)问题--某特殊情况
CK的程序开发笔记
10-16 1413
第一篇博文，条理不清还请见谅…… ckeditor想必有很多人使用，而其文件上传功能需要配合ckfinder来使用，当然也有自行制作的。ckeditor与ckfinder的配置方法这里就不阐述了，网上有很多介绍的博文，而且官网也有配置介绍。这里讲述一下我在同时使用struts2和ckfinder时遇到的问题。 问题现象： 配置好ckeditor与ckfinder后，使用ckfinde
cdeditor3.6.5+ckfinder2.0.2+jsp编辑器配置 支持服务器浏览/上传图片、Flash
yangzhiyong77
10-09 124
一、相信很多人都用过大名鼎鼎的FckEditor， 最新又出来了个ckEditor， 令人一下子搞不清楚， 到官方网站看看才知道FckEditor在2.6版本之后就改名为ckEditor了， 在这里特别说明一下， 以免混淆，因为网上搜出来的大多都是FckEditor相关配置的文章。 二、FckEditor里有java版本的配置，相信有些同行用过，支持php、asp.net、java版本，现在一...
ckeditor+ckfinder组合下载 (php演示版,2019年最新,绝对好用) ckeditor4+ckfinder3.1
08-18
CKEditor和CKFinder是两个非常流行的开源Web编辑器和文件管理工具，它们在网页内容编辑和上传文件方面提供了强大的功能。CKEditor是一个富文本编辑器，而CKFinder则作为一个插件，为CKEditor提供了一个方便的文件...
CKEditor4+ckfinder ASP.NET 支持图片上传
01-21
ckfinder则是一个文件管理工具，与CKEditor搭配使用，允许用户在编辑文章时方便地上传、选择和管理图片或其他文件。这个ASP.NET项目是关于如何在CKEditor4中集成ckfinder，以实现图片上传功能的示例。 首先，我们...
整合ckeditor+ckfinder实现图片或文件上传功能
最新发布
10-11
`ckeditor`是一款知名的开源JavaScript富文本编辑器，而`ckfinder`则是一个与之配合的文件管理器，主要用于上传、管理和选择编辑器中的图片和文件。本文将详细介绍如何在JAVA工程中整合这两款工具，实现图片和文件的...
Eclipse下配置CKEditor3.5.3+CKFinder2.0.2
06-07
FCKEditor作为一款强大的页面编辑器已经被CKEditor取代，但是新版的CKEditor不再支持图片和文件的上传功能，需要依赖CKFinder来实现。CKEditor for Java 最新版本是3.5.3，CKFinder的最新版本是2.0.2，特做一个整合...
ckeditor3.6.5+ckfinder2.1+struts2
11-21
ckeditor3.6.5+ckfinder2.1+struts2的整合，破解方法，有源码，ckfinder.js已经被破解了， 可以直接用。ckfinder和struts2的整合在文档最后。 最新版本的ckfinder我没有找到破解方法， 所以用的2.1版本。 希望可以帮...
PHP版本的CKEditor v3.6.5 + ckfinder v2.3破解版+注册机
06-20
PHP版本的CKEditor v3.6.5 + ckfinder v2.3。我已经根据网上的教程对其进行破解过了，没有再提示要我注册或收费的。如果你整合到自己的系统中发现还是未注册，那就使用包中的注册机进行注册。很容易。 东西确实不错。 附带了两个教程，不会用的童鞋看教程即可。 祝各位搞网络编程研发的童鞋工作顺利，拿高薪！
ckeditor和ckfinder 支持图片上传，文档上传，flash上传
06-22
网上流传的ckeditor和ckfinder基本是都是不能上传图片的 这个版本包含了本人将近一个星期的汗水，绝对支持上传 1、CKFinder.dll在ckfinder的bin/debug中使用不要忘记引用 2、ckeditor中config.js使用时不要忘记更改上传路径：var ckfinderPath='/js';(/js就是路径) 我的ckeditor文件夹是放在跟木星js文夹中的所以路径是'/js' 例子：如果ckeditor放在根目录下Admin/js中那么路径就是'/Admin/js' 3、将ckfinder中config.ascx中public override bool CheckAuthentication()函数中return false；（）不允许上传改为return true；（允许上传）
CKFinder2.x 入门 二
why
07-08 241
破解   CKFinder是收费的，可是我们都比较穷，用不起那么昂贵的东西，所以只能即无奈又无耻的去破解了。在http://www.imobile365.com/acticles/reviews-and-news/12-others/4551-ckeditor33ckfinder20ckf.html看到个破解办法，试了一下，果然好用，不过作为一名程序员，感情很矛盾啊，国人的破解技术还是...
Java -- springboot 配置 ckfinder
sky_eyeland的博客
06-12 2282
基于 SpringBoot 下配置 ckfinder，提供图片的上传、选取等资源管理功能
java ckfinder 图片重命名,CKFinder上传TIFF格式图片
weixin_34530727的博客
03-19 167
TIFF属于一种高清图片格式，分辨率非常高，在CKFinder上传中会出现问题，查阅CF源码发现使用ImageIO上传图片数据，一般的JPG等格式是完全没问题的，但是在上传TIFF格式且提交较大时(达到1M以上就会报错，但是其他格式的完全不会)会报错内存溢出，但不是显示具体错误信息。我们先采用两种方式解决问题：第一种方式，就是修改CF的源代码，在上传TIFF格式图片的时候，保留TIFF格式的图片，...
java ckeditor 上传图片_CKeditor如何实现图片上传功能
weixin_42500866的博客
02-21 167
第一步：工具下载本人使用的开发工具为myeclipse10，服务器为apache-tomcat-6.0.30首先进入CKeditor和CKfinder官网下载所需工具包下载成功后包为： ckeditor_3.6.5.zip ckfinder_java_2.3.zip 这是最新版，若以后有更新，只需下载新版即可，步骤不变哦！第二部：在myeclipse10建立项目CKeditor右键单击new一个w...
Spring Boot集成CKFinder
RickyIT的专栏
03-30 6148
Spring Boot集成CKFinder,实现浏览功能。
编辑器漏洞整理
zhangge3663的博客
03-14 3110
1.常见的编辑器 常见的有Ewebeditor,fckeditor,ckeditor,kindeditor等等。这里有份编辑器漏洞手册: http://navisec.it/%E7%BC%96%E8%BE%91%E5%99%A8%E6%BC%8F%E6%B4%9E%E6%89%8B%E5%86%8C/ 2.Ewebeditor编辑器 Ewebeditor是基于浏览器的、所见即所...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值