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.
NOTE:
Custom event listeners are triggered in the order that they were 'subscribed' to. Most functionality within medium-editor uses these custom events to trigger updates, so in general, it can be assumed that most of the built-in functionality has already been completed before any of your custom event listeners will be called.
If you need to override the editor's bult-in behavior, try overriding the built-in extensions with your own custom extension.
- API Methods
- Custom Events
- Toolbar Custom Evenst
- Proxied Custom Events
-
editableClick-editableBlur-editableKeypress-editableKeyup-editableKeydown-editableKeydownEnter-editableKeydownTab-editableKeydownDelete-editableMouseover-editableDrag-editableDrop-editablePaste
Use the following methods of MediumEditor for custom event interaction:
Attaches a listener for the specified custom event name.
Arguments
- name (
String):
- Name of the event to listen to. See the list of built-in Custom Events below.
- listener(data, editable) (
function):
- 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 nativeEventobject 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) - editable (
HTMLElement) * 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, whenblurfires, 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.
Arguments
- name (
String):
- Name of the event to detach the listener for.
- listener (
function):
- 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 (
String):
- Name of the custom event to trigger.
- data (
Event|object):
- Native
Eventobject or custom data object to pass to all the listeners to this custom event.
- editable (
HTMLElement):
- 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,
bluris 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,
bluris NOT fired.
- User clicks on another part of the page which hides the toolbar and focus is no longer in the
contenteditable bluris triggered
editableInput is triggered whenever the content of a contenteditable changes, including keypresses, toolbar actions, or any other user interaction that changes the html within the element. For non-IE browsers, this is just a proxied version of the native input event. However, Internet Explorer has never supported the input event on contenteditable elements so for these browsers the editableInput event is triggered through a combination of:
- native
keypressevent on the element - native
selectionchangeevent on the document - monitoring calls the
document.execCommand()
externalInteraction is triggered whenever the user interact with any element outside of the contenteditable element or the other elements maintained by the editor (ie Toolbar, Anchor Preview, etc.). This event trigger regardless of whether an existing contenteditable element had focus or not.
focus is triggered whenver a contentedtiable element within an editor receives focus. If the user interacts with any editor maintained elements (ie toolbar), blur is NOT triggered because focus has not been lost. Thus, focus will only be triggered when an contenteditable element (or the editor that contains it) is first interacted with.
These events are triggered by the toolbar when the toolbar extension has not been disabled.
hideToolbar is triggered whenever the toolbar was visible and has just been hidden.
positionToolbar is triggered each time the current selection is checked and the toolbar's position is about to be updated. This event is triggered after all of the buttons have had their state updated, but before the toolbar is moved to the correct location. This event will be triggered even if nothing will be changed about the toolbar's appearance.
showToolbar is triggered whenever the toolbar was hidden and has just been displayed.
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.
native click event for each element
native blur event for each element.
native keypress event for each element.
native keyup event for each element.
native keydown event for each element.
native keydown event for each element, but only triggered if the key is ENTER (keycode 13).
native keydown event for each element, but only triggered if the key is TAB (keycode 9).
native keydown event for each element, but only triggered if the key is DELETE (keycode 46).
native mouseover event for each element.
native drag event for each element.
native drop event for each element.
native paste event for each element.