TinyMCE Not updating <img> src after uploading image successfully

Question

I have ran into a problem using TinyMCE in Handling Async Image Upload using Servlet as backend.

There are two major problems:

Even after using paste plugin and setting paste_data_images:true, images are not getting automatically pasted while pasting together with text from MS Word, only text got paste and images getting missed, whereas, when I paste an image alone it is getting pasted.
After pasting images, TinyMCE supposed to upload them asynchronously and update <img>'s src attribute to the location property returned by the json from backend.

Now the problem arise here that when I paste the image alone it gets automatically uploaded in backend and proper response is coming back with image's location as a JSON, I have verified that with browser console and also via manual Image Insert option. But after all this the <img scr> is being blank and the image turned into black boundary.

Please help me if anyone have faced similar issue whereas back end can be anything, as I don't think it is a problem with back end.

The Code:

TinyMCE:

<script type="text/javascript" charset="utf-8">
            tinymce.init({
                selector: '#description',
                plugins: "image link imagetools codesample emoticons autoresize textcolor table preview wordcount paste",
                menubar: 'edit | format | insert | table',
                toolbar1: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                toolbar2: 'forecolor backcolor | codesample emoticons',
                automatic_uploads: true,
                images_upload_url: 'uploadFile',
                images_upload_credentials: true,
                images_upload_base_path: '',
                paste_data_images: true,
                file_browser_callback_types: 'image',
                convert_urls: false,
                file_browser_callback: function(field_name, url, type, win) { 
                    tinymce.activeEditor.windowManager.open({
                        title: "File Browser",
                        type: "image",
                        url: "uploadFile",
                        width: 550,
                        height: 200
                    }, {
                        oninsert: function(url) {
                            win.document.getElementById(field_name).value = url; 
                        }
                    });
                }
            });
        </script>

Back end Response after image upload:

[{ "location": "./uploaded/images/201617175645_blobid0.png" }]

<img> tag after image upload:

<img src="" alt="" data-mce-src="" data-mce-selected="1">

Chrome console show no exception or warning at all while pasting image or after uplooding it. Please let me know if anyone have any solution for the problem or some way to get the actual reason behind it. Let me know if anything need more explanation above.

Michael Fromin · Accepted Answer · 2016-01-07 16:10:24Z

2

Your question comes down to what gets placed in the clipboard when you copy/paste content from MS Word.

When you copy/paste a combination of text and images Word places an HTML document in the clipboard that represents the copied content. In this scenario, images are part of the content via <img> tags. The src of these <img> tags point to image files in a temp directory on your hard drive. Due to the sandboxing of JavaScript in the browser, the editor cannot actually access these image files on your hard drive. The images are not included in the pasted content as there is no way for TinyMCE to render them or upload them to your server.

When you copy/paste just an image Word places a binary (typically base64) representation of that image in the clipboard. In this scenario, TinyMCE is able to grab that binary representation and inject a base64 encoded image into the content hence you get the image.

As for the image upload capability in TinyMCE... that only works for base64 and blob encoded images that end up in TinyMCE via operations like copy/paste and drag/drop - this is why its working as you expect when you copy/paste only an image and not when you copy/paste a document with text and images.

There is a commercial add-on to TinyMCE (Power Paste Plugin) that actually would solve your issue around Word documents. This plugin is offered as a part of TinyMCE Enterprise - a commercial TinyMCE offering from Ephox (the owners of TinyMCE). [For full disclosure I work for Ephox] If you want to have images from Word docs get injected into the content you can learn more about this option at: https://www.tinymce.com/pricing/

As for your issue with the image src not getting updated... the JSON response object should be a simple JSON object

{ "location": "./uploaded/images/201617175645_blobid0.png" }

... not ...

[{ "location": "./uploaded/images/201617175645_blobid0.png" }]

You are returning an array containing one JSON object when TinyMCE expects a simple JSON object.

answered Jan 7, 2016 at 16:10

Michael Fromin

13.9k2 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Asif Over a year ago

thank you so much, I had pointed out JSON array problem before you answered and corrected code, for Problem 1, thanks so much for the insight info that is something I had never got from anywhere. But my question here is why TinyMCE documentation says that it is possible to paste images as well with paste_data_images option, is it just for base64 i.e. just for when we copy only image data??

Michael Fromin Over a year ago

@Asif - you can paste images into the editor ... if the source is appropriate. Some sources of copy/paste & drag/drop lead to base64 or blob encoded content while other sources don't. When the source provides the image(s) in a format that can me accessed by TinyMCE it should add them to the content. You will find that this is inconsistent across browsers and that in some use cases the same action will not always provide base64 encoded images when performed in different browsers.

Asif Over a year ago

Yep I see now how it works. Have to live with some limitation if don't want to shred extra $ :)

Collectives™ on Stack Overflow

TinyMCE Not updating <img> src after uploading image successfully

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related