WordPress.org

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

wp.mce.views

Description

The WordPress views system enables live previewing of certain shortcodes while editing a post. wp.mce.views is a set of utilities that simplifies adding custom UI within a TinyMCE editor. At its core, it serves as a series of converters, transforming text to a custom UI, and back again. The WordPress audio-playlist, video-playlist, audio embeds and video embeds are examples of WordPress views.

Important: Note that Wordpress 4.2 includes a major rewrite of the wp-views as described here

Usage

 wp.mce.views.register( id, view-object ) 


Technical Details

A wp.mce.view instance is an extension (subclass) of the Backbone View type:

wp.mce.View.extend = Backbone.View.extend;
_.extend( wp.mce.View.prototype, { ... methods of wp.mce.View ... }

The methods of the view include:

render Renders all view nodes tied to this view instance that are not yet rendered.

getNodes Gets all view nodes tied to this view instance. Parameters:

  • @param {Function} callback A callback. callback( mce editor object, view, view .wpview-content element ) is called for each of this view that is shown in each editor supporting wp-views.
  • @param {Boolean} rendered Get (un)rendered view nodes. Optional.


setContent Sets the content for all view nodes tied to this view instance. Parameters:

  • @param {*} content The content to set.
  • @param {Function} callback A callback. Optional.
  • @param {Boolean} rendered Only set for (un)rendered nodes. Optional.

setIframes Sets the content in an iframe for all view nodes tied to this view instance. Parameters:

  • @param {String} head HTML string to be added to the head of the document.
  • @param {String} body HTML string to be added to the body of the document.
  • @param {Function} callback A callback. Optional.
  • @param {Boolean} rendered Only set for (un)rendered nodes. Optional.

For complete API see the source code.

Source File

wp.mce.views is located in wp-includes/js/mce-view.js.

Resources

Related