CKEditor5下拉菜单项点击监听注册及ID分配方法咨询

Got it, let's solve this for your translation plugin. The key here is leveraging CKEditor 5's MVC pattern for UI components—instead of listening to raw click events on the dropdown, you'll want to hook into the execute event of each menu item's model, which is the official recommended approach. You can also easily attach an ID to each item's model to identify which one was clicked.

Step-by-Step Solution #

Here's how to modify your code to add click handlers and track item IDs:

1. Attach IDs to each menu item's Model
   When creating the Model for each dropdown item, include your custom id property directly in the model's attributes. This lets you reference it later in the click handler.

2. Listen to the Model's execute Event
   Each dropdown button (from your items collection) will trigger its model's execute event when clicked. Bind a handler to this event to run your translation logic, and access the item's ID from the model.

Modified Code Example #

class Translation extends Plugin {
    init() {
        const editor = this.editor; // Store editor reference for easy access

        this.editor.ui.componentFactory.add('translate', (locale) => {
            const dropdownView = createDropdown(locale);
            dropdownView.buttonView.set({
                icon: languageIcon,
                label: 'Translate',
                tooltip: true,
            });

            const items = new Collection();

            // Create English menu item with ID and click handler
            const enModel = new Model({ 
                withText: true, 
                label: 'English', 
                id: 'en' // Assign your custom ID here
            });
            enModel.on('execute', () => {
                console.log(`Clicked item with ID: ${enModel.id}`);
                // Add your translation logic here
                const selectedText = editor.model.document.selection.getSelectedText();
                console.log(`Translating "${selectedText}" to English`);
                // Call your translation API or process the text...
            });
            items.add({ type: 'button', model: enModel });

            // Create Spanish menu item with ID and click handler
            const esModel = new Model({ 
                withText: true, 
                label: 'Spanish', 
                id: 'es' // Assign your custom ID here
            });
            esModel.on('execute', () => {
                console.log(`Clicked item with ID: ${esModel.id}`);
                const selectedText = editor.model.document.selection.getSelectedText();
                console.log(`Translating "${selectedText}" to Spanish`);
                // Call your translation API or process the text...
            });
            items.add({ type: 'button', model: esModel });

            addListToDropdown(dropdownView, items);

            return dropdownView;
        });
    }
}

Why This Works #

• CKEditor 5's UI components follow an MVC structure: when a dropdown button is clicked, its associated Model emits an execute event. This is the standard way to handle user interactions with CKEditor UI elements, rather than listening to raw DOM click events.
• By adding the id directly to the Model, you have a clean, reliable way to identify which menu item was triggered—no need to parse DOM elements or event targets.

Bonus: Reusable Handler (Optional) #

If you have many languages, you can avoid repeating code by creating a reusable handler function:

const createTranslationItem = (langId, langLabel) => {
    const model = new Model({ withText: true, label: langLabel, id: langId });
    model.on('execute', () => {
        const selectedText = editor.model.document.selection.getSelectedText();
        console.log(`Translating "${selectedText}" to ${langLabel} (ID: ${langId})`);
        // Reuse your translation logic here
    });
    return { type: 'button', model };
};

// Then add items like this:
items.add(createTranslationItem('en', 'English'));
items.add(createTranslationItem('es', 'Spanish'));
items.add(createTranslationItem('fr', 'French'));

内容的提问来源于stack exchange，提问作者Tobias P.