Html 所见即所得的图像复制/粘贴

Wysiwyg with image copy/paste

提问by jW.

First, I understand that an image cannot be "copied" from a local machine into a website. I understand that it must be uploaded. I am a web programmer, and am familiar with common web wysiwyg tools such as TinyMCE and FCKEditor. My question is if there exists a program or web module or something of the sort that works will perform an automatic upload of images for a wysiwyg. I have a client that is constantly complaining about not being able to copy/paste documents with images from MS Word into a wysiwyg to create content on their website.

首先，我知道图像不能从本地机器“复制”到网站。我知道它必须上传。我是一名网页程序员，熟悉常用的网页所见即所得工具，如 TinyMCE 和 FCKEditor。我的问题是，是否存在程序或网络模块或类似的东西，可以为所见即所得自动上传图像。我有一个客户经常抱怨无法将带有图像的文档从 MS Word 复制/粘贴到所见即所得中以在他们的网站上创建内容。

I have looked into TX Text Control (http://labs.textcontrol.com/) and was looking into a possibly flash wysiwyg that could upload the file automatically behind the scenes. I don't know if this exists, and google did not much help me in my search, so I thought I would ask other coders.

我已经研究了 TX Text Control ( http://labs.textcontrol.com/)，并且正在研究一个可能的 flash wysiwyg，它可以在幕后自动上传文件。我不知道这是否存在，而且 google 对我的搜索没有太大帮助，所以我想我会问其他编码员。

I am open to any sort of server technology, or browser requirements. I am looking for some browser based tool instead of an application tool such as Dreamweaver or otherwise.

我对任何类型的服务器技术或浏览器要求持开放态度。我正在寻找一些基于浏览器的工具，而不是诸如 Dreamweaver 或其他应用程序工具。

If no good solution to the problem exists, I am willing to accept that at this point.

如果这个问题没有好的解决方案，我现在愿意接受。

Note: This was a request from a client, and to me it seemed rather unreasonable. I decided to gather community advice instead of just tell the client 'No' and the options here have been extremely helpful and informative in presenting possible solutions.

注意：这是一个客户的要求，对我来说似乎很不合理。我决定收集社区建议，而不是仅仅告诉客户“不”，这里的选项在提出可能的解决方案方面非常有帮助和信息量。

采纳答案by Gregory Pakosz

You might find inspiration from ScreenshotMe.

您可能会从ScreenshotMe 中找到灵感。

Basically you need different parts:

基本上你需要不同的部分：

• something that takes the image out of the clipboard and uploads it to the web: this could be a java applet, flash or firefox extensions. Flash or Java would have the advantage of being cross browser
• then you use the <canvas>tag to display the image once it has been uploaded (use explorercanvasto bring canvasto Internet Explorer)

• 将图像从剪贴板中取出并将其上传到网络的东西：这可能是一个 java 小程序、flash 或 firefox 扩展。Flash 或 Java 具有跨浏览器的优势
• 然后使用<canvas>标签显示上传后的图像（使用explorercanvas带到canvasInternet Explorer）

As I pointed out in my comment, Google is discontinuing gears in favor of HTML5, have a look at 7 User Interaction - HTML 5.

正如我在评论中指出的那样，谷歌正在停止支持 HTML5 的齿轮，看看7 User Interaction - HTML 5。

EDIT:

编辑：

HTML5 when implemented is supposed to interact with the system's clipboard. I imagine the following scenario would work:

HTML5 在实现时应该与系统的剪贴板进行交互。我想以下场景会起作用：

• paste the image data from clipboard to canvas
• get the canvas pixel data back as an image using toDataURL(): see Canvas2Image
• upload the image to server when submitting: see Saving canvas image with PHP

• 将图像数据从剪贴板粘贴到画布
• 使用以下方法将画布像素数据作为图像返回toDataURL()：参见Canvas2Image
• 提交时将图像上传到服务器：请参阅使用 PHP 保存画布图像

Until HTML5 copy/paste drag&drop is implemented, you'll have to rely on Flashor a (signed) Java appletto interact with the clipboard.

在实现 HTML5 复制/粘贴拖放之前，您将不得不依赖Flash或（已签名的）Java 小程序与剪贴板进行交互。

回答by Annie

You could look into drag & drop upload with Google Gears.

您可以使用 Google Gears查看拖放上传。

回答by AdrianD

I see this is an old thread, but in case anyone is still looking for something like this (as was I), I came across a product called textbox.iotonight from a company called Ephox (looks like they bought out TinyMCE as well).

我看到这是一个古老的线程，但在任何情况下，仍然在寻找这样的事情（因为是我），我遇到了一个产品叫textbox.io从一个叫以弗斯（看起来像他们买下了TinyMCE的为好）公司今晚.

Anyway, this is the first, if not only, javascript/HTML5 editor I've found that successfully pastes images from word using a proprietary plugin they call PowerPaste. Upon the initial paste, it prompts to hit paste again in order to import the images. Worked like a charm - only problem I had was that it's hellishly expensive for a startup like the one I'm involved in at $500+ per month (±R6,650+ per month in ZAR), which prices it out of our options unfortunately :(

无论如何，这是我发现的第一个（如果不是唯一的话）javascript/HTML5 编辑器，它使用名为 PowerPaste 的专有插件成功地从 word 粘贴图像。在初始粘贴时，它会提示再次点击粘贴以导入图像。像魅力一样工作 - 我遇到的唯一问题是，对于像我这样的初创公司来说，每月 500 美元以上（在 ZAR 中为每月 ±6,650 美元以上）的初创公司非常昂贵，不幸的是，这让我们无法选择:(

回答by Rahul Shakya

There is no direct option available in asp.net, but you can do this

asp.net 中没有可用的直接选项，但您可以执行此操作

http://www.codeproject.com/KB/graphics/ClipboardActiveX.aspx

http://www.codeproject.com/KB/graphics/ClipboardActiveX.aspx

回答by SpliFF

I have a client that is constantly complaining about not being able to copy/paste documents with images from MS Word into a wysiwyg to create content on their website.

我有一个客户经常抱怨无法将带有图像的文档从 MS Word 复制/粘贴到所见即所得中以在他们的网站上创建内容。

And this will fail. MS Word does not create valid HTML, the pages will appear broken to users of conformant browsers. Word also has some odd methods of anchoring images and flowing text that will not translate. In short, Word is a poor environment for authoring HTML.

这将失败。MS Word 不会创建有效的 HTML，对于符合标准的浏览器的用户来说，页面将显示为损坏的。Word 也有一些奇怪的方法来锚定图像和不会翻译的流动文本。简而言之，Word 是编写 HTML 的糟糕环境。

Of course your clients probably won't accept that which brings us to option 2:

当然，您的客户可能不会接受将我们带到选项 2 的内容：

Since your client has opted for Word as their WYSIWYG editor there's very little point pasting that content into anotherWYSIWYG editor. Your optimal solution is to look into ways of automating HTML export from Word or OPen Office. This could be done using a combination of VBA and a server-side script to first convert the document to HTML (this will also write the images to disk) and then upload the combined content to the server.

由于您的客户选择 Word 作为他们的 WYSIWYG 编辑器，因此将该内容粘贴到另一个WYSIWYG 编辑器中几乎没有意义。您的最佳解决方案是研究从 Word 或 OPen Office 自动导出 HTML 的方法。这可以使用 VBA 和服务器端脚本的组合来完成，首先将文档转换为 HTML（这也会将图像写入磁盘），然后将组合的内容上传到服务器。

回答by Pekka

I understand your client's predicament. I am working on the same thing, but with little priority at the moment so I can't present any solutions, just a few notes.

我理解你客户的困境。我正在做同样的事情，但目前没有什么优先事项，所以我无法提出任何解决方案，只是一些笔记。

• When I copy + paste an image from a savedOpenOffice document (doesn't work with an unsaved one) into a CKEDitor instance - I don't have MS Word here to test but I assume it works similarly - I get the following HTML inserted into the editor:

  <img src="file:///C:/Users/PEKKAG%7E1/AppData/Local/Temp/moz-screenshot-4.png">

  it might be possible to tweak a Flash or Java uploader in a way that this file can be fetched with very little interaction from the user. Being able to fetch files from the User's computer is a horriblesecurity hole but it might be possible to at least pre-set an uploader to the temp directory directory.

• However, the Canvasmethod that Gregory Pakosz mentions I find the most interesting, because this way it couldbe possible to store the image on server side silently, without any upload. The same security restrictions as in the above example still apply, though: The image is on a different domain, and thus cannot be read by a script on the page. One would have to find a way around that using browser settings or writing a custom extension.

• 当我将已保存的OpenOffice 文档中的图像（不适用于未保存的文档）复制并粘贴到 CKEDitor 实例中时 - 我这里没有 MS Word 进行测试，但我认为它的工作原理类似 - 我插入了以下 HTML进入编辑器：

  <img src="file:///C:/Users/PEKKAG%7E1/AppData/Local/Temp/moz-screenshot-4.png">

  可以调整 Flash 或 Java 上传器，使该文件可以在用户很少交互的情况下获取。能够从用户的计算机获取文件是一个可怕的安全漏洞，但至少可以将上传器预先设置到临时目录目录。

• 但是，我觉得 Gregory Pakosz 提到的Canvas方法最有趣，因为这样可以将图像静默存储在服务器端，无需任何上传。但是，与上述示例相同的安全限制仍然适用：图像位于不同的域中，因此页面上的脚本无法读取。人们必须找到一种使用浏览器设置或编写自定义扩展程序的方法。

回答by gerryLowry

If I understand your question correctly, your client could have any random Word document and that some of these documents might contain images.

如果我正确理解你的问题，你的客户可能有任何随机的 Word 文档，其中一些文档可能包含图像。

What you appear to be describing is akin to content management in some respects and to creating static web pages in others.

您所描述的内容在某些方面类似于内容管理，而在其他方面类似于创建静态网页。

I'll assUme that your client wants visitors to their website to view such documents as HTML pages and not as Word MIME types.

我假设您的客户希望访问他们网站的访问者以 HTML 页面而不是 Word MIME 类型查看此类文档。

Some options:

一些选项：

• use Word to save as HTML. Not the cleanest HTML but likely the cleanest solution.

• have your client purchase a product like Dreamweaver which will both import their Word document and clean up Word's generated HTML.

• if your client has lots of money, develop a custom solution using VSTO

• 使用 Word 保存为 HTML。不是最干净的 HTML，但可能是最干净的解决方案。

• 让您的客户购买 Dreamweaver 之类的产品，该产品将导入他们的 Word 文档并清理 Word 生成的 HTML。

• 如果您的客户有很多钱，请使用 VSTO 开发自定义解决方案

回答by helios

HTML only

仅 HTML

You could use something that (on drag and drop) automatically creates an invisible HTML form, a file input, copy the path of the filename into the fileinput and submit the form.

您可以使用（在拖放时）自动创建一个不可见的 HTML 表单、文件输入、将文件名的路径复制到文件输入并提交表单的东西。

You can create the form inside an invisible iframe to send it in the background without changing the current page. You know, standard Ajax procedure.

您可以在不可见的 iframe 中创建表单以在后台发送它，而无需更改当前页面。您知道，标准的 Ajax 程序。

A little help for dropping/pasting

删除/粘贴的一点帮助

I don't know if HTML allows dropping file items. If it doesn't you can look at the HTML 5 specification that Google is trying to make forward.

我不知道 HTML 是否允许删除文件项。如果没有，您可以查看 Google 正在努力推进的 HTML 5 规范。

Another option is using some kind of rich client component (Java Applet with Swing or Flash, or Silverlight, or wathever) at least to grasp the dropping of the file (or the pasting) and creating the HTML form.

另一种选择是使用某种富客户端组件（带有 Swing 或 Flash 的 Java Applet，或 Silverlight，或其他）至少来掌握文件的删除（或粘贴）并创建 HTML 表单。

Why I prefer sending a form

为什么我更喜欢发送表格

I prefer the creating of the form over the applet sending the file because it doesn't require another special port at the server or something like that.

我更喜欢创建表单而不是发送文件的小程序，因为它不需要服务器上的另一个特殊端口或类似的东西。

回答by Vlad Alexander

My question is if there exists a program or web module or something of the sort that works will perform an automatic upload of images for a wysiwyg

我的问题是是否存在程序或 Web 模块或类似的工作将执行所见即所得的图像自动上传

XStandard Pro will upload images to the server pasted from Word or other applications/file system.

XStandard Pro 将从 Word 或其他应用程序/文件系统粘贴的图像上传到服务器。

回答by Ola

The WYSIWYG editor called Redactor allows for copy-pasting images directly into the editor rather than clicking an upload imagebutton.

称为 Redactor 的 WYSIWYG 编辑器允许将图像直接复制粘贴到编辑器中，而不是单击upload image按钮。

Here's a link to their copy-paste example.

这是他们复制粘贴示例的链接。