The problem occurs when you tab into the text editor instead of clicking on it.

If you are not focused on the text editor and use tab to move into the text editor, the editor will not properly focus on the line where the cursor appears. This doesn’t generally cause problems for most text editing purposes – until one tries to paste an image. The Redactor text editor does not seem to pick up on the fact that an image is pasted – and thus will not call the function that the user has supplied to Redactor to be run on image paste.

You can replicate this on the Redactor home page – Imperavi.com. Delete everything in the text editor, then unfocus the editor by clicking outside of it, then use tab to move your cursor into the editor, and finally – with a picture loaded into your clipboard – use ctrl + v to paste the image into the editor. If you use the inspection tool you will see that the image has not been wrapped in a figure tag – which is what usually happens when an image is input into the editor while it is correctly highlighted, or via dropping, or with the image input box.

Has anyone else experienced this issue? Any suggestions other than setting the tabIndex to -1 and not allowing people to tab into the editor – I would like for people to be able to do this.

Here is the configuration I use for this text editor:

Redactor(‘#EmailBody’, {
minHeight: ‘300px’,
embed: false,
command: false,
paste: {
plainText: true,
},
toolbar: {
target: ‘#toolbar-placeholder’
},
buttons: {
toolbar: toolbarOptions,
},
image: {
url: false,
// move to function in collection.js when wanting to
// use again on other pages
upload: function (upload, data) {
// increment the image count
let imageCount = parseInt($(‘#ImageCount’).val());
$(‘#ImageCount’).val(imageCount + 1);

        // create new file input
        let fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.name = 'Image' + imageCount;
        fileInput.id = 'Image' + imageCount;
        fileInput.style.display = 'none';
        fileInput.accept = 'image/png, image/jpeg';

        // store image in file input
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(data.files[0]);
        fileInput.files = dataTransfer.files;

        $('#image-uploads-store').append(fileInput);

        // file url
        let fileUrl = URL.createObjectURL(data.files[0]);

        // create response
        let response = {
            "file": {
                "url": fileUrl,
                "id": `Image${imageCount-1}`,
            }
        };

        // call complete
        upload.complete(response, data.e);
    }
}

});

Pretty much the upload function will create a hidden file input and put the image in there so we can retrieve it from the request on the postback – but that function is irrelevant to the problem. The issue is just that this function does not run when the editor is properly focused.

Using Redactor v4.1.4 and jQuery 1.8.2

Notes:

• plainText: true shouldn’t interfere because it avoids images
• I’ve looked through the documentation to see if there is anything to do with tabbing into the editor but there is nothing
• I’ve tried using the editor.paste.before function to interrupt it somehow but it does not run when the editor isn’t properly focused and you paste an image

I’m expecting that when a user uses tab to enter the editor that it focuses properly and the images paste appropriately and the function runs.