Custom Events

MediumEditor Custom Events Overview

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.

• API Methods
  • MediumEditor.subscribe(name, listener)
    • name (string)
    • listener(data, editable) (function)
  • MediumEditor.unsubscribe(event, listener)
    • name (string)
    • listener (function)
  • MediumEditor.trigger(name, data, editable)
    • name (string)
    • data (object)
    • editable (HTMLElement)
• Custom Events
  • blur
  • editableInput
  • externalInteraction
  • focus
• Proxied Custom Events
  • editableClick
  • editableBlur
  • editableKeypress
  • editableKeyup
  • editableKeydown
  • editableKeydownEnter
  • editableKeydownTab
  • editableKeydownDelete
  • editableMouseover
  • editableDrag
  • editableDrop
  • editablePaste

API Methods

Use the following methods of MediumEditor for custom event interaction:

MediumEditor.subscribe(name, listener)

Attaches a listener for the specified custom event name.

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 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)
• 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.

---

MediumEditor.unsubscribe(event, listener)

Detaches a custom event listener for the specified custom event name.

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.

---

MediumEditor.trigger(name, data, editable)

Manually triggers a custom event.

name (string)

Name of the custom event to trigger.

data (object)

Native Event object 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.

Custom Events

These events are custom to MediumEditor so there may be one or more native events that can trigger them.

blur

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:

1. User selects text within an editor element, causing the toolbar to appear
2. 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.

3. User hovers over a link, anchor-preview is displayed
4. 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.

5. User clicks on another part of the page which hides the toolbar and focus is no longer in the contenteditable
6. blur is triggered

---

editableInput

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 keypress event on the element
• native selectionchange event on the document
• monitoring calls the document.execCommand()

---

externalInteraction

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

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.

Proxied Custom Events

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.

editableClick

---

editableBlur

---

editableKeypress

---

editableKeyup

---

editableKeydown

---

editableKeydownEnter

---

editableKeydownTab

---

editableKeydownDelete

---

editableMouseover

---

editableDrag

---

editableDrop

---

editablePaste