diff --git a/wp-includes/js/mce-view.js b/wp-includes/js/mce-view.js
index a1954a6c13..a42641f246 100644
--- a/wp-includes/js/mce-view.js
+++ b/wp-includes/js/mce-view.js
@@ -1,3 +1,4 @@
+// Ensure the global `wp` object exists.
 if ( typeof wp === 'undefined' )
 	var wp = {};
 
@@ -5,45 +6,94 @@ if ( typeof wp === 'undefined' )
 	var views = {},
 		instances = {};
 
-	wp.mce = {};
+	// Create the `wp.mce` object if necessary.
+	wp.mce = wp.mce || {};
 
+	// wp.mce.view
+	// -----------
+	//
+	// 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.
 	wp.mce.view = {
+		// ### defaults
 		// The default properties used for the objects in `wp.mce.view.add()`.
 		defaults: {
 			view: Backbone.View,
 			text: function( instance ) {
 				return instance.options.original;
+			},
+
+			toView: function( content ) {
+				if ( ! this.pattern )
+					return;
+
+				this.pattern.lastIndex = 0;
+				var match = this.pattern.exec( content );
+
+				if ( ! match )
+					return;
+
+				return {
+					index:   match.index,
+					content: match[0],
+					options: {
+						original: match[0],
+						results:  _.toArray( arguments )
+					}
+				};
 			}
 		},
 
+		shortcode: {
+			view: Backbone.View,
+			text: function( instance ) {
+				return instance.options.shortcode.text();
+			},
+
+			toView: function( content ) {
+				var match = wp.shortcode.next( this.tag, content );
+
+				if ( ! match )
+					return;
+
+				return {
+					index:   match.index,
+					content: match.content,
+					options: {
+						shortcode: match.shortcode
+					}
+				};
+			}
+		},
+
+		// ### add( id, options )
 		// Registers a new TinyMCE view.
 		//
 		// Accepts a unique `id` and an `options` object.
 		//
 		// `options` accepts the following properties:
 		//
-		// `pattern` is the regular expression used to scan the content and
+		// * `pattern` is the regular expression used to scan the content and
 		// detect matching views.
 		//
-		// `view` is a `Backbone.View` constructor. If a plain object is
+		// * `view` is a `Backbone.View` constructor. If a plain object is
 		// provided, it will automatically extend the parent constructor
 		// (usually `Backbone.View`). Views are instantiated when the `pattern`
 		// is successfully matched. The instance's `options` object is provided
 		// with the `original` matched value, the match `results` including
 		// capture groups, and the `viewType`, which is the constructor's `id`.
 		//
-		// `extend` an existing view by passing in its `id`. The current
+		// * `extend` an existing view by passing in its `id`. The current
 		// view will inherit all properties from the parent view, and if
 		// `view` is set to a plain object, it will extend the parent `view`
 		// constructor.
 		//
-		// `text` is a method that accepts an instance of the `view`
+		// * `text` is a method that accepts an instance of the `view`
 		// constructor and transforms it into a text representation.
 		add: function( id, options ) {
-			var parent;
-
 			// Fetch the parent view or the default options.
-			parent = options.extend ? wp.mce.view.get( options.extend ) : wp.mce.view.defaults;
+			var parent = options.extend ? wp.mce.view.get( options.extend ) : wp.mce.view.defaults;
 
 			// Extend the `options` object with the parent's properties.
 			_.defaults( options, parent );
@@ -58,52 +108,93 @@ if ( typeof wp === 'undefined' )
 			views[ id ] = options;
 		},
 
+		// ### get( id )
 		// Returns a TinyMCE view options object.
 		get: function( id ) {
 			return views[ id ];
 		},
 
+		// ### remove( id )
 		// Unregisters a TinyMCE view.
 		remove: function( id ) {
 			delete views[ id ];
 		},
 
+		// ### toViews( content )
 		// Scans a `content` string for each view's pattern, replacing any
 		// matches with wrapper elements, and creates a new view instance for
 		// every match.
 		//
 		// To render the views, call `wp.mce.view.render( scope )`.
 		toViews: function( content ) {
+			var pieces = [ { content: content } ],
+				current;
+
 			_.each( views, function( view, viewType ) {
-				if ( ! view.pattern )
-					return;
+				current = pieces.slice();
+				pieces  = [];
 
-				// Scan for matches.
-				content = content.replace( view.pattern, function( match ) {
-					var instance, id, tag;
+				_.each( current, function( piece ) {
+					var remaining = piece.content,
+						result;
 
-					// Create a new view instance.
-					instance = new view.view({
-						original: match,
-						results:  _.toArray( arguments ),
-						viewType: viewType
-					});
+					// Ignore processed pieces, but retain their location.
+					if ( piece.processed ) {
+						pieces.push( piece );
+						return;
+					}
 
-					// Use the view's `id` if it already exists. Otherwise,
-					// create a new `id`.
-					id = instance.el.id = instance.el.id || _.uniqueId('__wpmce-');
-					instances[ id ] = instance;
+					// Iterate through the string progressively matching views
+					// and slicing the string as we go.
+					while ( remaining && (result = view.toView( remaining )) ) {
+						// Any text before the match becomes an unprocessed piece.
+						if ( result.index )
+							pieces.push({ content: remaining.substring( 0, result.index ) });
 
-					// If the view is a span, wrap it in a span.
-					tag = 'span' === instance.tagName ? 'span' : 'div';
+						// Add the processed piece for the match.
+						pieces.push({
+							content:   wp.mce.view.toView( viewType, result.options ),
+							processed: true
+						});
 
-					return '<' + tag + ' class="wp-view-wrap" data-wp-view="' + id + '" contenteditable="false"></' + tag + '>';
+						// Update the remaining content.
+						remaining = remaining.slice( result.index + result.content.length );
+					}
+
+					// There are no additional matches. If any content remains,
+					// add it as an unprocessed piece.
+					if ( remaining )
+						pieces.push({ content: remaining });
 				});
 			});
 
-			return content;
+			return _.pluck( pieces, 'content' ).join('');
 		},
 
+		toView: function( viewType, options ) {
+			var view = wp.mce.view.get( viewType ),
+				instance, id, tag;
+
+			if ( ! view )
+				return '';
+
+			// Create a new view instance.
+			instance = new view.view( _.extend( options || {}, {
+				viewType: viewType
+			}) );
+
+			// Use the view's `id` if it already exists. Otherwise,
+			// create a new `id`.
+			id = instance.el.id = instance.el.id || _.uniqueId('__wpmce-');
+			instances[ id ] = instance;
+
+			// If the view is a span, wrap it in a span.
+			tag = 'span' === instance.tagName ? 'span' : 'div';
+
+			return '<' + tag + ' class="wp-view-wrap" data-wp-view="' + id + '" contenteditable="false"></' + tag + '>';
+		},
+
+		// ### render( scope )
 		// Renders any view instances inside a DOM node `scope`.
 		//
 		// View instances are detected by the presence of wrapper elements.
@@ -130,6 +221,7 @@ if ( typeof wp === 'undefined' )
 			});
 		},
 
