ContentEdit

A JavaScript library that provides a set of classes for building content-editable HTML elements.

ContentEdit makes sections of an HTML page editable, it does this by converting block-level elements within a container element (referred to as a region) into editable elements. Each type of editable element provides a set of editing interactions based on its content type, for example images and videos can be dragged to a new location and resized, text can be altered and formatted, tables can be reordered and so on.

When converting the content of a container element, ContentEdit looks for element types it understands (e.g <img ...>, <h2>, etc). When it finds an element it can't convert it uses a special Static class which can't be interacted with but can sit within other editable elements.

The advantage of this approach is that at any point in time only a small section of the content is in an editable state, which improves performance.

The contenteditable attribute (which is often treated as a dirty word) is used to make the contents of text elements editable. Elements with the contenteditable attribute set can output messy HTML - to solve this the HTMLString parser is used to clean and optimize content output.

Usage

To make a region of your page editable the following code is all you need: 

var element = document.getElementById('my-region');
var region = new ContentEdit.Region(element);

Your HTML this should look something like this: 

<html>
    <head>
        ...
        <link rel="stylesheet" type="text/css" href="content-edit.min.css">
    </head>
    <body>
        ...
        <div id="my-region">
            <p>Insert content here...</p>
        </div>
        <script src="/scripts/content-edit.min.js"></script>
        <script>
            var element = document.getElementById('my-region');
            var region = new ContentEdit.Region(element);
        </script>
    </body>
</html>

Once that's in place, open the HTML page in a browser and you'll be able to start editing content. What you can do will be a little limited as there's no editor (see ContentTools). However, if you want to play with other types of element just add them into the <div id="my-region"> and refresh the page.

Included in the /sandbox folder of the repo is a full demo of all the currently supported editable elements, just open the index.html page in your browser.

HTML output

To get the HTML for a region you've been editing you call the html method, for example: 

function saveHTML() {
    html = region.html()
    // Send html to the server to be saved...
}

Always use the html method as this outputs clean HTML. Avoid using the built-in innerHTML method which will result in HTML flavoured to the output of the browser and also mean scaffolding CSS classes used by ContentEdit whilst a region is editable are included.

Reference

The library consists of a collection of classes namespaced under ContentEdit:

Settings

A number of settings are provided against the ContentEdit namespace. These can be set directly.

ALIGNMENT_CLASS_NAMES

The CSS class names used when an element is drag aligned to the left or right of another element.

Defaults to {left: 'align-left', right: 'align-right'}

DEFAULT_MAX_ELEMENT_WIDTH, DEFAULT_MIN_ELEMENT_WIDTH

The default min/max constraints (in pixels) for elements that can be resized. The default values are used when a min/max width has not been set.

Defaults to 800 and 80

DRAG_HOLD_DURATION

Some elements are draggable simply by clicking on them and moving the mouse. Others like Text elements handle click events differently, these elements support dragging behaviour when a user clicks and holds (without moving the mouse). For some elements holding for twice as long will allow the parent element to be dragged, this is how list items can be dragged, or an entire list. The duration of the hold is determined in milliseconds.

Defaults to 500

DROP_EDGE_SIZE

The size (in pixels) of the edge used to detect a switch in horizontal placement when dragging an element over another, such as when an Image is dragged to the right edge of a Text element.

Defaults to 50

HELPER_CHAR_LIMIT

The maximum number of characters to insert into a helper (the helper tool that appears when dragging elements). It can be useful to change this when customizing the appearance of helper elements.

Defaults to 250

INDENT

The string used to indent HTML output from elements. For example if you wanted the HTML output to be indented using tabs instead of spaces you could set this to ' '. I prefer spaces, but I wont go to war (again) with anyone about it!

Defaults to 4 spaces

LANGUAGE

The current language. Must be a 2 digit ISO_639-1 code.

Defaults to en

LINE_ENDINGS

String used for  line endings when formatting the HTML output of editable elements.

