CKEditor and TinyMCE integration

chschschs · 2025-01-27T19:24:09+00:00

Hello, Is it possible to add CKEditor and TinyMCE integration? It would be great marriage! Regards!

steveatsilver

Thanks, sounds great, look forward to the new release! Have a great day! 🙂

steveatsilver

Morning Karl, hope you are well, just wondered if you will be releasing a new version anytime in the next week, which might include this new custom click function?

Karl

steveatsilver Yes, I'm currently trying to wrap up the new release. Should be a few days, definitely well within next week.

steveatsilver

Karl Superb thanks for the update, that will work out perfectly for our weekend of internal development we have booked in 🙂

Karl

steveatsilver Files Gallery 0.13.0 is out with new custom _c.config.on_click function. Basically:

_c.config = {
  on_click: (e, item) => {
    if(item.is_dir) return; // return falsy value to continue with default click functionality
    console.log('item', item); // contains all properties for the clicked item
    e.preventDefault(); // preventDefault() if you intend to return true and want to block default browser <a> link click
    my_function(item); // do your own thing using the item properties object
    return true; // return truthy value to exit and prevent further click functionality
  }
}

Karl

steveatsilver Files Gallery 0.13.0 is out with new custom _c.config.on_click function. Basically:

_c.config = {
  on_click: (e, item) => {
    if(item.is_dir) return; // return falsy value to continue with default click functionality
    console.log('item', item); // contains all properties for the clicked item
    e.preventDefault(); // preventDefault() if you intend to return true and want to block default browser <a> link click
    my_function(item); // do your own thing using the item properties object
    return true; // return truthy value to exit and prevent further click functionality
  }
}

steveatsilver

Amazing thanks 🙏👍 appreciate you rolling out this update so quickly

stefano

Dear Karl,

Thank you so much for the amazing work! I’ve just come back after a few months and tested your latest update — it works like a charm.

I don't know if I can dare to ask if another improvement is possible 🙂 : ideally, the click event should be handled only on the selection icon (the green icon shown in my attached image), rather than on the entire file. This way, users can still click on a file to preview its contents, and then use the dedicated icon to select it when needed.

Would it be possible to apply the same logic from your latest update specifically to the icon with selector #files .svg-check-select?

Thanks again for your time and support!

Karl

stefano Sorry for the late reply. I had to enable forum "approval" because of spam, but didn't see notifications about replies.

What you ask, can be done. However, may I ask what you are going to do when user clicks the checkbox? The reason I ask, is because the checkbox is supposed to be toggle ON/OFF on click, so it would seem strange and unintuitive if you are opening new windows or block the behavior in any way. If you did that, then how would the user be able to actually select multiple files?

stefano

Dear Karl,
thank you for your kind reply—no worries at all.
You're absolutely right: this functionality is intended solely to allow the selection of a single image.
In fact, when using the TinyMCE editor, users are typically allowed to insert only one image at a time, so this behavior aligns with the expected user experience.

Karl

stefano You're absolutely right: this functionality is intended solely to allow the selection of a single image.

So you mean you want the normal click to open and display images as normal, but then only have the CHECK icon select the file and forward to TinyMCE? The problem here is that the checkbox button is part of Files Gallery's own multi-select. It's not meant to be able to do "other things" alternative things, like in your case you want to override it and do something completely different. Furthermore, with the Select-icons enabled, you would need the select interface enabled, which means users could mass select by keyboard or chose the "select mode" option:

So basically what you are asking, is "I want to use the select icon on the image for something completely different". I guess I could create some separate on_select_click: (e, item) => { ... }, although then you would also want to disable other "select" features so that users can't access the native select features with keyboard (for example ctrl-a = select all) ...

stefano

Dear Karl,

You’re right again 🙂. I’ve configured the files.gallery plugin to allow single-file selection via the select icon. This choice is because:

Clicking on an image is still useful for opening its details rather than selecting it.
After a single click selection, the plugin should immediately close and return control to the TinyMCE editor.

I would have liked to share a video of my usage, but I see that’s not possible here. Anyway, I’ve managed to handle the situation with the code I initially posted, using a MutationObserver to attach my custom click event override.

If, at some point, you provide a built-in option to override this event directly, I would be truly grateful!

Karl

Added new on_select Javascript config option in latest release 0.14.0.

Really it just allows you to piggyback the event for your own usage.

// passes e(event) and item object properties
on_select: (e, item) => {
  console.log('on_select', item);
}

« Previous Page