Wysiwyg with image copy/paste [closed]

问题:

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.

回答1:

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.

回答2:

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

回答3:

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.io tonight from a company called Ephox (looks like they bought out TinyMCE as well).

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 :(

回答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.

回答5:

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

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

回答6:

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.

回答7:

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.

回答8:

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

回答9:

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.

回答10:

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

回答11:

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.