Skip to content
This repository has been archived by the owner on Nov 15, 2024. It is now read-only.

Integration CKEdiror 5 series (classic) #740

Open
labby opened this issue Jun 23, 2024 · 2 comments
Open

Integration CKEdiror 5 series (classic) #740

labby opened this issue Jun 23, 2024 · 2 comments

Comments

@labby
Copy link

labby commented Jun 23, 2024

Has anyone succeeded in integrate the responsive filemanager in cke 5 series?
Help is really appreciated.
Thanks in advance.

@labby
Copy link
Author

labby commented Jun 29, 2024

Really nobody???

@jsilff
Copy link

jsilff commented Sep 10, 2024

I think I figured it out:

  1. Add ButtonView, Plugin via import and add them to the plugins list also add FileManagerPlugin to plugins.
  2. Add fileManager to toolbar items
  3. Add these JS functions:
// Function to open Responsive FileManager
function openFileManager(callback) {
    const fileManagerUrl = '/filemanager/dialog.php?type=1&editor=ckeditor';
    const width = 900;
    const height = 600;

    const fileManagerWindow = window.open(fileManagerUrl, 'FileManager', `width=${width},height=${height}`);

    // Listen for the file URL from FileManager
    window.SetUrl = (url) => {
        fileManagerWindow.close();
        callback(url);
    };
}

// Custom FileManager Plugin for CKEditor 5
class FileManagerPlugin extends Plugin {
    init() {
        const editor = this.editor;

        // Add a button to the toolbar
        editor.ui.componentFactory.add('fileManager', locale => {
            const view = new ButtonView(locale);

            view.set({
                label: 'Insert Image',
                tooltip: true,
                withText: true
            });

            view.on('execute', () => {
                openFileManager((url) => {
                    // Insert the image at the current selection
                    editor.model.change(writer => {
                        const imageElement = writer.createElement('imageBlock', {
                            src: url
                        });
                        editor.model.insertContent(imageElement, editor.model.document.selection);
                    });
                });
            });

            return view;
        });
    }
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants