-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Custom Events
MediumEditor exposes a variety of custom events for convienience when using the editor with your web application. You can attach and detach listeners to these custom events, as well as manually trigger any custom events including your own custom events.
Use the following methods of MediumEditor for custom event interaction:
Attaches a listener for the specified custom event name.
Name of the event to listen to. See the list of built-in Custom Events below.
Listener method that will be called whenever the custom event is triggered.
Arguments to listener
-
data
_(Event | object)- For most custom events, this will be the browser's native
Event
object for the event that triggered the custom event to fire. - For some custom events, this will be an object containing information describing the event (depending on which custom event it is)
- For most custom events, this will be the browser's native
-
editable
- A reference to the contenteditable container element that this custom event corresponds to. This is especially useful for instances where one instance of MediumEditor contains multiple elements, or there are multiple instances of MediumEditor on the page.
- For example, when
blur
fires, this argument will be the<div contenteditable=true></div>
element that is about to receive focus.
Detaches a custom event listener for the specified custom event name.
Name of the event to detach the listener for.
A reference to the listener to detach. This must be a match by-reference and not a copy.
NOTE
Calling destroy() on the MediumEditor object will automatically remove all custom event listeners.
Manually triggers a custom event.
Name of the custom event to trigger.
Native Event
object or custom data object to pass to all the listeners to this custom event.
The <div contenteditable=true></div>
element to pass to all of the listeners to this custom event.
These events are custom to MediumEditor so there may be one or more native events that can trigger them.
blur
is triggered whenever a contenteditable
element within an editor has lost focus to an element other than an editor maintained element (ie Toolbar, Anchor Preview, etc).
Example:
- User selects text within an editor element, causing the toolbar to appear
- User clicks on a toolbar button
- Technically focus may have been lost on the editor element, but since the user is interacting with the toolbar,
blur
is NOT fired.
- User hovers over a link, anchor-preview is displayed
- User clicks link to edit it, and the toolbar now displays a textbox to edit the url
- Focus will have lost here since focus is now in the url editing textbox, but again since it's within the toolbar,
blur
is NOT fired.
- User clicks on another part of the page which hides the toolbar and focus is no longer in the
contenteditable
-
blur
is triggered
These events are triggered whenever a native browser event is triggered for any of the contenteditable
elements monitored by this instnace of MediumEditor.
For example, the editableClick
custom event will be triggered when a native click
event is fired on any of the contenteditable
elements. This provides a single event listener that can get fired for all elements, and also allows for the contenteditable
element that triggered the event to be passed to the listener.