如何实现ckeditor文件上传

author author     2023-04-08     519

关键词:

想把java web项目中的fckeditor在线文本编辑器升级到ckeditor,但又不想购买ckfinder来实现文件上传?老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法,只要对fckeditor的filemanager做出几处修改,就可以集成fckeditor的文件上传管理器到ckeditor中使用,可以方便在文章中插入图片及flash。 1.在java web项目中集成fckeditor
如果你是把fckeditor升级到ckeditor的话,可以跳过这一步,否则请下载fckeditor的最终版本,然后把fckeditor文件夹复制到java web项目的webroot目录下。当然,你可以直接下载本文的示例项目fckeditro文件上传管理器集成到ckeditor示例项目 (0)来获得最终版本的fckeditor,而且是已经可以集成到ckeditor的fckeditor。 2.把java实现文件上传需要的jar复制到项目lib目录下
下载本文的示例项目后解压,把项目lib目录下的所有jar文件复制到你的项目的lib下面,如果不是通过myeclipse或者eclipse进行粘贴的话,你还需要把这些jar加入到项目编译路径下。
3.重写fckeditor实现文件上传的ConnectorServlet以解决中文乱码的问题
你可以直接到本文示例项目net.laokboke.servlet目录下的ConnectorServlet.java复制到你的项目的src目录下。
4.实现fckeditor的connector.userActionImpl
其实只需要把fckeditor.properties文件复制到你项目的src目录下就可以了 5.配置你的web.xml文件
配置上传文件的servlet,使tomcat启动的时候就加载该servlet,在web.xml中加入以下的代码:
<servlet>
<servlet-name>Connector</servlet-name> <servlet-class>
net.laokboke.servlet.ConnectorServlet
</servlet-class>

<init-param>
<param-name>baseDir</param-name> <param-value>/userfiles/</param-value> </init-param>
<init-param>
<param-name>debug</param-name> <param-value>true</param-value> </init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping> <servlet-name>Connector</servlet-name>
<url-pattern>/fckeditor/connector</url-pattern>

</servlet-mapping>
6.修改fckeditor文件上传管理器的若干文件
这些文件全部位于fckeditor\editor\filemanager\browser\default\目录下,你只需要把本文的示例项目中同目录下的所有文件复制替换你的就可以了。 7.修改ckeditor的图像属性窗口js,屏蔽一些不必要的选项
该文件是位于ckeditor\plugins\image\dialogs\目录下的image.js文件,增加了291-293这几行代码。
8.在ckeditor集成fckeditor filemanager
其实就是在使用ckeditor时配置它的filebrowserBrowseUrl和filebrowserUploadUrl等属性,如以下js代码
<script type="text/javascript"> CKEDITOR.replace( 'editor1',
filebrowserBrowseUrl :
'<%=path %>/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=/fckeditor/connector', filebrowserUploadUrl : '<%=path %>/fckeditor/connector?Type=Image'
); </script>
参考技术A 想把java web项目中的fckeditor在线文本编辑器升级到ckeditor,但又不想购买ckfinder来实现文件上传?老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法,只要对fckeditor的filemanager做出几处修改,就可以集成fckeditor的文件上传管理器到ckeditor中使用,可以方便在文章中插入图片及flash。 1.在java web项目中集成fckeditor
如果你是把fckeditor升级到ckeditor的话,可以跳过这一步,否则请下载fckeditor的最终版本,然后把fckeditor文件夹复制到java web项目的webroot目录下。当然,你可以直接下载本文的示例项目fckeditro文件上传管理器集成到ckeditor示例项目 (0)来获得最终版本的fckeditor,而且是已经可以集成到ckeditor的fckeditor。 2.把java实现文件上传需要的jar复制到项目lib目录下
下载本文的示例项目后解压,把项目lib目录下的所有jar文件复制到你的项目的lib下面,如果不是通过myeclipse或者eclipse进行粘贴的话,你还需要把这些jar加入到项目编译路径下。
3.重写fckeditor实现文件上传的ConnectorServlet以解决中文乱码的问题
你可以直接到本文示例项目net.laokboke.servlet目录下的ConnectorServlet.java复制到你的项目的src目录下。
4.实现fckeditor的connector.userActionImpl
其实只需要把fckeditor.properties文件复制到你项目的src目录下就可以了 5.配置你的web.xml文件
配置上传文件的servlet,使tomcat启动的时候就加载该servlet,在web.xml中加入以下的代码:
<servlet>
<servlet-name>Connector</servlet-name> <servlet-class>
net.laokboke.servlet.ConnectorServlet
</servlet-class>

