javascript - Including image into html email using tinymce

Question

I am trying to add an image to a tinymce text area which is used to create an html email. All is working to an extent but I have a couple of queries:

When the image is selected I get 'blob' appearing at the beginning of the source, which I can't quite understand:

And if I continue then I see that the src tag loses the full path and remains as just the folder and filename only. This means that the recipients of the email can't view the image.

I have slightly adapted the example from 'tinymce' but not sure what to change to fix these two errors:

tinymce.init({
    selector: '#email_text_area',
    plugins: [
        "advlist lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern" ],
    image_title: true, 
    automatic_uploads: true,
    images_upload_url: 'image_acceptor.php',
    file_picker_types: 'image', 
    file_picker_callback: function(cb, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');

        input.onchange = function() {
            var file = this.files[0];
            var id = (new Date()).getTime();
            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
            var blobInfo = blobCache.create(id, file);
            blobCache.add(blobInfo);
            cb(blobInfo.blobUri(), { title: file.name });
        };
        input.click();
    }
});

UPDATE:

It seemed that the image_acceptor.php needed to be changed to:

$filetowrite = "/home/..server-side public folder../email_images/" . $filename;

to write the image to the correct folder on the server and then change $filetowrite for the json response to the actual URL of the image:

$filetowrite = "https://.. url ../email_images/" . $filename;

This did not fix the 'blob' in the source dialog but did fix the image in the html source problem.

Answer 1

Perhaps you will need to configure URL Handling:

try to add these lines:

tinymce.init({
    convert_urls: false,
    relative_urls: false,
    remove_script_host: false
});

defaults were all true.