module Rtf Paster for TinyMCE [proof of concept]- Paste formatted text and images from your word processor

[BitPoet]

Since it came up in this question and I had some time to kill in front of my computer waiting for updates to finish which I had to verify, I got curios whether copy & paste from Word on Windows into a TinyMCE editor field could be made to insert the formatted text and keep the images. Surprisingly, with the help of rtf.js, this went pretty quickly. Ryan already built automatic upload functionality (called ImgUpload) into the TinyMCE field, so I only had to enable the option and select a target field.

Even though pasting word processor generated HTML is and always has been a sin, I built a small module for it anyway. I called it (I know, it sounds a bit clunky, but it was the best I could come up with, I'm a backend guy):

RtfPasterTinyMce

Usage

• Download the contents of this repository and unpack into a folder in site/modules
• Open ProcessWre admin and select Modules -> Refresh
• Click "Install" for "Rtf Paster TinyMCE"
• Go to "Fields" and select your TinyMCE field where you want to paste office content including images
• Check "rtfpaster" in "Additional plugins" on the "Input" tab and save your field configuration
• Edit a page with that field and copy a passage that contains both text and images from MS Word into your TinyMCE field. You should see your images there.

Advanced

• Go into InputfieldTinyMCE's module settings and enable "Image fields for ImgUpload"
• Edit your TinyMCE field and select an existing image field in the "Image fiels for ImgUpload" select on the Input tab
• Paste some text / images mixture from your word processor MS Word

Tadaa! Your images are magically uploaded into the selected field.

Since the RTF doesn't contain any information about the file name of the source image, your uploaded images will be named fieldname.png, fieldname-1.png, fieldname-2.png etc.

Keep in mind that this is so far a proof-of-concept module and hasn't been tested with different scenarios and source applications yet. Don't use it in production unless you feel confident to fix any errors yourself!

Edit: Only successfully tested with MS Word. Not working with LibreOffice's RTF.

Edited July 25 by BitPoet

[BitPoet]

Update after a little more testing: it seems that rtf.js is unable to parse the image data when I paste from LibreOffice Writer and drops it silently ? Pasting from MS Word works.

[BitPoet]

It seems that I'll have to rename the module if I really decide to pursue developing it (which I doubt more and more). rtf.js unfortunately can't deal with the different dialects of RTF. I've removed the dependency and hacked together a pretty dirty regular expression that extracts image data from the RTF clipboard contents, then looks for img tags in the HTML contents and replaces the src for every found image with the extracted images in the same order. Whether that is practicable outside of my simple test cases is up for discussion. So far, the images always came in the same order in both formats.

I'm currently only extracting PNG and JPG and insert a placeholder for others. I'm beginning to understand why TinyMCE's PowerPaste plugin is commercial.