CKEditor 5 如何从任何小部件/模型/ View 获取点击、更新和删除事件

Question

我如何获得有关 CKEditor 5 模型、 View 和小部件的点击、更新和删除事件的通知？

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

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

该元素可以是模型元素/ View 元素/或小部件。

Answer 1

这是我使用的代码。它需要位于插件的 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 直到获得结果。