ckeditor5-elements / ElementClickable

Class: ElementClickable

Calls a function when an element is clicked or double-clicked, with the model element. Elements are matched by name or by a filter function, and the definitions are the elementClickable editor config option (see ElementClickableDefinition):

elementClickable: [
	{ element: 'imageBlock', callback: (element, editor) => console.log(element.getAttribute('src')) },
	{ element: element => element.name.startsWith('heading'), event: 'dblclick', callback: edit }
];

The click is matched against the element that was clicked and its ancestors, the innermost first: the first element that matches a definition for the event calls its callback, and the event goes no further. For two definitions that match the same element, the first one in the config wins.

It works in read-only mode too. The click still does what it does in the editor, e.g. selects an image: the plugin only reports it, before the other plugins handle it (some of them stop the event), and does not stop it.

Extends

• Plugin

Constructors

Constructor

new ElementClickable(editor): ElementClickable;

Parameters

Parameter	Type
editor	Editor

Returns

ElementClickable

Inherit Doc

Inherited from

Plugin.constructor

Accessors

pluginName

Get Signature

get static pluginName(): "ElementClickable";

Returns

"ElementClickable"

Methods

find()

find(viewElement, event?): 
  | {
  definition: ElementClickableDefinition;
  element: ModelElement;
}
  | null;

Returns the definition and the element that a click on the view element is for: the innermost element, among the view element and its ancestors, that matches a definition for the event. null when there is none.

Parameters

Parameter	Type	Default value
viewElement	ViewElement	undefined
event?	ElementClickableEvent	'click'

Returns

| { definition: ElementClickableDefinition; element: ModelElement; } | null

---

init()

init(): void;

Returns

void