CKEditor 图片上传

Posted

技术标签:

【中文标题】CKEditor 图片上传【英文标题】:CKEditor Image Upload 【发布时间】:2010-11-30 11:33:59 【问题描述】:

我希望将CKEditor 包含在我正在处理的项目中,并且我需要CKFinder 插件提供的图像上传支持,但是我并不特别需要CKFinder 工具的其余部分,因此需要购买许可证有点矫枉过正。有没有人花时间为 CKEditor 3 实现一个自定义图像上传器,它可以与 ASP.NET MVC 一起使用?如果需要,我可以创建自己的,只是想先在这里查看。

另外,有没有人知道一个像CKEditor / Cute Editor 一样的体面的所见即所得编辑器,它支持图像上传并且可以在 ASP.NET MVC 中工作?

【问题讨论】:

【参考方案1】:

这是我最初在 ASP.NET WebForms 中为 Fckeditor 编写的图像上传器(因此主题不再匹配),我已对其进行修改以与 Ckeditor 一起使用。

https://github.com/mcm-ham/ckeditor-image-uploader

更新:我现在添加了一个示例,展示如何将此 WebForms 图像上传器添加到 MVC 项目。

更新 2:我现在添加了可用于 .NET Core MVC 项目的 Razor Pages 版本。

【讨论】:

太好了,这为我解决了很多问题! 这个例子是 webforms 而不是 MVC。 这个图像加载器是基于 webforms 的,但仍然可以在 MVC 项目中工作。可以忽略 Ckeditor 是如何添加到页面的。只需要复制ckeditor文件夹下的ImageBrowser.aspx、LinkBrowser.aspx & config.js以及web.config中的两个appSettings。 @Michael 当我包含 dll 时,我收到此错误 Could not load file or assembly 'System.Web.Helpers, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. Strong name signature could not be verified. The assembly may have been tampered with, or it was delay signed but not fully signed with the correct private key. (Exception from HRESULT: 0x80131045)。这是一个针对 .net framework 4.0 的网站。你知道如何解决这个问题吗?感谢上传图片。 @Answer 已修复,由于 this issue 我正在经历,我确实对库进行了自定义构建,但我决定回到我所拥有的并删除对该库的依赖会更容易。跨度> 【参考方案2】:

这是一个关于如何使用 CKEditor 通过 ASP:NET MVC2(不是 Webforms)上传图片的教程

http://arturito.net/2010/11/03/file-and-image-upload-with-asp-net-mvc2-with-ckeditor-wysiwyg-rich-text-editor/

【讨论】:

这个例子是MVC。唯一的问题是它不完整(控制器实际上并没有保存文件)。但是,如果您将第 6-10 行(并修复第 13 和 16 行)替换为 Phil 在 haacked.com/archive/2010/07/16/… 谢谢 - 这个是正确的! 最后,在看了很多插件之后..!谢谢! 我创建了一个更新版本的 Arturito 解决方案,其中也包括实际文件上传:gist.github.com/afsharm/5660844【参考方案3】:

我使用过 ckeditor 和使用 ASP.NET 的上传控件,但没有专门使用 MVC。我还没有找到任何与 ckeditor 相提并论的东西,它甚至接近于易于设置或提供相同的功能。

不确定 MVC 的限制,但我使用以下设置文件上传支持:

基本文档主要是指您提到的 CKFinder 插件:

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%28Uploader%29

关于如何实现上传组件的更好文档:

How can you integrate a custom file browser/uploader with CKEditor?

否则,我相信 ckeditor 只是将所有图像字节填充到请求对象中并将其发送到配置为上传的页面。该页面可以获取这些字节并为所欲为(即将它们保存到文件系统、sql 服务器等)。这就是自定义实现的用武之地。

我没有使用页面进行上传,而是使用了 httphandler 实现。页面ckeditor重定向到调用必要的javascript函数来指示上传完成后的状态,但处理程序真正控制实际的文件上传。我使用的 httphandler 的基本实现在:

http://darrenjohnstone.net/2008/07/15/aspnet-file-upload-module-version-2-beta-1/

希望这至少能给你一个起点。


更新:在搜索其他东西时发现了这个。没有深入研究,但似乎就在你的胡同里:

http://interactiveasp.net/blogs/spgilmore/archive/2009/06/03/how-to-support-file-uploads-in-asp-net-mvc.aspx

【讨论】:

【参考方案4】:

如果您需要快速实施并拥有可靠的解决方案,您可以考虑使用托管解决方案来为 CKEditor 上传和存储图像 - 例如,我们的插件:

http://ckeditor.com/addon/uploadcare

【讨论】:

以上是关于CKEditor 图片上传的主要内容,如果未能解决你的问题,请参考以下文章

CKEditor + CKFinder (上传图片出现问题)

ckeditor 图片上传功能配置

ckeditor无法上传图片

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

CKEditor上传图片—配置CKFinder

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