TinyMCE - Chrome browser - Can't paste images in Chrome as in FF
firefox, google-chrome, image, javascript, tinymce
Solution
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)
};
})
Problem
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!