API Docs for: 3.18.1
Show:

ContentEditable Class

Extends Y.Plugin.Base
Defined in: editor/js/content-editable.js:2
Module: content-editable
Parent Module: editor

Creates a component to work with an elemment.

Constructor

ContentEditable

()

Defined in editor/js/content-editable.js:2

Methods

_defReadyFn

() private

Defined in editor/js/content-editable.js:166

Binds DOM events and fires the ready event

_DOMPaste

(
  • e
)
private

Defined in editor/js/content-editable.js:117

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

Parameters:

_getDefaultBlock

() String private

Defined in editor/js/content-editable.js:251

Retrieves defaultblock value from host attribute

Returns:

String:

_getDir

() String private

Defined in editor/js/content-editable.js:261

Retrieves dir value from host attribute

Returns:

String:

_getExtraCSS

() String private

Defined in editor/js/content-editable.js:271

Retrieves extracss value from host attribute

Returns:

String:

_getHostValue

(
  • The
)
String | Object private

Defined in editor/js/content-editable.js:300

Retrieves a value from host attribute

Parameters:

  • The Attr

    attribute which value should be returned from the host

Returns:

String | Object:

_getHTML

(
  • html
)
String private

Defined in editor/js/content-editable.js:281

Get the content from the container

Parameters:

  • html String

    The raw HTML from the container.

Returns:

String:

_instanceLoaded

(
  • inst
)
private

Defined in editor/js/content-editable.js:427

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

Defined in editor/js/content-editable.js:212

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

_onDomEvent

(
  • e
)
private

Defined in editor/js/content-editable.js:86

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

Defined in editor/js/content-editable.js:354

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

Parameters:

  • value String

    The language direction

Returns:

String:

_setExtraCSS

(
  • css
)
String private

Defined in editor/js/content-editable.js:376

Set's the extra CSS on the instance.

Parameters:

  • css String

    The CSS style to be set as extra css

Returns:

String:

_setHTML

(
  • html
)
String private

Defined in editor/js/content-editable.js:315

Set the content of the container

Parameters:

  • html String

    The raw HTML to set to the container.

Returns:

String:

_setLang

(
  • value
)
String private

Defined in editor/js/content-editable.js:405

Sets the language value on the instance.

Parameters:

  • value String

    The language to be set

Returns:

String:

_setLinkedCSS

(
  • css
)
String private

Defined in editor/js/content-editable.js:335

Sets the linked CSS on the instance.

Parameters:

  • css String

    The linkedcss value

Returns:

String:

_validateLinkedCSS

() private

Defined in editor/js/content-editable.js:451

Validates linkedcss property

delegate

(
  • type
  • fn
  • cont
  • sel
)
EventHandle

Defined in editor/js/content-editable.js:489

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

Defined in editor/js/content-editable.js:75

Destroys the instance.

focus

(
  • fn
)
ContentEditable chainable

Defined in editor/js/content-editable.js:579

Set the focus to the container

Parameters:

  • fn Function

    Callback function to execute after focus happens

Returns:

ContentEditable:

getInstance

() YUI

Defined in editor/js/content-editable.js:516

Get a reference to the internal YUI instance.

Returns:

YUI:

The internal YUI instance

hide

() ContentEditable chainable

Defined in editor/js/content-editable.js:605

Hide the iframe instance

Returns:

ContentEditable:

initializer

() protected

Defined in editor/js/content-editable.js:55

Initializes the ContentEditable instance

render

(
  • node
)
ContentEditable chainable

Defined in editor/js/content-editable.js:525

Parameters:

  • node String/HTMLElement/Node

    The node to render to

Returns:

ContentEditable:

show

() ContentEditable chainable

Defined in editor/js/content-editable.js:591

Show the iframe instance

Returns:

ContentEditable:

use

()

Defined in editor/js/content-editable.js:462

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

Defined in editor/js/content-editable.js:47

Internal reference to the YUI instance bound to the element

_rendered

Boolean private

Defined in editor/js/content-editable.js:39

Internal reference set when render is called.

DOM_EVENTS

Object static

Defined in editor/js/content-editable.js:627

The DomEvents that the frame automatically attaches and bubbles

HTML

String static

Defined in editor/js/content-editable.js:646

The template string used to create the ContentEditable element

NAME

String static

Defined in editor/js/content-editable.js:654

The name of the class (contentEditable)

NS

String static

Defined in editor/js/content-editable.js:662

The namespace on which ContentEditable plugin will reside.

Default: 'contentEditable'

THROTTLE_TIME

Number static

Defined in editor/js/content-editable.js:618

The throttle time for key events in IE

Default: 100

Attributes

container

String/HTMLElement/Node

Defined in editor/js/content-editable.js:685

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

Defined in editor/js/content-editable.js:698

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

Defined in editor/js/content-editable.js:711

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

Defined in editor/js/content-editable.js:673

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

Defined in editor/js/content-editable.js:722

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

Defined in editor/js/content-editable.js:734

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

Defined in editor/js/content-editable.js:751

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

Defined in editor/js/content-editable.js:763

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

Defined in editor/js/content-editable.js:774

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

Defined in editor/js/content-editable.js:787

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.