如何在自定义ckeditor5小部件中创建上下文菜单?

时间:2019-11-28 19:11:54

标签: ckeditor ckeditor5

我制作了一个类似于占位符(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
            });
        }
    }
});

1 个答案:

答案 0 :(得分:1)

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

res = ''.join(letters.get(c, c) if i % 2 == k else c for i, c in enumerate(text))