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

• WordPress custom TinyMCE view and shortcode editor - An example of wp.mce.views.register() to create a view for a shortcode and adds a tinymce popup for editing the shortcode.
• Take your shortcodes to the ultimate level - Tutorial for using wordpress views

Related