在TinyMCE中自定义图像上传

我有一个ASP.NET Web API Web服务，我想用它来上传文件。我这样做的方式是客户端发送一个JSON对象到服务http://myserver.com/api/images/upload。在TinyMCE中自定义图像上传

的对象将包含图像的一个base64字符串表示，加上一些元数据，例如：

{ companyId: 12345, image: "someBase64encodedStringRepresentingTheImage" }

我想用TinyMCE的在客户端，但我无法弄清楚如何对其进行自定义，使图像以该格式上传到服务器。（事实上，它似乎并不像TinyMCE的带有图像上传所有）

来源

2016-04-22 msk

TinyMCE的4.2+实际上有它自己的内置工艺处理，你在编辑器中放置图片的上传：

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

基本过程是TinyMCE将为插入到编辑器中的每个图像创建一个单独的HTTP POST。它会根据init中images_upload_url选项的设置将该图像发送到您选择的URL（通过HTTP POST）。

images_upload_url（您必须创建）中引用的URL处的图像处理程序必须执行任何需要将图像“存储”到应用程序中的操作。这可能意味着是这样的：一个文件夹中

存储项Web服务器
存储该项目上的数据库中
存放在资产管理系统

的项目.. 。无论您选择存储图像的位置，您的图像处理程序需要返回一行JSON，以告知TinyMCE图像的新位置。如TinyMCE文档中所提到的，这可能如下所示：

{ location : '/uploaded/image/path/image.png' }

TinyMCE会将图像的src属性更新为您返回的值。如果您在init中使用images_upload_base_path setting，那么它将被预置到返回的位置。

这里的网络是TinyMCE知道什么时候嵌入的图像存在于你的内容中，但它不可能知道在你的应用程序的上下文中如何处理该图像，以便作业（“图像处理程序”）是某种东西你必须创建。

没有为你写你自己的图像处理程序的选项，如果默认的一个是不够的：

https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_handler

我会建议您尝试使用，因此你不附带TinyMCE的上传必须编写并维护自己的代码（总是更容易），但如果内置代码不合适，则可以使用自己的函数替换它。

来源

2016-04-22 15:27:20

我正在尝试此操作，请遵循https://www.tinymce.com/docs/advanced/handle-async-image-uploads/上的所有内容，但我没有看到浏览文件按钮。还有什么我失踪？我已经尝试了一些文件管理器，但是它们用于管理服务器上的文件，而我不想那样做。我只想让用户上传他们的本地文件，而不是混淆别人上传的文件。 – AndyD273

@ AndyD273你可以在TMCE Fiddle或Codepen类型网站上发布一些代码吗？很难说没有看到任何代码可能会出错。 –

@ AndyD273也许你需要在你的init中添加一个'file_browser_callback'函数，这样你就可以选择浏览本地文件系统了吗？ –

在TinyMCE中自定义图像上传

回答

相关问题