Codex

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 source is located in js/_enqueues/wp/mce-view.js and output in `wp-includes/js/mce-view.js` during build.

Resources

Related