+		// ### toText( content )
 		// Scans an HTML `content` string and replaces any view instances with
 		// their respective text representations.
 		toText: function( content ) {
@@ -145,4 +237,4 @@ if ( typeof wp === 'undefined' )
 		}
 	};
 
-}(jQuery));
\ No newline at end of file
+}(jQuery));
diff --git a/wp-includes/js/shortcode.js b/wp-includes/js/shortcode.js
new file mode 100644
index 0000000000..98c05fa7c0
--- /dev/null
+++ b/wp-includes/js/shortcode.js
@@ -0,0 +1,215 @@
+// Utility functions for parsing and handling shortcodes in Javascript.
+
+// Ensure the global `wp` object exists.
+if ( typeof wp === 'undefined' )
+	var wp = {};
+
+(function(){
+	wp.shortcode = {
+		// ### Find the next matching shortcode
+		//
+		// Given a shortcode `tag`, a block of `text, and an optional starting
+		// `index`, returns the next matching shortcode or `undefined`.
+		//
+		// Shortcodes are formatted as an object that contains the match
+		// `content`, the matching `index`, and the parsed `shortcode` object.
+		next: function( tag, text, index ) {
+			var re = wp.shortcode.regexp( tag ),
+				match, result;
+
+			re.lastIndex = index || 0;
+			match = re.exec( text );
+
+			if ( ! match )
+				return;
+
+			// If we matched an escaped shortcode, try again.
+			if ( match[1] === '[' && match[6] === ']' )
+				return wp.shortcode.next( tag, text, re.lastIndex );
+
+			result = {
+				index:     match.index,
+				content:   match[0],
+				shortcode: new wp.shortcode.Match( match )
+			};
+
+			// If we matched a leading `[`, strip it from the match
+			// and increment the index accordingly.
+			if ( match[1] ) {
+				result.match = result.match.slice( 1 );
+				result.index++;
+			}
+
+			// If we matched a trailing `]`, strip it from the match.
+			if ( match[6] )
+				result.match = result.match.slice( 0, -1 );
+
+			return result;
+		},
+
+		// ### Replace matching shortcodes in a block of text.
+		//
+		// Accepts a shortcode `tag`, content `text` to scan, and a `callback`
+		// to process the shortcode matches and return a replacement string.
+		// Returns the `text` with all shortcodes replaced.
+		//
+		// Shortcode matches are objects that contain the shortcode `tag`,
+		// a shortcode `attrs` object, the `content` between shortcode tags,
+		// and a boolean flag to indicate if the match was a `single` tag.
+		replace: function( tag, text, callback ) {
+			return text.replace( wp.shortcode.regexp( tag ), function( match, left, tag, attrs, closing, content, right, offset ) {
+				// If both extra brackets exist, the shortcode has been
+				// properly escaped.
+				if ( left === '[' && right === ']' )
+					return match;
+
+				// Create the match object and pass it through the callback.
+				var result = callback( new wp.shortcode.Match( arguments ) );
+
+				// Make sure to return any of the extra brackets if they
+				// weren't used to escape the shortcode.
+				return result ? left + result + right : match;
+			});
+		},
+
+		// ### Generate a shortcode RegExp.
+		//
+		// The base regex is functionally equivalent to the one found in
+		// `get_shortcode_regex()` in `wp-includes/shortcodes.php`.
+		//
+		// Capture groups:
+		//
+		// 1. An extra `[` to allow for escaping shortcodes with double `[[]]`
+		// 2. The shortcode name
+		// 3. The shortcode argument list
+		// 4. The self closing `/`
+		// 5. The content of a shortcode when it wraps some content.
+		// 6. An extra `]` to allow for escaping shortcodes with double `[[]]`
+		regexp: _.memoize( function( tag ) {
+			return new RegExp( '\\[(\\[?)(' + tag + ')\\b([^\\]\\/]*(?:\\/(?!\\])[^\\]\\/]*)*?)(?:(\\/)\\]|\\](?:([^\\[]*(?:\\[(?!\\/\\2\\])[^\\[]*)*)\\[\\/\\2\\])?)(\\]?)', 'g' );
+		}),
+
+
+		// ### Parse shortcode attributes.
+		//
+		// Shortcodes accept many types of attributes. These can chiefly be
+		// divided into named and numeric attributes:
+		//
+		// Named attributes are assigned on a key/value basis, while numeric
+		// attributes are treated as an array.
+		//
+		// Named attributes can be formatted as either `name="value"`,
+		// `name='value'`, or `name=value`. Numeric attributes can be formatted
+		// as `"value"` or just `value`.
+		attrs: _.memoize( function( text ) {
+			var named   = {},
+				numeric = [],
+				pattern, match;
+
+			// This regular expression is reused from `shortcode_parse_atts()`
+			// in `wp-includes/shortcodes.php`.
+			//
+			// Capture groups:
+			//
+			// 1. An attribute name, that corresponds to...
+			// 2. a value in double quotes.
+			// 3. An attribute name, that corresponds to...
+			// 4. a value in single quotes.
+			// 5. An attribute name, that corresponds to...
+			// 6. an unquoted value.
+			// 7. A numeric attribute in double quotes.
+			// 8. An unquoted numeric attribute.
+			pattern = /(\w+)\s*=\s*"([^"]*)"(?:\s|$)|(\w+)\s*=\s*\'([^\']*)\'(?:\s|$)|(\w+)\s*=\s*([^\s\'"]+)(?:\s|$)|"([^"]*)"(?:\s|$)|(\S+)(?:\s|$)/g;
+
+			// Map zero-width spaces to actual spaces.
+			text = text.replace( /[\u00a0\u200b]/g, ' ' );
+
+			// Match and normalize attributes.
+			while ( (match = pattern.exec( text )) ) {
+				if ( match[1] ) {
+					named[ match[1].toLowerCase() ] = match[2];
+				} else if ( match[3] ) {
+					named[ match[3].toLowerCase() ] = match[4];
+				} else if ( match[5] ) {
+					named[ match[5].toLowerCase() ] = match[6];
+				} else if ( match[7] ) {
+					numeric.push( match[7] );
+				} else if ( match[8] ) {
+					numeric.push( match[8] );
+				}
+			}
+
+			return {
+				named:   named,
+				numeric: numeric
+			};
+		})
+	};
+
+
+	// Shortcode Matches
+	// -----------------
+	//
+	// Shortcode matches are generated automatically when using
+	// `wp.shortcode.next()` and `wp.shortcode.replace()`. These two methods
+	// should handle most shortcode needs.
+	//
+	// Accepts a `match` object from calling `regexp.exec()` on a `RegExp`
+	// generated by `wp.shortcode.regexp()`. `match` can also be set to the
+	// `arguments` from a callback passed to `regexp.replace()`.
+	wp.shortcode.Match = function( match ) {
+		this.tag     = match[2];
+		this.attrs   = wp.shortcode.attrs( match[3] );
+		this.single  = !! match[4];
+		this.content = match[5];
+	};
+
+	_.extend( wp.shortcode.Match.prototype, {
+		// ### Get a shortcode attribute.
+		//
+		// Automatically detects whether `attr` is named or numeric and routes
+		// it accordingly.
+		get: function( attr ) {
+			return this.attrs[ _.isNumber( attr ) ? 'numeric' : 'named' ][ attr ];
+		},
+
+		// ### Set a shortcode attribute.
+		//
+		// Automatically detects whether `attr` is named or numeric and routes
+		// it accordingly.
+		set: function( attr, value ) {
+			this.attrs[ _.isNumber( attr ) ? 'numeric' : 'named' ][ attr ] = value;
+			return this;
+		},
+
+		// ### Transform the shortcode match into text.
+		text: function() {
+			var text    = '[' + this.tag;
+
+			_.each( this.attrs.numeric, function( value ) {
+				if ( /\s/.test( value ) )
+					text += ' "' + value + '"';
+				else
+					text += ' ' + value;
+			});
+
+			_.each( this.attrs.named, function( value, name ) {
+				text += ' ' + name + '="' + value + '"';
+			});
+
+			// If the tag is marked as singular, self-close the tag and
+			// ignore any additional content.
+			if ( this.single )
+				return text + ' /]';
+
+			// Complete the opening tag.
+			text += ']';
+
+			if ( this.content )
+				text += this.content;
+
+			// Add the closing tag.
+			return text + '[/' + this.tag + ']';
+		}
+	});
+}());
diff --git a/wp-includes/js/shortcode.min.js b/wp-includes/js/shortcode.min.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css b/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css
index 246cdf929d..807cf9b05d 100644
--- a/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css
+++ b/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css
@@ -142,6 +142,7 @@ img.wp-oembed {
 }
 
 /* WordPress TinyMCE Previews */
-div.wp-preview-wrap {
-	display: inline;
+div.wp-view-wrap,
+div.wp-view {
+	display: inline-block;
 }
diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php
index 01a3dec4ea..d7f5948326 100644
--- a/wp-includes/script-loader.php
+++ b/wp-includes/script-loader.php
@@ -322,7 +322,8 @@ function wp_default_scripts( &$scripts ) {
 		'selectMediaMultiple' => __( 'Select one or more media files:' ),
 	) );
 
-	$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'backbone', 'jquery' ), false, 1 );
+	$scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );
+	$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'backbone', 'jquery' ), false, 1 );
 
 	if ( is_admin() ) {
 		$scripts->add( 'ajaxcat', "/wp-admin/js/cat$suffix.js", array( 'wp-lists' ) );