如何在自定义 ckeditor5 小部件中制作上下文菜单？

Question

我制作了一个类似于占位符 (ckeditor4) 的内联小部件，但现在我想在选择小部件时呈现一个下拉列表以显示选项值以替换占位符。我尝试使用 BalloonPanelView 但直到现在都没有成功，有人知道如何制作它吗？

this.editor.editing.view.document.on('click', (evt, data) => {
    evt.stop();
    const element = data.target;
    if (element && element.hasClass('placeholder')) {
        if (!element.getAttribute('data-is-fixed')) {
            const balloonPanelView = new BalloonPanelView();
            balloonPanelView.render();
            ['option1', 'option2', 'option3'].forEach((value) => {
                const view = new View();
                view.set({
                    label: value,
                    withText: true
                });
                balloonPanelView.content.add(view);
            });
            balloonPanelView.pin({
                target: element
            });
        }
    }
});

Answer 1

我找到了使用 ContextualBalloon 的解决方案 class:

import ContextualBalloon from "@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon";

// Define ballon
const balloon = editor.plugins.get(ContextualBalloon);

const placeholderOptions = // Here I defined list with buttons '<li><button></li>' 

// Finnaly render ballon
balloon.add({
    view: placeholderOptions,
    singleViewMode: true,
    position: {
         target: data.domTarget
    }
});

如何在自定义 ckeditor5 小部件中制作上下文菜单？

How to make a context menu in a custom ckeditor5 widget?

ckeditor

ckeditor5