Defaults to \n

PREFER_LINE_BREAKS

By default a new paragraph <p> is created when the enter/return key is pressed, to insert a line-break <br> the shift key can be held down when pressing enter. This behaviour can be reversed by setting the preference to be for line-breaks.

Defaults to false

RESIZE_CORNER_SIZE

The size (in pixels) of the corner region used to detect a resize event against an element. To resize an element the user must click in a corner region of an element. The size is automatically reduced for very small elements, where the corner size represents more than a 1/4 of the total size, to allow users to click the center of the element to trigger a drag event.

Defaults to 15

TRIM_WHITESPACE

If true then white space will be stripped from the start and end of editable elements with text content, if false then &nbsp; and <br> tags will be preserved.

Events

All Node/Element classes support a shared set of events. These are triggered against the Root and not the individual Node/Elements, so to listen for an event you bind to Root like so: 

// Listen for any new element being added to the editable tree
ContentEdit.Root.get().bind('attach', function (element) {
    console.log(element, 'just got added');
});

attach

Triggered when an element is attached to another node as a child.

blur

Triggered when an element looses focus.

commit

Triggered when commit is called against an node. This event and method are provided to help manage the save state of a document but aren't actually used or triggered by ContentEdit.

detach

Triggered when a node is detached from a parent node.

drag

Triggered when an element is dragged.

drop

Triggered when an element is dropped. The event receives the element being dropped, the target element being dropped onto and the placement of the drop (see element.drop).

If the drop fails, for example because the element wasn't dropped on to another element, the event will trigger with null values for target and placement.

focus

Triggered when an element is given focus.

mount

Triggered when an element is mounted in the DOM.

native-drop

Triggered when a user attempts to native drag-drop content into an element.

next-region

Triggered when the user uses the right arrow or down arrow key whilst the caret is at the end of the last node that supports content in a region. This allows external code to manage the transition from one region to the next.

paste

Triggered when a user attempts to paste content into an element.

previous-region

Triggered when the user uses the left arrow or up arrow key whilst the caret is at the start of the first node that supports content in a region. This allows external code to manage the transition from one region to the previous.

ready

Specific to the Region element, this event is triggered when the region has been initialized.

taint

Triggered whenever a node is modified.

unmount

Triggered when an element is removed from the DOM.

Translations

ContentEdit supports multiple languages though a simple set of translation functions. ContentTools also uses these functions to support for multiple languages.

_(s)

The underscore function translates the given string to the currently set ContentEdit.LANGUAGE, if not translation is available the string will be returned unchanged.

addTranslations(language, translations)

Add translations for the given language, where translations is an object containing a map of English strings to and their translated counterparts (e.g {'Hello', 'Bonjour'}). language must be a 2 digit ISO_639-1 code.

Functions

A number of utility functions are provided in the ContentEdit namespace.

ContentEdit.addCSSClass(domElement, className)

Add a CSS class to a DOM element.

ContentEdit.attributesToString(attributes)

Convert an object into an HTML attribute string (e.g {key: value} to key="value").

ContentEdit.removeCSSClass(domElement, className)

Remove a CSS class from a DOM element.

Behaviours

Behaviours provide a mechanism to allow the behaviour of elements to be configured, for example you can prevent an image from being dragged, a heading tag from being removed and so on.

Whilst behaviours are designed to be extensible the following behaviours are by default flagged as allowed for all elements:

  • drag - true if an element can be dragged.
  • drop - true if an element will accept another element being dropped on it.
  • merge - true if an element will allow another element to be merged with it.
  • remove - true if an element can be removed, e.g text elements are by default removed when empty.
  • resize - true if an element can be resized.
  • spawn - true if an element can spawn new elements, for example hitting return in a list item to generate a new list item.
  • indent (for list items only) - true if a list item can be indented or unindented.

An element's behaviour is defined and queried through the can method, for example: 

// Check to see if an element can be removed
if (element.can('remove')​​) {
    ...remove the element...
}​​

