Copying/pasting text with an image from Word breaks the image

[sbevels]

Copying/pasting text with an image from Word breaks the image

Steps for Reproduction

1. Visit quilljs.com
2. Copy image and text below the image from Word
3. Paste into Quill

Expected behavior: The image and text are copied into Quill.

Actual behavior: The text is copied but the image is broken. <img width="300" height="300" src="//:0">`

Copying an image from Word by itself works just fine.

Platforms: Firefox, Windows.

Version: 1.1.7

[benbro]

Please share a Word document that reproduces this issue. You can upload the doc to google drive or dropbox.

[sbevels]

Here you go: https://dl.dropboxusercontent.com/u/50682782/TestFile.docx

[wdoyle]

I can confirm this still happens but this can also happen with only copying an image from any Microsoft product as Word and Outlook.

Version: 1.3.2

Steps to reproduce:

1. Copy an image from Outlook (such as an email signature)
2. Paste into QuillJS

Expected Behaviour: Image is pasted into the editor

Actual Behaviour: Image is pasted with the image src inside the ALT tag and the src address shows src="//:0"

[stas-kh]

Guys, do you have any updates on this? Do you plan to fix it somehow?

[wdoyle]

In Angular I use the following code to fix it for now - but still has no guarantee. If the file is not hosted ie from the temp directory from Outlook then it still won't work.

$ctrl.$scope.$watch('$ctrl.ResponseHTML', function (newVal) {

        if (newVal.indexOf('src="//:0') !== -1) {

            $ctrl.$timeout(function () {

                $ctrl.ResponseHTML = newVal.replace('src="//:0" alt="', 'src="');

            }, 0)

        }})

[stas-kh]

@wdoyle Thanks for your solution. But, it doesn't help me a lot. The only one way I need this fix is to support screenshots if they are listed in an email thread. Users just want to copy everything from their email, paste the text with images to the editor and see the results.

[Rinktacular]

For those who are interested, I am taking a look at this issue today as a requirement for a project I am working on. Any tips on how to include this library locally? Not sure how to get it included into a project to let me mess around with the source code, only see how to use CDN or NPM :(

[Rinktacular]

Within ./formats/image.js:line 34, there is currently this code:

return sanitize(url, ['http', 'https', 'data']) ? url : '//:0';

adding 'data' to that array of properties, will allow for users to paste from word (or any local application) to Quill

return sanitize(url, ['http', 'https', 'data', 'file']) ? url : '//:0';

However, this only works in Internet Explorer. Chrome and Firefox have security in place such that local files can not be read on the browsers. So I am trying for a work around to that.

From what I see, a lot of sites will upload images to a local image sharing site, such as imgur, to host the image online and then reference the newly created imgur image link as the img source, which is a possible solution, but does not seem realistic for Quill to use that method of image storage.

[hugorax]

Copying/pasting text with an image from Word breaks the image

MY ERROR similarly.

Steps for Reproduction

Visit quilljs.com Copy image and text from Word Paste into Quill Expected behavior: The image and text are copied into Quill.

Actual behavior: The text is copied but the image is broken. NAN If I copy only image work but copy both not working.

Im using 1.3.6 version.

what can I do, I am working with vue

[ailearningsolution]

Have same issue. Tinymce works in the same scenario.

[hugorax]

Have same issue. Tinymce works in the same scenario.

i fond this page but I don't know how to implement https://www.programmersought.com/article/75596458619/ you can help me say de page The requirement is this: Rich text can have the function of pasting text, but cannot paste pictures into the edit box, so Baidu has a solution soon:

[ailearningsolution]

Have same issue. Tinymce works in the same scenario.

i fond this page but I don't know how to implement https://www.programmersought.com/article/75596458619/ you can help me say de page The requirement is this: Rich text can have the function of pasting text, but cannot paste pictures into the edit box, so Baidu has a solution soon:

i am not sure how exactly it works. But the basical idea is:

• listen paste event
• use pastedata to get blob file and read the data url
• upload the data url to a cloud storage
• replace the local temp clip path by cloud storage url...

[Dobrobatko]

Has anyone solved this problem?