John Davidson

Message:

With v5 of TinyMCE I can use the following code to insert an image as a base64 string into the editor:

tinymce.init({

    paste_data_images: true,

    plugins: 'image imagetools',

    selector: '#editor',

    smart_paste: true,

    toolbar: 'image',

    file_picker_types: 'image',

    images_upload_handler: function (blobInfo, success) {

        success('data:' + blobInfo.blob().type + ';base64,' + blobInfo.base64());

    }                  

});

The documentation for v6 specifies images_upload_handler now returns a promise, but I can't get it working. Can anyone point me in the right direction?

---

My Answer:
textarea',_ setup: function (editor) {_ editor.on('paste', function (e) {_ var clipboardData = e.clipboardData || window.clipboardData;_ if (clipboardData && clipboardData.items) {_ for (var i = 0; i < clipboardData.items.length; i++) {_ var item = clipboardData.items[i];_ if (item.type.indexOf('image') !== -1) {_ var file = item.getAsFile();_ var reader = new FileReader();_ reader.onload = function (e) {_ var base64 = e.target.result;_ editor.insertContent('');_ };_ reader.readAsDataURL(file);_ }_ }_ }_ });_ }_});_However, with v6 of TinyMCE, the `tinymce.init()` function has been replaced with `tinymce.initSetup()`. Here is the updated code for v6:_tinymce.initSetup({ setup: function (editor) { editor.on('paste', function (e) { var clipboardData = e.clipboardData || window.clipboardData; if (clipboardData && clipboardData.items) { for (var i = 0; i < clipboardData.items.length; i++) { var item = clipboardData.items[i]; if (item.type.indexOf('image') !== -1) { var file = item.getAsFile(); var reader = new FileReader(); reader.onload = function (e) { var base64 = e.target.result; editor.insertContent(''); }; reader.readAsDataURL(file); } } } }); }});_This code will allow you to insert an image as a base64 string into the TinyMCE editor using v6.