CKEditor / TinyMCE: pasting from docx / odt + saving images to image field?

[theoretic]

Hi friends! And thanks for Processwire!

Maybe I'm asking a noob question but I couldn't find any clear answer here. Is it possible to paste content from a doc / docx / odt file to a wysiwyg textarea field and to have all images automatically saved to a dedicated image field? Did some experiments, it appears that this may work somehow on MacOS with docx files. But it's definintely not working on Windows, any wysiwyg, any browser.

Guess I'm not the only one having this question. Any advice is welcome )

[wbmnfktr]

I'm not 100% sure but I think I remember using this module for a similar task:

https://processwire.com/modules/import-external-images/

Maybe try it first in a test installation.

[BitPoet]

Pasting from office applications is a complicated topic. The Windows clipboard can offer different formats of its contents to applications you paste to, e.g. plain text, HTML or image data, or different other data formats both the application you copy from and the receiving application have registered with the Windows system. In the case of copying from Word, your clipboard will look similar to this:

The paste handler in the receiving application needs to be able to parse one of the provided formats. You'd think there's HTML in that list, so TinyMCE could simply paste that and all should be well - well, there's a caveat. Office tries to be nifty and conserve memory, so the HTML in the clipboard contains links to local files, which look like this in the source:

<img width=224 height=237
src="file:///C:/Users/Someone/AppData/Local/Temp/msohtmlclip1/01/clip_image002.png"
v:shapes="Grafik_x0020_1">

Into the game come security zones and same origin policy, and so no, file:///somewhere isn't going to make it into your inline editor.

Safari on MacOS is a different kind of beast. The pasted HTML contains the images inlined as blob URIs, something similar but not completely interchangeable with data URIs.

There's a plugin for TinyMCE that promises to be able to paste the full HTML with the images and even call an upload handler with the image data. No idea if that one parses the RTF version of the clipboard instead or does some other magic.

But, OTOH, I really wouldn't want my users to paste formatted content from office apps. Been there, seen the disaster, and never want to go back there. It never plays well with surrounding HTML, it tends produce awful glitches when scaling things and in the end, the frustration on the users' side always far outweighs the initial convenience.

In case you're curious about the things available in your Windows system's clipboard, you can take a peek with InsideClipboard (that's how I took the screenshot above).

Edited July 24 by BitPoet

[theoretic]

Great answer @BitPoet, thanks! Personally I also avoid pasting from Word because the result is, umm, not very well predictable. But my clients ask for that time up to time, so I just wanted to be sure I'm not idiot, and all that copypaste problems are not my problems only.

[BitPoet]

Out of curiosity, I've created a small proof-of-concept module/plugin for InputfieldTinyMCE. If activated, it tries to fetch RTF clipboard content, parse that to HTML (with images as data: URLs) and insert the result, overriding TinyMCEs default paste behavior. I only did a small test so far. Maybe you'd like to do a test drive.

https://github.com/BitPoet/RtfPasterTinyMce

It uses https://github.com/tbluemel/rtf.js for the heavy lifting.

Edit: forgot to say: this could of course be expanded to extract the image data, upload that to a dedicated image field through PW's standard upload endpoint and use the URL of the uploaded image in the inserted HTML.

Edited July 24 by BitPoet

[BitPoet]

I just played around and enabled the "Image fields for ImgUploads" in InputfieldTinyMCE's module settings. Then I selected an existing image field in the identically named select in my TinyMCE field's Input settings. Pasted from Word to my field and the image got uploaded without any further changes on my part!

[JanetMahon]

  

On 7/25/2024 at 1:10 AM, BitPoet said:

Out of curiosity, I've created a small proof-of-concept module/plugin for InputfieldTinyMCE. If activated, it tries to fetch RTF clipboard content, parse that to HTML (with images as data: URLs) and insert the result, overriding TinyMCEs default paste behavior. I only did a small test so far. Maybe you'd like to do a test drive.

https://github.com/BitPoet/RtfPasterTinyMce

It uses https://github.com/tbluemel/rtf.js for the heavy lifting.

Edit: forgot to say: this could of course be expanded to extract the image data, upload that to a dedicated image field through PW's standard upload endpoint and use the URL of the uploaded image in the inserted HTML.

You're not alone in facing this issue. Unfortunately, pasting from docx/odt files into CKEditor or TinyMCE often doesn't handle images well, especially on Windows. You might need a custom solution or plugin to automatically save images to a dedicated image field. Alternatively, manually uploading images and then pasting text could be more reliable. Writing a persuasive essay can be challenging, especially when you're short on time. That’s why I decided to try https://academized.com/buy-persuasive-essay The experience was fantastic! The essay was structured well, with strong arguments and solid evidence. It was clear that the writer understood the topic deeply. I was so pleased with the outcome, and it really boosted my grade. I would highly recommend this service to anyone struggling with persuasive essays.

Thank you so much for the help.

 

Edit: My problem is resolved.

Edited August 22 by JanetMahon