CODEWITHSUNDEEP
jqueryhtmlimageservletstinymce
Asif
Asif

Reputation: 5038

TinyMCE Not updating <img> src after uploading image successfully

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

There are two major problems:

  1. 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.

  2. 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.

Upvotes: 1

Views: 3425

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13726

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.

Upvotes: 2

Related Questions