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:
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.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.