tinymce-react image handle image base64 code example

Example 1: how to remove base_64 encoding of image in tinymce editor

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()
    }

Example 2: how to remove base_64 encoding of image in tinymce editor

tinymce.init({
        selector: `#${this.props.id}`,
        ...
        toolbar: '... uploadimage ...',
        paste_data_images: true,
        setup: 
            ...
            editor.addButton('uploadimage', {
                text: '',
                icon: 'image',
                onclick: this.uploadImage,
            });
        },
    })

Tags:

Misc Example