Wysiwyg与图像复制/粘贴

首先,我知道一个图像不能从本地机器“复制”到网站上。 我明白,它必须上传。 我是一名networking程序员,熟悉TinyMCE和FCKEditor等常用networking工具。 我的问题是,如果存在一个程序或Web模块或类似的工作将执行一个wysiwyg自动上传图像。 我有一个客户,经常抱怨不能复制/粘贴MS Word图像文件到一个wysiwyg,在他们的网站上创build内容。

我已经看了TX文本控制( http://labs.textcontrol.com/ ),并正在寻找一个可能的flash wysiwyg,可以在幕后自动上传文件。 我不知道这是否存在,谷歌在我的search没有太大的帮助,所以我想我会问其他编码。

我接受任何types的服务器技术或浏览器要求。 我正在寻找一些基于浏览器的工具,而不是像Dreamweaver或其他应用程序工具。

如果没有好的解决办法,我愿意在这一点上接受。

注:这是客户的要求,对我来说似乎是不合理的。 我决定收集社区build议,而不仅仅是告诉客户“不”,这里的选项对提出可能的解决scheme非常有帮助和信息量。

你可能会从ScreenshotMe中find灵感。

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

  • 将图像从剪贴板中取出并上传到networking的东西:这可能是一个Java applet,flash或firefox扩展。 Flash或Java将有跨浏览器的优势
  • 那么您使用<canvas>标记在上传完成后显示图像(使用explorercanvas将canvas带到Internet Explorer)

正如我在评论中指出的那样,Google正在停止支持HTML5,请参阅7 User Interaction – HTML 5 。

编辑:

实施HTML5应该与系统的剪贴板交互。 我想象下面的情况将工作:

  • 将图像数据从剪贴板粘贴到canvas上
  • 使用toDataURL()将canvas像素数据作为图像toDataURL() :请参阅Canvas2Image
  • 提交时将图像上传到服务器:请参阅使用PHP保存canvas图像

在实施HTML5复制/粘贴拖放之前,您必须依靠Flash或(带符号) Java小程序与剪贴板进行交互。

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

我有一个客户,经常抱怨不能复制/粘贴MS Word图像文件到一个wysiwyg,在他们的网站上创build内容。

这将失败。 MS Word不会创build有效的HTML,页面将显示为符合浏览器的用户。 词也有一些奇怪的方法来锚定图像和stream动的文本,不会翻译。 总之,Word是创作HTML的一个糟糕的环境。

当然,你的客户可能不会接受那个把我们带到选项2的东西:

既然你的客户已经select了Word作为他们所见即所得的编辑器,那么将这些内容粘贴到另一个所见即所得的编辑器中是没有什么意义的。 您的最佳解决scheme是查看从Word或OPen Office中自动导出HTML的方法。 这可以使用VBA和服务器端脚本的组合来完成,首先将文档转换为HTML(这也将把图像写入磁盘),然后将组合的内容上传到服务器。

在asp.net中没有直接的选项,但是你可以这样做

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

我看到这是一个古老的线索,但如果有人仍然在寻找像这样的东西(就像我),我今晚从一个名叫Ephox的公司那里遇到了一个叫做textbox.io的产品(看起来他们也买了TinyMCE) 。

无论如何,这是第一个,如果不仅仅是javascript / HTML5编辑器,我发现它使用专有的插件成功地粘贴图像,他们称之为PowerPaste。 在初始粘贴时,它会提示重新粘贴以导入图像。 像我只有一个魅力问题一样工作的是,像我参与的每月500美元以上的初创企业(ZAR每月6,650 +美元)这样的初创企业,其代价太高了,而且很不幸, 🙁

只有HTML

你可以使用一些(拖放)自动创build一个不可见的HTML表单,一个文件input,将文件名的path复制到文件input并提交表单。

您可以在不可见的iframe内创build表单,以便在不更改当前页面的情况下在后台发送它。 你知道,标准的Ajax程序。

一些帮助下降/粘贴

我不知道如果HTML允许丢弃文件项目。 如果没有,你可以看看谷歌正在试图推出的HTML 5规范。

另一个select是使用某种丰富的客户端组件(带有Swing或Flash的Java Applet,或者Silverlight,或者其他浏览器)来至less掌握文件(或粘贴)的丢失和创buildHTML表单。

为什么我更喜欢发送表单

我更喜欢在发送文件的小程序上创build表单,因为它不需要服务器上的其他特殊端口或类似的东西。

我了解你的客户的困境。 我正在做同样的事情,但目前没什么优先权,所以我不能提出任何解决scheme,只是几个笔记。

  • 当我复制+粘贴保存的 OpenOffice文档(不使用未保存的文件)的图像到CKEDitor实例 – 我没有MS Word在这里testing,但我认为它的工作原理类似 – 我得到下面的HTML插入进入编辑器:

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

    可能可以调整Flash或Java上传器,以便可以通过用户很less的交互获取该文件。 能够从用户的计算机上获取文件是一个可怕的安全漏洞,但可能至less预先将临时目录设置为临时目录。

  • 但是,Gregory Pakosz提到的Canvas方法我觉得最有趣,因为这样可以将图像静静地存储在服务器端,而无需上传。 但是,与上例中相同的安全限制仍然适用:图像位于不同的域上,因此无法通过页面上的脚本读取。 人们必须find解决方法,使用浏览器设置或编写自定义扩展。

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

您所描述的内容类似于某些方面的内容pipe理,以及在其他方面创build静态网页。

我会告诉你的客户希望访问者访问他们的网站,查看HTML页面等文件,而不是Word MIMEtypes。

一些选项:

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

  • 让您的客户购买像Dreamweaver这样的产品,它将导入他们的Word文档并清理Word生成的HTML。

  • 如果你的客户有很多钱,用VSTO开发一个自定义的解决scheme

我的问题是,如果存在一个程序或networking模块或类似的工作将执行自动上传的图像为wysiwyg

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

在寻找类似的解决scheme,我注意到, 如果你从浏览器复制和粘贴,GMail允许。

如果从Word中复制它似乎知道图像的尺寸(您可以看到图像的轮廓),但实际上并不粘贴/上传图像。

从非Office桌面应用程序似乎没有支持。

因此,假设Google的工程师已经花了一些时间来解决这个问题,我怀疑它不能从桌面应用程序中实现,但如果你能find一个快速的方法来将内容保存到networking上(例如使用Word的博客或者保存作为HTMLfunction),您可以从中复制和粘贴,如果您的客户准备采取额外的步骤,并且可以让他们直接保存到Web服务器。

缺口

所谓的Redactor所见即所得编辑器允许将图像直接复制粘贴到编辑器中,而不是点击上传图像button。

这里有一个复制粘贴示例的链接 。

Interesting Posts