Version 3.18.1
Show:

ContentEditable Class

Extends Y.Plugin.Base
Module: content-editable
Parent Module: editor

Creates a component to work with an elemment.

Constructor

ContentEditable

()

Methods

_defReadyFn

() private

Binds DOM events and fires the ready event

_DOMPaste

(
  • e
)
private

Simple pass thru handler for the paste event so we can do content cleanup

Parameters:

_getDefaultBlock

() String private

Retrieves defaultblock value from host attribute

Returns:

_getDir

() String private

Retrieves dir value from host attribute

Returns:

_getExtraCSS

() String private

Retrieves extracss value from host attribute

Returns:

_getHostValue

(
  • The
)
String | Object private

Retrieves a value from host attribute

Parameters:

  • The Attr

    attribute which value should be returned from the host

Returns:

_getHTML

(
  • html
)
String private

Get the content from the container

Parameters:

  • html String

    The raw HTML from the container.

Returns:

_instanceLoaded

(
  • inst
)
private

Called from the first YUI instance that sets up the internal instance. This loads the content into the ContentEditable element and attaches the contentready event.

Parameters:

  • inst YUI

    The internal YUI instance bound to the ContentEditable element

_onContentReady on the internal instance so that the modules are loaded properly.

() private

Called once the content is available in the ContentEditable element and calls the final use call

_onDomEvent

(
  • e
)
private

Generic handler for all DOM events fired by the Editor container. This handler takes the current EventFacade and augments it to fire on the ContentEditable host. It adds two new properties to the EventFacade called frameX and frameY which adds the scroll and xy position of the ContentEditable element to the original pageX and pageY of the event so external nodes can be positioned over the element. In case of ContentEditable element these will be equal to pageX and pageY of the container.

Parameters:

_setDir

(
  • value
)
String private

Sets the dir (language direction) attribute on the container.

Parameters:

  • value String

    The language direction

Returns:

_setExtraCSS

(
  • css
)
String private

Set's the extra CSS on the instance.

Parameters:

  • css String

    The CSS style to be set as extra css

Returns:

_setHTML

(
  • html
)
String private

Set the content of the container

Parameters:

  • html String

    The raw HTML to set to the container.

Returns:

_setLang

(
  • value
)
String private

Sets the language value on the instance.

Parameters:

  • value String

    The language to be set

Returns:

_setLinkedCSS

(
  • css
)
String private

Sets the linked CSS on the instance.

Parameters:

  • css String

    The linkedcss value

Returns:

_validateLinkedCSS

() private

Validates linkedcss property

delegate

(
  • type
  • fn
  • cont
  • sel
)
EventHandle

A delegate method passed to the instance's delegate method

Parameters:

  • type String

    The type of event to listen for

  • fn Function

    The method to attach

  • cont String, Node

    The container to act as a delegate, if no "sel" passed, the container is assumed.

  • sel String

    The selector to match in the event (optional)

Returns:

EventHandle:

The Event handle returned from Y.delegate

destructor

() protected

Destroys the instance.

focus

(
  • fn
)
ContentEditable chainable

Set the focus to the container

Parameters:

  • fn Function

    Callback function to execute after focus happens

Returns:

getInstance

() YUI

Get a reference to the internal YUI instance.

Returns:

YUI:

The internal YUI instance

hide

() ContentEditable chainable

Hide the iframe instance

Returns:

initializer

() protected

Initializes the ContentEditable instance

render

(
  • node
)
ContentEditable chainable

Parameters:

  • node String/HTMLElement/Node

    The node to render to

Returns:

show

() ContentEditable chainable

Show the iframe instance

Returns:

use

()

This is a scoped version of the normal YUI.use method & is bound to the ContentEditable element At setup, the inst.use method is mapped to this method.

Properties

_instance

YUI private

Internal reference to the YUI instance bound to the element

_rendered

Boolean private

Internal reference set when render is called.

DOM_EVENTS

Object static

The DomEvents that the frame automatically attaches and bubbles

HTML

String static

The template string used to create the ContentEditable element

NAME

String static

The name of the class (contentEditable)

NS

String static

The namespace on which ContentEditable plugin will reside.

Default: 'contentEditable'

THROTTLE_TIME

Number static

The throttle time for key events in IE

Default: 100

Attributes

container

String/HTMLElement/Node

The container to set contentEditable=true or to create on render.

Fires event containerChange

Fires when the value for the configuration attribute container is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

content

String

The string to inject as Editor content. Default '
'

Fires event contentChange

Fires when the value for the configuration attribute content is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

defaultblock

String

The default tag to use for block level items, defaults to: p

Fires event defaultblockChange

Fires when the value for the configuration attribute defaultblock is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

dir

String

The default text direction for this ContentEditable element. Default: ltr

Fires event dirChange

Fires when the value for the configuration attribute dir is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

extracss

String

A string of CSS to add to the Head of the Editor

Fires event extracssChange

Fires when the value for the configuration attribute extracss is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

id

String

Set the id of the new Node. (optional)

Fires event idChange

Fires when the value for the configuration attribute id is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

lang

String

The default language. Default: en-US

Fires event langChange

Fires when the value for the configuration attribute lang is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

linkedcss

String | Array

An array of url's to external linked style sheets

Fires event linkedcssChange

Fires when the value for the configuration attribute linkedcss is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

node

Node

The Node instance of the container.

Fires event nodeChange

Fires when the value for the configuration attribute node is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

use

Array

Array of modules to include in the scoped YUI instance at render time. Default: ['node-base', 'editor-selection', 'stylesheet']

Fires event useChange

Fires when the value for the configuration attribute use is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.