TinyMCE droping html element not allowed with Chrome and Edge

I’ve an issue with Chrome and Edge, about dropping. I have on the right side of my html page, html elements I can drop. On the left side, the tinymce editor. Everything about the editor is set correctly, I have look up for a lot of solutions to resolve my issue, but without success.

The aim is to drag an element from the right, and to drop it on the editor. If i have some text on the editor, it has to be dropped at the caret position of the editor where the mouse with the dragging element is. With firefox, it works well, I have no problems.

Issues with Chrome and Edge:

  • When I have dragged the element, and I start to go in the editor, the css cursor is ‘not-allowed’
  • I added the parameter auto_focus : 'tinyid' at the initialization of the editor (no need to do it on Firefox), where tinyid is the id of the textarea containing the tinymce editor.
  • The solution I had, was to click at a caret position in the editor where I want to drop my element, to start dragging my element, but to not go in the editor, and to drop it after dragging it. It will appear at the caret position i clicked on before.

About solutions I tried:

To set the focus

  • tinyMCE.activeEditor.focus();
  • tinymce.execCommand("mceFocus", false, "tinyid");
  • tinyMCE.get('tinyid').focus();

To get the selection and the caret position with:

  • var objSelection = tinyMCE.activeEditor.selection.getSel();
  • var intCaretPosition = objSelection.anchorOffset;

But all of this is not working. I repeat it works on Firefox. To drag and drop, I use this:

$('.blocUndragged') 
.bind('dragstart', function(event, ui){
    // start
    tinymce.execCommand("mceFocus", false, "tinyid");
    })
.bind('drag', function(event, ui){
    // while 
    tinymce.execCommand("mceFocus", false, "tinyid");
    })
.bind('dragend',   function(event, ui){
    // end
    tinymce.execCommand("mceFocus", false, "tinyid");
    moveElementDraggedIntoEditor(event);});

The function moveElementDraggedIntoEditor(event), is a function where I reworked the html element I dropped, to reformate it.

If you need more precisions, I will try to add some codes.

Thank you for trying to find a solution about my issue.