// Prevent an element from being dragged
element.can('drag', false);​​​​​

Not all behaviours defined against an element will necessarily be applicable, (for example you can't resize a Text element), behaviours don't indicate what actions are possible only whether an action is allowed. Further there is no way to ensure external code will respects behaviour flags, even if you disallow remove an element can still be detached from it's parent and not reattached (e.g removed) - it's up to the external code to respect ContentEdit behaviours.

Node

Editable content is structured as a tree, each node in the tree is an instance of a class that inherits from the base Node class. However higher-level element classes typically inherit from Element or ElementCollection (which in turn inherit from Node).

node = new ContentEdit.Node()

Create a new Node.

node.lastModified()

Return null if the node is unmodified, else return the date/time the node was last modified.

node.parent()

Return the parent of the node.

node.parents()

Return a list of ancestors for the node (in ascending order).

node.bind(eventName, callback)

Bind a callback to an event against the node. See Events. You should only ever bind to the Root.

node.closest(testFunc)

Find and return the first parent of the node that meets the testFunc condition.

The testFunc can be any function that accepts a Node as an argument and returns true or false based on whether the Node meets the condition, for example: 

// Find the closest TableSection instance (where th is a TableCell instance)
var section = th.closest(function (node) {
    return node.constructor.name == 'TableSection';
}

node.commit()

Mark the node as being unmodified.

node.html(indent='')

Return an HTML string for the node. Optionally an indent argument can be supplied which is prefixed to the output so that the indentation structure can preserved.

node.next()

Return the next Node in the tree regardless of depth.

node.nextContent()

Return the next Node that supports the content property.

node.nextSibling()

Return the node's next sibling; the sibling Node must share the same parent.

node.nextWithTest(testFunc)

Find and return the next Node, regardless of depth, that meets the testFunc condition (see testFunc).

node.previous()

Return the previous Node in the tree regardless of depth.

node.previousContent()

Return the previous Node that supports the content property.

node.previousSibling()

Return the node's previous sibling; the sibling Node must share the same parent.

node.previousWithTest(testFunc)

Find and return the previous Node, regardless of depth, that meets the testFunc condition (see testFunc).

node.taint()

Mark the node as being modified.

node.trigger(eventName, args...)

Trigger an event against the node.

node.unbind(eventName, callback)

Unbind a callback from an event.

Node.extend(cls)

This class method allows Node and derived classes to be extended by more than one class.

Node.fromDOMElement(domElement)

Convert a DOM element to an instance of this class.

NodeCollection (inherits from Node)

The NodeCollection class is a base class for nodes that act as a parent for other child nodes, for example Region inherits from NodeCollection. However, higher-level element classes typically inherit from ElementCollection (which in turn inherits from NodeCollection).

collection = new ContentEdit.NodeCollection()

Create a new node NodeCollection.

collection.children

The collection's children.

collection.descendants()

Return a flattened list all the descendants that belong to the collection.

collection.isMounted()

Return true if the collection is mounted in the DOM.

collection.attach(node, index)

Attach a node to the collection, optionally at the given index. If no index is specified the node is appended as the last child.

collection.detach(node)

Detach the specified node from the collection.

Element (inherits from Node)

The Element class is used to implement nodes that appear as HTML elements.

element = new ContentEdit.Element(tagName, attributes)

Create a new Element with the given tagName and attributes. The attributes should be provided as an object.

element.cssTypeName()

Return the CSS type modifier name for the element (e.g ce-element--type-...). This typically follows the name of the class itself, for example a Text element will return ce-element--type-Text. This method must be overwritten when writing your own classes.

element.domElement()

Return the DOM element associated with the element.

element.isFocused()

Return true if the element currently has focus.

element.isMounted()

Return true if the element is mounted in the DOM.

element.type()

Returns the type name for an element, this should always be the same as the elements class name.

The type method was introduced to resolve issue #95 which caused the library to break if minified using uglify with name mangling on.

element.typeName()

Return a user friendly name for the element's type (e.g Image, Table row). This is currently used to provide a label for the element's drag helper.

element.addCSSClass(className)

Add a CSS class to the element.

element.attr(name, value)

Get/Set the value of the named attribute for the element. If a value is given then the attribute is set, otherwise its value is returned.

element.can(behaviour, allowed)

Get/Set the behaviour allowed for an element. If a value for allowed is provided then the flag for the given behaviour is set, otherwise it is returned.

element.createDraggingDOMElement()

Returns a new DOM element that visually aids the user in dragging the element to a new location in the editiable tree structure.

element.drag(x, y)

Start dragging the element; x, y are the start coordinates in pixels of the drag interaction. This method controls if an element can be dragged and any additional behaviour such as a prolonged hold allowing the element's parent to be dragged.

element.drop(targetElement, placement)

Drop the element into a new position in the editable structure. If no targetElement is provided, or a method to manage the drop isn't defined, drop is cancelled.

Dropper functions are defined against the element class's droppers property. The droppers property is an object that maps the names of classes that can be dropped on to functions that can handle the drop.

Drops are typically triggered when a user drags one element onto another.

Dropper functions are called with 2 elements and a placement ('above', 'below', 'left', 'right'). They must handle the drop no matter the order of the elements.

element.focus()

Give the element focus.

element.hasCSSClass(className)

Return true if the element has the specified CSS class.

element.merge(otherElement)

Attempt to merge otherElement with this element. Elements can only merge if a merger function has been defined to handle the merge.

Merger functions are defined against the element class's mergers property. The mergers property is an object that maps the names of classes that can be merged with functions that can handle the merge.

Merges typically happen when the caret is at the first or last character of a content element and the backspace or delete key is pressed, triggering a merge attempt between the focused element and the previous or next element.

Merger functions are called with 2 elements and must handle merging no matter the order.

element.mount()

Mount the element on to the DOM.

This method is not designed to be called against the Element class, however it is typically called using Element.prototype.mount.call(this) (or super in CoffeScript) when overridden in a derived class, for example: 

// Taken from the Text element class
mount: function () {
    // Create the DOM element to mount
    this._domElement = document.createElement(this._tagName);

    // Set the attributes
    for (name in this._attributes) {
        this._domElement.setAttribute(name, this._attribute[name]);
    }

    // Set the content in the document
    this.updateInnerHTML();

    // With `_domElement` defined we use `super` to mount it to the DOM
    Element.prototype.mount.call(this);
}

element.removeAttr(name)

Remove the named attribute from the element.

element.removeCSSClass(className)

Remove a CSS class from the element.

element.tagName(name)

Get/Set the tag name for the element, if a name is given then the tag name is set, otherwise it is returned.

Element.getDOMElementAttributes(domElement)

Return a map of attributes for the domElement.

ElementCollection (inherits from Element, NodeCollection)

The ElementCollection class is used to implement elements that parent other elements (e.g a List parents ListItems, a TableRow parents TableCells, etc.).

collection = new ContentEdit.ElementCollection(tagName, attributes)

Create a new ElementCollection with the given tagName and attributes. The attributes should be provided as an object.

ResizableElement (inherits from Element)

The ResizableElement class provides a base for elements that can be resized (e.g Images and Videos).

ResizableElements support 2 special data attributes to help constrain the element to a minimum/maximum width; data-ce-min-width, data-ce-max-width. Often the maximum is set to the size of the original image. The default constraints are set by the DEFAULT_MAX_ELEMENT_WIDTH and DEFAULT_MIN_ELEMENT_WIDTH settings. For example an image's min/max width can be set like so: 

<img
    src="image.png"
    alt="Something interesting"
    data-ce-min-width="100"
    data-ce-max-width="1000"
    >

resizable = new ContentEdit.ResizableElement(tagName, attributes)

Create a new ResizableElement element with the given tagName and attributes. The attributes should be provided as an object.

resizable.aspectRatio()

Return the aspect ratio of the resizable (ratio = height / width).

The aspect ratio is typically set when the element is constructed. It is down to the inheriting element to determine if, when and how it may be updated after that. It is not safe to calculate the aspect ratio on the fly as casting the width/height of the element to an integer (for example when resizing) can alter the ratio.

resizable.maxSize()

Return the maximum size the resizable can be set to.

resizable.minSize()

Return the minimum size the element can be set to (use the data-ce-min-width attribute to set this).

By default max/minSize only considers the width and calculates the height based on the element's aspect ratio. For elements that support a non-fixed aspect ratio this method should be overridden to support querying for a maximum/minimum height.

resizable.resize(corner, x, y)

Start resizing the resizable. The x, y are the start coordinates of the resize, corner is the corner of the resizable the resize started in (corners are specified as a 2 element array in the form [top|bottom, left|right]).

resizable.size(newSize)

Get/Set the size of the resizable, if a newSize is given then the size is set, otherwise the current size is returned.

Fixture (inherits from NodeCollection)

Fixtures take a DOM element and convert it to a single editable element, this allows the creation of field like regions within a page. Fixtures sit directly below the Root in the editable tree and along with Regions are the highest level element that directly represents a DOM element.

The output of the html method for fixtures includes the surrounding element, for example if a Fixture is created using a H1 element the HTML output will contain the H1 element and its content.

This is a change from the early versions of Fixture, prior to ContentEdit 1.3.0 only the inner content of a fixture was returned by the html method.

fixture = new ContentEdit.Fixture(domElement)

Create a new Fixture from the given domElement.

Region (inherits from NodeCollection)

Regions convert the content of a DOM element into a collection of editable elements. Regions sit directly below the Root in the editable tree and along with Fixtures are the highest level element that directly represents a DOM element.

region = new ContentEdit.Region(domElement)

Create a new Region from the given domElement.

region.setContent(domElementOrHTML)

Set the contents of the region using a DOM element or HTML string. The method accepts content as either a DOM element or HTML string.

All previous content will be removed from the region and replaced with the new content.

Root (inherits from Node)

The Root node manages state and listens for events from all elements in the editable tree, it is the root only in name as it doesn't directly represent  a DOM element.

The Root node actually has no specific knowledge of any other element in the tree, in this respect it is perhaps more useful to visualise it as a shared context that all element nodes talk to (and through).

root = ContentEdit.Root.get()

The Root node is a singleton and access is provided through the get method which returns the single root instance.

root.dragging()

Return the element currently being dragged.

root.dropTarget()

Return the element under the element currently being dragged.

root.focused()

Return the element currently focused.

root.resizing()

Return the element currently being resized.

root.cancelDragging()

Cancel the current dragging interaction.

root.startDragging(element, x, y)

Set element as dragging, starting from the position x, y in pixels.

root.startResizing(element, corner, x, y, fixed)

Set element as resizing starting from the position x, y in pixels, using the corner (corners are specified as a 2 element array in the form [top|bottom, left|right]). The fixed flag determines if the resize will retain the element's aspect ratio or allow independent resizing of the width and height.

Only one element can be dragged or resized at any time.

TagNames

The TagNames class allows DOM tag names to be associated with Element classes. When a Region is initialized it uses this association to determine how best to handle each child DOM element it converts to an editable element.

Tag names are associated with Element classes through the register method. To handle cases where the same tag name is used for more than one element class, the data-ce-tag attribute can be used to specify a tag name. This is also useful when you want to specify a tag name that is conceptual. Perhaps you're using the <p> tag as the wrapper for your newly written editable Date element, here the data-ce-tag attribute needs to be used to indicate which class is relevant (e.g data-ce-tag="date" assuming we mapped date to our Date class).

As a concrete example, let's say we wanted to associate a <p> tag with the PreText element class instead of with the Text class it's normally associated with. To do so we just need to use the data-ce-tag like so: 

<p data-ce-tag="pre">
   ...insert preformatted text here...
</p>

tagNames = ContentEdit.TagNames.get()

The TagNames class is a singleton and access is provided through the get method which returns the single tagNames instance.

tagNames.register(cls, tagNames...)

Register an element class with one or more tagNames.

tagNames.match(tagName)

Return an element class for the specified tagName (case insensitive), if we can't find an associated class the Static element class will be returned.

Image (inherits from ResizableElement)

Image is the standard element class for <img> tags. Images can be defined in the HTML standalone or may be wrapped with an anchor tag: 

<!-- Standalone -->
<img src="image.png" alt="Something interesting">

<!-- Wrapped with an anchor -->
<a href="/something-interesting" data-ce-tag="img">
    <img src="image.png" alt="Something interesting">
</a>

image = new ContentEdit.Image(attributes, a)

Create a new Image element with the given attributes (as an object), optionally an a can be specified as an object providing a set of attributes for an anchor tag <a> that will wrap the image, for example: 

var image = new ContentEdit.Image(
    {src: 'somthing-interesting.png', alt='Something interesting'},
    {href='/something-interesting'}
    );​

image.a

The a property will be null for the image if not wrapped in an <a> and will be a populated object for an image wrapped in an <a> (where each property represents an attribute of the anchor).

ImageFixture (inherits from Element)

Image fixtures provide a mechanism for adding images as fixtures. The structure of an image fixture is slightly different than you might at first expect, rather than using an image element alone image fixtures use a image element within a (typically) block level element, for example: 

<div data-ce-tag="img-fixed" style="background-url: url('some-image.jpg');" >
    <img scr="some-image.jpg" alt="Some image">
</div>​

This structure provides makes it easy to use CSS to set how the image covers the fixture (typically the inner image element is hidden).

image = new ContentEdit.Image(tagName, attributes, src, alt)

Create a new ImageFixture element with the given tag name, attributes (as an object), src (URL to the image) and alt (alternative description).

image.alt(alt)

Get/Set the alternative description for the image fixture, if an alt value is given then it is set, otherwise the current alternative description is returned.

image.src(src)

Get/Set the source (URL) for the image fixture, if a src is given then the source will be set, otherwise the current source is returned.

List (inherits from ElementCollection)

List is the standard element class for <ol> and <ul> tags.

list = new ContentEdit.List(tagName, attributes)

Create a new ListElement for the given tagName and attributes. The attributes should be provided as an object.

ListItem (inherits from ElementCollection)

ListItem is the standard element class for <li> tags. ListItems can contain both text content and another sub-list, for this reason they are implemented as a collection which contains at most 2 elements; a ListItemText element and sub-List element.

item = new ContentEdit.ListItem(attributes)

Create a new ListItem element with the given attributes. The attributes should be provided as an object.

item.list()

Return the List for this list item.

item.listItemText()

Return the ListTextItem for this item.

ListItemText (inherits from Text)

ListItemText is used to support text within a List element and has no direct association to any tag.

itemText = new ContentEdit.ListItem(content)

Create a new ListItemText element with the given content. The content can be specified as a native string or HTMLString.String instance.

Static (inherits from Element)

Stactic elements sit within a region but cannot be edited. Their purpose is to provide a fallback for when a DOM element within a region could not be converted (e.g because there was no Element class associated with the tag).

By default the only form of interaction Static elements support is allowing other element types to be dropped on them so that content can be organized around them. However if you want a Static element to support dragging then you can add the data-ce-moveable attribute. It's only a good idea to do this if you're confident there wont be a conflict with the element or its content for the mouseup and mousedown events.

A known problem with the Static elements is that we rely on the browser's interpretation of the content (because we rely on innerHTML); this can lead to differences in the output as well as inconsistencies between browsers.

static = new ContentEdit.Static(tagName, attributes, content)

Create a new Static element with given tagName, attributes and inner content. The attributes should be provided as an object. The content should be a native string.

Table (inherits from ElementCollection)

Table is the standard element class for <table> tags.

table = new ContentEdit.Table(attributes)

Create a new Table element with the given attributes. The attributes should be provided as an object.

table.firstSection()

Return the first TableSection for the table.

table.lastSection()

Return the last TableSection for the table.

table.tbody()

Return the body TableSection for the table.

table.tfoot()

Return the footer TableSection for the table.

table.thead()

Return the header TableSection for the table.

TableSection (inherits from ElementCollection)

TableSection is the standard element class for <thead>, <tbody> and <tfoot> tags.

section = new ContentEdit.TableSection(tagName, attributes)

Create a new TableSection element with the given tagName and attributes. The attributes should be provided as an object.

TableRow (inherits from ElementCollection)

TableRow is the standard element class for <tr> tags.

row = new ContentEdit.TableRow(attributes)

Create a new TableRow element with the given attributes. The attributes should be provided as an object.

row.isEmpty()

Return true if every cell in the table row is empty.

TableCell (inherits from ElementCollection)

TableCell is the standard element class for <th> and <td> tags. Whilst TableCells are a collection they only ever hold one child, a TableCellText element.

cell = new ContentEdit.TableCell(tagName, attributes)

Create a new TableCell element with the given tagName and attributes. The attributes should be provided as an object.

TableCellText (inherits from Text)

TableCellText is used to support text within a TableCell element, and has no direct association to any tag.

cellText = new ContentEdit.TableCellText(content)

Create a new TableCellText element with the given content. The content can be specified as a native string or HTMLString.String instance.

Text (inherits from Element)

Text is the standard element class for <address>, <blockquote>, <h1-6> and <p> tags.

By default when a text element is empty the CSS will insert three dots (...) within the element as a placeholder, this value can be overridden however by setting the data-ce-placeholder attribute against the text element (e.g <p data-ce-placeholder="Insert title..."></p>).

text = new ContentEdit.Text(tagName, attributes, content)

Create a new Text element with the given tagName, attributes and content. The attributes should be provided as an object. The content can be specified as a native string or HTMLString.String instance.

text.restoreState()

Restore the text element's state after storeState has been called. This restores the caret position and content selection.

text.selection(selection)

Get/Set the content selection (ContentSelect.Range) for the text element. If selection is given then the selection is set, else the current selection is returned.

text.storeState()

Save the selection state of the text element so that it can be restored (with restoreState) after being unmounted and re-mounted.

text.updateInnerHTML()

Update the inner HTML of the DOM element with the text element's content.

PreText (inherits from Text)

PreText is the standard element class for <pre> tags.

preText = new ContentEdit.PreText(tagName, attributes, content)

Create a new preText element with the given tagName, attributes and content. The attributes should be provided as an object. The content can be specified as a native string or HTMLString.String instance.

ContentEdit.PreText.TAB_INDENT

Defaults to '    ' (4 spaces). Allows the string used to represent a single tab indent to be specified.

Video (inherits from ResizableElement)

Video is the standard element class for <video> and <iframe> tags. Since YouTube, Vimeo and other online video sharing sites embed videos in pages using <iframe>s, and since the <video> tag is not all that commonly used at present, I took the view that <iframe>s should be associated with videos.

If you don't want <iframe>s to be associated with video tags either add data-ce-tag="static" to the <iframe> itself or re-register just <video> with the Video class using the TagNames class (e.g. ContentEdit.TagNames.get().register(ContentEdit.Video, 'video')).

video = new ContentEdit.Video(tagName, attributes, sources)

Create a new Video element with the given tagName, attributes and sources. The attributes should be provided as an object. The sources should be provided as an array of objects.

video.sources

List of sources for video element. The sources should be specified in the form of an array of objects like so: 

video.sources = [{'src': 'foo.ogg', 'type': 'video/ogg'}, ...];