Uploading Image (Local) to Tinymce - html

Question

I would like to ask if there is any plugin available that is able to upload image from my local system to tinymce? Tinymce has an image upload but for online images. Furthermore, the uploading of images from local system is an advanced feature of tinymce, needs to be bought. So, is there a free plugin I can use to integrate uploading of images from local system to tinymce? Thanks! :)

Answer 1

You could write an own plugin and insert your images as a base64-encoded string.
Example: You will need to fetch a javascript function from the web and create the string my_image_base64_string (already given here). The snippet shows howto insert the image afterwards. Using an own plugin you will be able to create a button and use for example a popup.
var my_image_base64_string = 'R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7';
tinymce.activeEditor.execCommand('insertHTML', false, '<img src="data:image/gif;base64,' + my_image_base64_string + '" width="16" height="14">');

Answer 2

I have created a plugin on Github Which allow you to upload image and as a embed , after that image will automatically converted to Base64 data string the plugin is found on the link below:
https://github.com/buddyexpress/bdesk_photo

Answer 3

You can create custom button:
tinymce.init({
selector: `#${this.props.id}`,
...
toolbar: '... uploadimage ...',
paste_data_images: true,
setup:
...
editor.addButton('uploadimage', {
text: '',
icon: 'image',
onclick: this.uploadImage,
});
},
})
And uploadImage function:
uploadImage() {
var editor = tinymce.activeEditor;
// create input element, call modal dialog w
var fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
// if file is submitted run our key code
fileInput.addEventListener('change', () => {
if (fileInput.files != null && fileInput.files[0] != null) {
// create instance of FileReader()
let reader = new FileReader();
// create event triggered after successful reading operation
reader.onload = (e) => {
// insert content in TinyMCE
editor.insertContent('<img src="' + e.target.result + '">');
fileInput.value = '';
};
reader.readAsDataURL(fileInput.files[0]);
}
});
fileInput.click()
}
After this you should see your base64 image in the editor.