CKEditor and TinyMCE integration

chschschs

Hello,

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

Regards!

Karl

chschschs Is it possible to add CKEditor and TinyMCE integration?

You mean specifically to edit HTML files? I can only see them being useful to edit html. One issue I have, is that both these editors are paid, and I therefore don't see how to include them with Files Gallery.

chschschs

Karl Pardon me for not being precise! I meant using Files.gallery as a self hosted file manager for Tiny.MCE or CKEditor. All that's needed is integration. :-) https://www.tiny.cloud/docs/tinymce/latest/image/ https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html
From what I saw, the File.gallery would work perfectly. :-) Just click image/file icon in Tiny.MCE, browse/upload image or file, select and voila, inserted into editor. With that integration the File.gallery project would gain popularity imho.
Regards!

Karl

chschschs I'm generally not against it, but Files Gallery is a standalone app, and it would require a huge effort to make something that can be "embedded" into another app. It would need to be stripped of many features and styles, unless you use <iframe>, but that would already be possible.

chschschs

Karl I beg to disagree… :-)
From editor (Tiny.MCE/CKEditor) you only open Files Gallery in the new window. Then you use FG with all the features (browse,zoom, upload, copy, etc. just like standalone). You only need one JS callback function, which closes FG window and passes the URL of chosen file to the editor (the default action, when you click image/file in the "Tiny>mce/CKEditor mode" would be not zoom, but choose and go back to the editor, closing the window). So this is just one optional function (zoom -> callback with URL of chosen file + close window). The rest is the same as standalone FG. Plus initial plugin for Tiny.MCE/CKEditor, which wouldn't interfere with FG code.
Just my opinion. :-)

Karl

chschschs You only need one JS callback function, which closes FG window and passes the URL of chosen file to the editor

Where would this trigger though? You mean the user can navigate around in Files Gallery, but then after any "upload" it would suddenly close the window and return to the editor? I'm not against it, but I just don't see where it fits in. If I open an uploader from any editor, I would expect exclusively an uploader, not an extensive interface where I can get lost navigating images and folders in the menu.

Anyway, let's see, maybe I'm missing something ... Thanks for posting!

stefano

I hink that all we need is the possibility to hook functions after the selection event of a file.
For example, for the context menu, there is the 'action' option available.

contextmenu: {
rotate: {
text: 'rotate',
// icon name, or include custom icon <path d="..."> value from https://pictogrammers.com/library/mdi/
icon: 'rotate_right',
// condition for button to display
condition: (item) => {
return item.browser_image;
},
// href: (item) => { return item.url_path; },
// do something on click
action: (item) => {
console.log(item); // item object
},
class: 'mybutton'
},
},

and I think we should have the same for the selection event, so we can hook a function to pass to the tinyMCE plugin.

Karl

stefano and I think we should have the same for the selection event, so we can hook a function to pass to the tinyMCE plugin.

You mean trigger an event every time image(s) are selected to be uploaded from the upload plugin? Keep in mind, selecting the images and uploading them aren't the same process. Or do you mean trigger an event after each image or each image batch is completely uploaded?

It may be possible, but it's not related to the contextmenu option, which is native to Files Gallery, and specifically created to allow adding a custom button. With uploader, we need to trigger events from an external plugin, and it doesn't seem clear exactly what event you want triggered.

stefano

I mean triggering an event every time an image is selected (e.g., by clicking on the ✅ icon).
I believe this would be a great addition, making integration with TinyMCE much easier—while also increasing the appeal of your plugin! Many users are looking for this functionality, and I find your plugin exceptionally well-designed: clean, efficient, and overall, just perfect.

Personally, I implemented the integration I needed by writing some JavaScript in custom.js. Specifically, I observed mutations in the div that hosts the images and attached my handleClickSelect function to the event like this:

var targetNode = document.getElementById('files');

var observer = new MutationObserver(function(mutationsList, observer) {
mutationsList.forEach(function(mutation) {
if (mutation.type === 'childList' || mutation.type === 'characterData') {

        document.querySelectorAll(".svg-check-select").forEach(function (element) {
            element.removeEventListener("click", handleClickSelect);
            element.addEventListener("click", handleClickSelect);
        });
    }
});

});

var config = { childList: true, subtree: true, characterData: true };

observer.observe(targetNode, config);

function handleClickSelect(event) {
//my code
}

Karl

stefano I mean triggering an event every time an image is selected (e.g., by clicking on the ✅ icon).
I believe this would be a great addition, making integration with TinyMCE much easier

I'm having problems figuring out what the "select" option in Files Gallery has to do with TinyMCE. It certainly has nothing to do with uploading files, which seems to be the question in this post. What will you do in TinyMCE when a file is selected in Files Gallery?

stefano

As "chschschs" wrote:
"Just click image/file icon in Tiny.MCE, browse/upload image or file, select and voila, inserted into editor."

However, the real question here is about the full integration with TinyMCE:

