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

时间:2018-08-10 21:04:36

标签: ckeditor ckeditor5 ng-ckeditor

如何获得有关CKEditor 5模型,视图和小部件的单击,更新和删除事件的通知?

让我们假设我有一个类似于链接插件或荧光笔插件的自定义插件实现。现在,如何获得以下事件?

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

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

1 个答案:

答案 0 :(得分:0)

这是我使用的代码。它必须在插件的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直到获得结果。