Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set data URI in TinyMCE

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?

like image 425
naXa Avatar asked Dec 11 '15 12:12

naXa


People also ask

How do you add a link to TinyMCE?

Add hyperlinks to content. The toolbar button and menu item called link are included in TinyMCE's default configuration. The link menu item can be found in the Insert menu. The link plugin also includes a context menu and context toolbar.

How do I upload a file to TinyMCE editor?

Click the 'Insert/Edit Image' button, then click the 'Upload' tab. Alternatively, drag and drop an image here. All image uploading options are supported, including images_upload_handler (a way to define custom file uploader) and images_upload_credentials .


1 Answers

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.

like image 200
naXa Avatar answered Oct 08 '22 10:10

naXa