<init-param>
<param-name>baseDir</param-name> <param-value>/userfiles/</param-value> </init-param>
<init-param>
<param-name>debug</param-name> <param-value>true</param-value> </init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping> <servlet-name>Connector</servlet-name>
<url-pattern>/fckeditor/connector</url-pattern>

</servlet-mapping>
6.修改fckeditor文件上传管理器的若干文件
这些文件全部位于fckeditor\editor\filemanager\browser\default\目录下,你只需要把本文的示例项目中同目录下的所有文件复制替换你的就可以了。 7.修改ckeditor的图像属性窗口js,屏蔽一些不必要的选项
该文件是位于ckeditor\plugins\image\dialogs\目录下的image.js文件,增加了291-293这几行代码。
8.在ckeditor集成fckeditor filemanager
其实就是在使用ckeditor时配置它的filebrowserBrowseUrl和filebrowserUploadUrl等属性,如以下js代码
<script type="text/javascript"> CKEDITOR.replace( 'editor1',
filebrowserBrowseUrl :
'<%=path %>/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=/fckeditor/connector', filebrowserUploadUrl : '<%=path %>/fckeditor/connector?Type=Image'
); </script>

如何在 CKeditor 上传中向 POST 值添加字段

】如何在CKeditor上传中向POST值添加字段【英文标题】:HowtoaddafieldtoPOSTvaluesinCKeditorupload【发布时间】:2012-05-1016:16:16【问题描述】:我使用django和ckeditor为TextEdits提供所见即所得的体验。我想使用CKEditor文件上传功能(在文件浏... 查看详情

ckeditor添加自定义按钮整合swfupload实现批量上传图片

ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮,由于ckeditor只能上传一张图片,如果要上传多张图片就要结合ckfinder,而ckfinder是收费的,所以就想通过自定义按钮整合swfupload实现一次上传多张图片... 查看详情

ckeditor实现图片上传,并且回调图片路径

CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮并且预览中有一堆火星文,可以修改相应配置删除它。第一种方法:打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”,(b.config.image_prev... 查看详情

ckeditor如何在asp中配置上传图片

参考技术A我很久没弄了,以前搞过,修改下上传文件还有路径追问如何修改 查看详情

如何在管理员中使用 django-ckeditor 在服务器上上传文件和浏览器文件?

】如何在管理员中使用django-ckeditor在服务器上上传文件和浏览器文件?【英文标题】:Howtousedjango-ckeditortouploadfilesandbrowserfilesonserverinadmin?【发布时间】:2016-02-1505:37:51【问题描述】:我被这个问题困扰了一整天。我已经仔细阅... 查看详情

ckeditor编辑器如何做复制图片上传(包括本地图片及远程图片),以插件方式实现

参考技术A这个复制图片到编辑器中的问题是跟浏览器有关系的.IE浏览器是不支持的.firefox浏览器是支持的.但是firefox是将图片给解析成base64的大字符串而不是图片路径. 查看详情

ckeditor+ckfinder(上传图片出现问题)

CKEditor+CKFinder实现图片上传功能,在本地测试的时候,是可以上传的,没有问题。但是上传至服务器后,上传时就出现问题了,弹出了“由于文件系统的限制,该请求不能完成”的警告框!请问这应该怎么解决呢?(详细)参考... 查看详情

Django-CKEditor 图片上传

】Django-CKEditor图片上传【英文标题】:Django-CKEditorImageUpload【发布时间】:2013-06-0517:38:48【问题描述】:我目前已经安装了Django-CKEditor并拥有自己的自定义工具栏。我正在努力寻找如何启用图片上传。单击图像按钮时,我只能通... 查看详情

phpcms的ckeditor附件上传后文件名显示路径,不是文件名,求高手指教如何修改后台php文件

参考技术ASQLServer/Oracle/MSAccess:CREATETABLEPersons(P_IdintNOTNULLUNIQUE,LastNamevarchar(255)NOTNULL,FirstNamevarchar(255),Addressvarchar(255),Cityvarchar(255)) 查看详情

ckeditor5上传的图片如何用php接收?

CKEditor5自带的图片上传,定义了uploadUrl,但不知道怎么用PHP接收。还有一个疑问就是CKEditor5传递到upload.php的是文件路径还是二进制数据?问题已经解决,详细步骤在评论里从图上看应该是传的文件用$_FIELES接收,如果不行的话试... 查看详情

CKEditor 5 注册多个上传适配器

】CKEditor5注册多个上传适配器【英文标题】:CKEditor5RegisterMoreThanOneUploadAdapter【发布时间】:2019-04-0915:24:02【问题描述】:我使用CKEditor5为我们的软件实现编辑器。我想用这个编辑器上传图片和视频。它有图像插件。我定制了ckfi... 查看详情

急!急!急!asp.netckeditor3.5.3如何实现添加图片上传功能!代码越详细越好,最好可以直接运行的!

各位大侠们!请有知道的赐教一下啦!我真的很急!ckeditor没有具备上传图片功能,只有与ckfinder工具集成,才能实现,如果需要可以问我追问请问要如何才能将两者集成呢?网上的一些答案都不能正常运行,您可以指导一下吗... 查看详情

简单上传ckeditor 5 无法上传文件:未定义

】简单上传ckeditor5无法上传文件:未定义【英文标题】:Simpleuploadckeditor5cannotuploadfile:undefined【发布时间】:2020-09-0415:14:47【问题描述】:我正在使用带有laravel的ckeditor5简单上传,但是当我上传任何图像时,会出现“localhost说无... 查看详情

使用 CKEditor CDN 时如何从桌面上传 CKEditor 中的图像?

】使用CKEditorCDN时如何从桌面上传CKEditor中的图像?【英文标题】:HowtouploadimageinCKEditorfromdesktopwhenIamusingCKEditorCDN?【发布时间】:2016-06-2120:33:58【问题描述】:我正在使用来自CDN的CKEditor。CDN代码如下所示。但在CKEditor中,我无法... 查看详情

ckeditor在asp.net中怎么实现上传图片?

参考技术A可以的,要设置上传目录追问这位大哥,能不能详细点! 查看详情

django-ckeditor 上传图片以外的文件

】django-ckeditor上传图片以外的文件【英文标题】:django-ckeditorfilesuploadotherthanimage【发布时间】:2013-02-0500:57:41【问题描述】:我正在使用django-ckeditor。我正在上传图像文件和.swf文件中的图像和Flash上传图标。但是当我上传除这... 查看详情

CKEditor 文件管理器在上传文件时卡住了?

】CKEditor文件管理器在上传文件时卡住了?【英文标题】:CKEditorfilemanagergettingstuckuploadingfiles?【发布时间】:2012-10-0815:36:25【问题描述】:我正在使用CKEditor,它是内置的文件管理器,允许人们更改内容/将图像上传到他们的网站... 查看详情

如何进行 CKEditor 5 图片上传?

】如何进行CKEditor5图片上传?【英文标题】:HowtodoCKEditor5ImageUploading?【发布时间】:2018-08-2908:39:07【问题描述】:ClassicEditor.create(editorElement,ckfinder:uploadUrl:\'my_server_url\').then(...).catch(...);我的服务器响应应该是什么?我在后端使... 查看详情