You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#117261 Drag and drop of custom element gives an error due to the changes to tinymce.js

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by ebura on Monday, 07 July 2025 09:47 BST

ebura

I developed a custom JCE plugin, that is meant to be able to be dragged and dropped.

The outer HTML is this: 

<div class="jce-custom" contenteditable="false">bla</div>

And I can edit it via a modal (a bit like the codesample that you have this editor).

But with the latest JCE update (2.9.88) the tinymce.js (/media/com_jce/editor/tinymce/tinymce.js) has an addition of code that breaks my drag and drop!
At the Pro version it is at line 5046. If I comment that part it works again.
At the lite version it is at line 4514:

var content = editor.selection.getContent({
                        contextual: !0
                    });
                    content && (content = function(content) {
                        return content = DOM.create("div", {}, content), each$4(DOM.select("[style]", content), function(elm) {
                            var style = elm.getAttribute("style");
                            style && elm.setAttribute("data-mce-style", style);
                        }), content.innerHTML;
                    }(content), e.dataTransfer.setData("x-tinymce/html", content));

The error that I get when I drag is this:

Uncaught TypeError: Cannot read properties of undefined (reading 'setData')
    at tinymce.dom.DOMUtils.<anonymous> (tinymce.js?1b35178c34959337c60cba275a087ef0:5055:48)

Could you take a look a this? (will commenting this part break something?)

Ryan

At the top of the function, add a check for e.dataTransfer, eg:

editor.dom.bind(editor.getBody(), 'dragstart', function (e) {
        if (!e.dataTransfer) {
            return;
        }

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

ebura

Nice one, thank you.

Will you add this change to the next version?

Ryan

Will you add this change to the next version?

Yes.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan

It might / should probably include the following (please test):

editor.dom.bind(editor.getBody(), 'dragstart', function (e) {
        if (e.isDefaultPrevented()) {
            return;
        }
        
        if (!e.dataTransfer) {
            return;
        }

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

ebura

Works fine, no errors and expected behaviour.