Set data URI in TinyMCE

Question

TinyMCE init options

$scope.tinymceOptions = {
    plugins: 'base64img image imagetools paste ...',
    relative_urls: false,
    paste_data_images: true,
    ...
};

paste_data_images: true option means that data:url images (inline images) should NOT be removed from the pasted contents (see docs).
I use TinyMCE 4.2.8. Inside base64img plugin I've written the following code

var editor; // TinyMCE editor
var imgData; // base64 image data string, like "data:image/png;base64,...="
editor.setContent("<img src='" + imgData + "' />", {format: 'raw'});

// editor.execCommand('mceInsertRawHtml', false, '<img src=\'' + imgData + '\' />');  // another way

to embed an image which is loaded in memory as base64 string. After the command is executed img src is magically converted into 'blob:http%3A//localhost%3A8080/...'. Why?

It works (images are displayed), but I want to store images as data: rather than upload them to server and store as blob. How to change this behaviour?

naXa naXa · Accepted Answer · 2015-12-14T12:00:33

Image is saved internally as 'data:image/png;base64,...=', so you don't need to worry. No uploading is performed, 'blob:http%3A//localhost%3A8080/...' is used for displaying an image info only.

Set data URI in TinyMCE

1 Answers