CKEditor 5如何从任何小部件/模型/视图中获取单击，更新和删除的事件

Posted 2021-04-11

如何在CKEditor 5模型，视图和窗口小部件的单击，更新和删除事件上收到通知？

我们假设我有一个类似于链接插件或荧光笔插件的自定义插件实现。现在，我怎样才能得到以下事件？

• 当用户单击链接/突出显示的元素时。
• 当用户更新突出显示的元素的内部内容时。
• 当用户从编辑器中删除整个突出显示的链接或突出显示元素时。

元素可以是模型元素/视图元素/或小部件。

答案

这是我使用的代码。它需要在插件的init（）方法中。我不知道这是否是正确的方法，但它适用于我（tm）。

            const editor = this.editor;
            const model=editor.model;
            const editingView=editor.editing.view;
            editingView.addObserver( ClickObserver );
            const viewDocument = editor.editing.view.document;

            this.listenTo( viewDocument, 'click', (event,data) => {
                const target=data.target; // This is the view the user clicked on 
                const modelObj=editor.editing.mapper.toModelElement(target);
// modelObj is the model object for the element the user clicked on. Now you just need to test if clicking on this model is something you are interested in.    

    //          console.log(modelObj);
            } );

请注意，如果单击AttributeElement（例如粗体文本），这似乎会失败。在这种情况下，您可以调用target.parent，直到获得结果。