Wysiwyg with image copy/paste

Question

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.

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.

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.

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.

Answer 1

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

Answer 2

You might find inspiration from 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 explorercanvas to bring canvas to Internet 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.

EDIT:

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

• 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

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

Answer 3

HTML only

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.

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.

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.

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.

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.

Answer 4

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.

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.

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

Since your client has opted for Word as their WYSIWYG editor there's very little point pasting that content into another WYSIWYG 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.

Answer 5

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 saved OpenOffice 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 horrible security hole but it might be possible to at least pre-set an uploader to the temp directory directory.

• However, the Canvas method that Gregory Pakosz mentions I find the most interesting, because this way it could be 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.

Answer 6

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

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.

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

Answer 7

In looking for a similar solution, I noticed that GMail allows it if you're copying and pasting from a browser.

If you copy from Word it seems to know the dimensions of the image (you can see an outline of the image) but it doesn't actually paste/upload the image.

From non-Office desktop apps there appears to be no support.

So on the assumption that Google engineers have dedicated some serious time to this, I suspect that it's not do-able from desktop apps yet but maybe if you could find a quick way to save the content to the web (e.g. using Word's blog or Save as HTML features) you could then copy and paste from that, if your client is prepared to take that extra step and you're able to let them save directly to a web server.

Nick

Answer 8

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

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