Clicking the image/file icon in TinyMCE → This step simply configures TinyMCE to call an external plugin, in this case, the files.gallery plugin.
Browsing/uploading an image or file → This part is seamlessly handled by the excellent files.gallery plugin.
Selecting and... → Not quite voilà! 😅 because this is where the missing piece comes in—the ability to handle a custom select event within the files.gallery plugin.

The purpose of this select event, which is already in my code handleClickSelect(), is to close the external browsing plugin and return the selected image path to TinyMCE so that it can be inserted into the editor.

As I mentioned, I solved the issue by adding an observer. However, exposing a select event could be a great enhancement for future versions.

Karl

stefano The purpose of this select event, which is already in my code handleClickSelect(), is to close the external browsing plugin and return the selected image path to TinyMCE so that it can be inserted into the editor.

I think I am starting to understand now ... So this isn't specifically related to "uploading" files. But instead is about using Files Gallery to be able to SELECT files for insertion into TinyMCE. The selected files may of course already exist there when Files Gallery is opened, so is not necessarily about "uploading"

stefano

Exactly, Karl. I'll share the rest of my code in full to give you more insight.
This is in the code in files_galley/js/custom.js:

var observer = new MutationObserver(function(mutationsList, observer) {
mutationsList.forEach(function(mutation) {
if (mutation.type === 'childList' || mutation.type === 'characterData') {
console.log('The content of the div has changed:', mutation);

        //document.querySelectorAll(".svg-check-select, .files-a").forEach(function (element) {
        document.querySelectorAll(".svg-check-select").forEach(function (element) {
            element.removeEventListener("click", handleClickSelect);
            element.addEventListener("click", handleClickSelect);
        });
    }
});

});

// Specifies which types of mutations to observe
var config = { childList: true, subtree: true, characterData: true };

// Starts observation
observer.observe(targetNode, config);

// This function is applied when clicking on selection objects and communicates with TinyMCE
function handleClickSelect(event) {
let clickedElement = event.target; // The element that was clicked
let parentLink = clickedElement.closest("a"); // Finds the closest ancestor <a> element

if (parentLink) {
    var fileUrl = parentLink.getAttribute("href");
    console.log(fileUrl);

    // Communicates the file URL to the TinyMCE window
    if (fileUrl) {

        // Case when using a browser window as the container for files_gallery
        if (window.opener) {
            window.opener.postMessage({ fileUrl: fileUrl }, "*");
            window.close(); // Closes the file manager after selection
        }

        // Case when files_gallery is inside a Bootstrap modal
        else {
            window.parent.postMessage({ fileUrl: fileUrl }, "*");

            if (window.parent.$) {
                window.parent.$('#fileManagerModal').modal('hide');  // Closes the Bootstrap modal after selection
            }
        }
    }
} else {
    console.log("No <a> element found as an ancestor.");
}

}

And this the code from the tinymce side:

tinymce.init({
license_key: 'gpl',
selector: 'textarea',
.......

file_picker_callback: function(callback, value, meta) { // Functionality through Bootstrap modal
var fileManagerUrl = '/path/files_gallery/'; // Path to the file manager

// Set the iframe URL
$('#fileManagerIframe').attr('src', fileManagerUrl);

// Open the Bootstrap modal
$('#fileManagerModal').modal('show');

// Listen for the return message from the file manager
window.addEventListener('message', function(event) {
    if (event.data && event.data.fileUrl) {
        callback(event.data.fileUrl);
        
        // Close the modal
        $('#fileManagerModal').modal('hide');
    }
}, { once: true }); // Removes the event listener after the first use

}

Karl

stefano Just some further notes here, as it not entirely conclusive yet. It would be possible to add some custom event that triggers on item select in Files Gallery. It would need to cover "un-select" also, and we might need additional events for select/un-select all. Something vaguely like this:

onSelect: (select, item) => {
  console.log(select); // Boolean value if item gets selected or un-selected
  console.log(item); // Contains the entire item, include item.path
}

stefano window.opener.postMessage

All this interaction between windows would have to be part of the custom function. At least unless there is an "official" plugin specifically for TinyMCE. In your code, it seems to close the window when selecting a single item ... Isn't part of the idea to be able to select multiple items? Looks like clicking the "check" will trigger the event? It's not clear why you can't trigger click on the entire item, since it's meant to be able to select the item to close the window ...

Ok, maybe I'm not seeing the ful picture, and I guess with a custom event, at least you don't need to add your own MutationObserver scripts.

stefano var observer = new MutationObserver(function(mutationsList, observer) {

When thinking about it, I don't see the need to complicate things with MutationObserver events. Why not just assign a click event to the main document? Essentially, you just want to detect clicks on either the item or the check mark inside the item (its not clear).

In conclusion, yes I can definitely add a custom function for onSelect event. I may however want to plan and implement custom functions for many global events, in which case this needs to be planned and implemented properly for best functionality and consistency.