Wysiwyg with image copy/paste [closed]

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

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 2

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 3

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

Answer 4

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

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

Answer 5

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

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