You can create a plugin e.g.
define(["tinymce"], function (tinymce) {
tinymce.PluginManager.add("dnd-events", function (editor) {
// Native-ish DOM events (TinyMCE forwards many of these)
editor.on("dragover drop dragstart dragend", function (e) {
// Your logic here
// e.preventDefault(); // only if you really mean to override default behavior
console.log("TinyMCE DnD event:", e.type, e);
});
// You can also use editor.getBody() to add DOM listeners if needed:
// editor.on('init', () => editor.getBody().addEventListener('drop', ...));
});
});
And register it in CMS 12
services.Configure<TinyMceConfiguration>(config =>
{
config.Default()
.AddExternalPlugin("dnd-events", "/alloy/plugins/dnd-events.js")
.AddPlugin("dnd-events");
});
This doesn't connect the .Net events to TinyMCE if that what you wanted.
Optimizely already ships an epi-dnd-processor plugin that’s required for dragging Optimizely content (blocks/pages) into TinyMCE. So if your goal is to react to those drops, your custom plugin should listen but be careful about preventing default or stopping propagation, because you can break the built-in drop behavior.
Hi Eric
Many thanks for your help. I think I can do something with this approach. What I'm trying to solve is the problem of editors dragging images from the media gadget and losing the alt text in the process. Just having some way to react to this should give me a hook in.
Cheers,
Daniel
That might work.
However we "usually" fetch the alt-text from the media item in the media display template.
Hi Eric
For what it's worth, I found that the drag/drop type events are only detected if they originate entirely within the TinyMCE IFrame, in this case within the editor area. So because the dragging in the use case I'm trying to handle starts in the media gadget area of the UI the events are either not fired or not detected, I'm not quite sure which. So this approach is sadly not feasible. Thanks for the advice anyway, it helped me learn some things about Optimizely and TinyMCE. I'm going to try looking into the Optimizely validation system as a place to catch the lack of alt text instead.
I'm trying to find a way to get TinyMCE in CMS 12 to handle events, specifically drag/drop events. I know it can be done in Javascript as described in the TinyMCE documentation - https://www.tiny.cloud/docs/tinymce/latest/events/ but I haven't been able to find any equivalent .net configuration using TinyMceConfiguration in CMS 12. Does anyone know if the .net setup / configuration for TinyMCE in CMS 12 covers event handling?
Thanks,
Daniel