javascript - TinyMCE - Chrome browser - Can't paste images in Chrome as in FF - Stack Overflow

admin管理员组

文章数量:1278880

I'm using the TinyMCE WYSIWYG editor control and while it is possible to copy and paste image fractions in FireFox, it is impossible in Chrome.

I've tried upgrading to TinyMCE ver. 4.0.16 (previously had ver. 3.5.8) with still no possible way to make it work.

Has anyone been able to do this?

Example to how this looks in FireFox:

Thanks in advance!

I'm using the TinyMCE WYSIWYG editor control and while it is possible to copy and paste image fractions in FireFox, it is impossible in Chrome.

I've tried upgrading to TinyMCE ver. 4.0.16 (previously had ver. 3.5.8) with still no possible way to make it work.

Has anyone been able to do this?

Example to how this looks in FireFox:

Thanks in advance!

• javascript
• image
• google-chrome
• firefox
• tinymce

Share Improve this question Follow asked Feb 6, 2014 at 16:09 David DayagDavid Dayag 1,3401212 silver badges1414 bronze badges 4

• You sure there's no console errors (F12) when trying to paste? Last reported error seemed to be in 4.0.9 (Which you are obviously higher) – MackieeE Commented Feb 6, 2014 at 16:25
• I can reproduce. Using latest Chrome Canary. Hope you find a solution – chiliNUT Commented Feb 7, 2014 at 17:59
• No console errors, just plain doesn't work. – David Dayag Commented Feb 8, 2014 at 18:44
• This is not an error of TinyMCE, CKEditor doesn't work too, I think that this is a block of Chrome and IE, but I can't found a solution for this yet :( – Cesar Commented Sep 3, 2014 at 13:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I found a solution for this issue, and it has been tested using Chrome v 47. Here is what you have to do:

function pasteHandler(e) {
   var cbData;
   if (e.clipboardData) {
      cbData = e.clipboardData;
   } else if (window.clipboardData) {
      cbData = window.clipboardData;
   }

   if (e.msConvertURL) {
      var fileList = cbData.files;
      if (fileList.length > 0) {
          for (var i = 0; i < fileList.length; i++) {
              var blob = fileList[i];
              console.log("Image blob: " + blob);
              readPastedBlob(blob);
         }
     }
 }
 if (cbData && cbData.items) {
     if ((text = cbData.getData("text/plain"))) {
         // Text pasting is already handled
         return;
     }
     for (var i = 0; i < cbData.items.length; i++) {
         if (cbData.items[i].type.indexOf('image') !== -1) {
             var blob = cbData.items[i].getAsFile();
             readPastedBlob(blob);
         }
     }
 }

function readPastedBlob(blob) {
    if (blob) {
        reader = new FileReader();
        reader.onload = function(evt) {
            pasteImage(evt.target.result);
        };
        reader.readAsDataURL(blob);
    }
}

function pasteImage(source) {
    var image = "<img src='" + source + "' data-mce-selected='1'></img>";
    window.tinyMCE.execCommand('mceInsertContent', false, image);
}}

In the init method of you tinyMCE:

tinymce.init({
    selector: "textarea", // change this value according to your HTML
    paste_data_images: true,
    setup: function(editor) {
        editor.on('paste', pasteHandler)
    };
})

I've just got this working.

Remove "Paste" from the plugins list and set "paste_data_images: true"

Works a treat!

I just answered this question. Here's a link to my answer: TinyMCE "paste button" does not work

at time of the configuration of Tiny MCE, use this to get Chrome to work:

tinymce.init({ selector:'textarea', plugins: [
        "image paste"
    ],
    paste_data_images: true});

本文标签： javascriptTinyMCEChrome browserCan39t paste images in Chrome as in FFStack Overflow