<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[21961] trunk: Makes custom TinyMCE views easier to implement.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg > ul, #logmsg > ol { margin-left: 0; margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/21961">21961</a></dd>
<dt>Author</dt> <dd>koopersmith</dd>
<dt>Date</dt> <dd>2012-09-24 00:13:18 +0000 (Mon, 24 Sep 2012)</dd>
</dl>
<h3>Log Message</h3>
<pre>Makes custom TinyMCE views easier to implement.
For details and examples, see the ticket.
props azaozz, fixes <a href="http://core.trac.wordpress.org/ticket/21812">#21812</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmineditformadvancedphp">trunk/wp-admin/edit-form-advanced.php</a></li>
<li><a href="#trunkwpincludesclasswpeditorphp">trunk/wp-includes/class-wp-editor.php</a></li>
<li><a href="#trunkwpincludesjstinymcethemesadvancedskinswp_themecontentcss">trunk/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css</a></li>
<li><a href="#trunkwpincludesscriptloaderphp">trunk/wp-includes/script-loader.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkwpincludesjsmceviewjs">trunk/wp-includes/js/mce-view.js</a></li>
<li><a href="#trunkwpincludesjsmceviewminjs">trunk/wp-includes/js/mce-view.min.js</a></li>
<li>trunk/wp-includes/js/tinymce/plugins/wpview/</li>
<li><a href="#trunkwpincludesjstinymcepluginswpvieweditor_pluginjs">trunk/wp-includes/js/tinymce/plugins/wpview/editor_plugin.js</a></li>
<li><a href="#trunkwpincludesjstinymcepluginswpvieweditor_plugin_srcjs">trunk/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmineditformadvancedphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/edit-form-advanced.php (21960 => 21961)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/edit-form-advanced.php 2012-09-23 22:58:43 UTC (rev 21960)
+++ trunk/wp-admin/edit-form-advanced.php 2012-09-24 00:13:18 UTC (rev 21961)
</span><span class="lines">@@ -22,6 +22,8 @@
</span><span class="cx"> wp_enqueue_style( 'media-views' );
</span><span class="cx"> wp_plupload_default_settings();
</span><span class="cx"> add_action( 'admin_footer', 'wp_print_media_templates' );
</span><ins>+
+ wp_enqueue_script( 'mce-view' );
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span></span></pre></div>
<a id="trunkwpincludesclasswpeditorphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/class-wp-editor.php (21960 => 21961)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/class-wp-editor.php 2012-09-23 22:58:43 UTC (rev 21960)
+++ trunk/wp-includes/class-wp-editor.php 2012-09-24 00:13:18 UTC (rev 21961)
</span><span class="lines">@@ -167,12 +167,12 @@
</span><span class="cx"> self::$baseurl = includes_url('js/tinymce');
</span><span class="cx"> self::$mce_locale = $mce_locale = ( '' == get_locale() ) ? 'en' : strtolower( substr(get_locale(), 0, 2) ); // only ISO 639-1
</span><span class="cx"> $no_captions = (bool) apply_filters( 'disable_captions', '' );
</span><del>- $plugins = array( 'inlinepopups', 'spellchecker', 'tabfocus', 'paste', 'media', 'fullscreen', 'wordpress', 'wpeditimage', 'wpgallery', 'wplink', 'wpdialogs' );
</del><ins>+ $plugins = array( 'inlinepopups', 'spellchecker', 'tabfocus', 'paste', 'media', 'fullscreen', 'wordpress', 'wpeditimage', 'wpgallery', 'wplink', 'wpdialogs', 'wpview' );
</ins><span class="cx"> $first_run = true;
</span><span class="cx"> $ext_plugins = '';
</span><span class="cx">
</span><span class="cx"> if ( $set['teeny'] ) {
</span><del>- self::$plugins = $plugins = apply_filters( 'teeny_mce_plugins', array('inlinepopups', 'fullscreen', 'wordpress', 'wplink', 'wpdialogs'), $editor_id );
</del><ins>+ self::$plugins = $plugins = apply_filters( 'teeny_mce_plugins', array('inlinepopups', 'fullscreen', 'wordpress', 'wplink', 'wpdialogs', 'wpview'), $editor_id );
</ins><span class="cx"> } else {
</span><span class="cx"> /*
</span><span class="cx"> The following filter takes an associative array of external plugins for TinyMCE in the form 'plugin_name' => 'url'.
</span></span></pre></div>
<a id="trunkwpincludesjsmceviewjs"></a>
<div class="addfile"><h4>Added: trunk/wp-includes/js/mce-view.js (0 => 21961)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/mce-view.js (rev 0)
+++ trunk/wp-includes/js/mce-view.js 2012-09-24 00:13:18 UTC (rev 21961)
</span><span class="lines">@@ -0,0 +1,134 @@
</span><ins>+if ( typeof wp === 'undefined' )
+ var wp = {};
+
+(function($){
+ var views = {},
+ instances = {};
+
+ wp.mce = {};
+
+ wp.mce.view = {
+ // The default properties used for the objects in `wp.mce.view.add()`.
+ defaults: {
+ view: Backbone.View,
+ text: function( instance ) {
+ return instance.options.original;
+ }
+ },
+
+ // Registers a new TinyMCE view.
+ //
+ // Accepts a unique `id` and an `options` object.
+ //
+ // `options`
+ // If `view` is an object, it will automatically be passed to
+ // `wp.mce.View.extend( view, properties )` to create a new view class.
+ //
+ // If the `view` provided is already a constructor, the `properties`
+ // variable is ignored.
+ 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;
+
+ // Extend the `options` object with the parent's properties.
+ _.defaults( options, parent );
+
+ // If the `view` provided was an object, automatically create
+ // a new `Backbone.View` constructor, using the parent's `view`
+ // constructor as a base.
+ if ( ! _.isFunction( options.view ) )
+ options.view = parent.view.extend( options.view );
+
+ views[ id ] = options;
+ },
+
+ // Returns a TinyMCE view options object.
+ get: function( id ) {
+ return views[ id ];
+ },
+
+ // Unregisters a TinyMCE view.
+ remove: function( id ) {
+ delete views[ id ];
+ },
+
+ // 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 ) {
+ _.each( views, function( view, viewType ) {
+ if ( ! view.pattern )
+ return;
+
+ // Scan for matches.
+ content = content.replace( view.pattern, function( match ) {
+ var instance, id, tag;
+
+ // Create a new view instance.
+ instance = new view.view({
+ original: match,
+ results: _.toArray( arguments ),
+ 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 + '>';
+ });
+ });
+
+ return content;
+ },
+
+ // Renders any view instances inside a DOM node `scope`.
+ //
+ // View instances are detected by the presence of wrapper elements.
+ // To generate wrapper elements, pass your content through
+ // `wp.mce.view.toViews( content )`.
+ render: function( scope ) {
+ $( '.wp-view-wrap', scope ).each( function() {
+ var wrapper = $(this),
+ id = wrapper.data('wp-view'),
+ view = instances[ id ];
+
+ if ( ! view )
+ return;
+
+ // Render the view.
+ view.render();
+ // Detach the view element to ensure events are not unbound.
+ view.$el.detach();
+
+ // Empty the wrapper, attach the view element to the wrapper,
+ // and add an ending marker to the wrapper to help regexes
+ // scan the HTML string.
+ wrapper.empty().append( view.el ).append('<span data-wp-view-end></span>');
+ });
+ },
+
+ // Scans an HTML `content` string and replaces any view instances with
+ // their respective text representations.
+ toText: function( content ) {
+ return content.replace( /<(?:div|span)[^>]+data-wp-view="([^"]+)"[^>]*>.*?<span data-wp-view-end[^>]*><\/span><\/(?:div|span)>/g, function( match, id ) {
+ var instance = instances[ id ],
+ view;
+
+ if ( instance )
+ view = wp.mce.view.get( instance.options.viewType );
+
+ return instance && view ? view.text( instance ) : '';
+ });
+ }
+ };
+
+}(jQuery));
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpincludesjstinymcepluginswpvieweditor_plugin_srcjs"></a>
<div class="addfile"><h4>Added: trunk/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js (0 => 21961)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js (rev 0)
+++ trunk/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js 2012-09-24 00:13:18 UTC (rev 21961)
</span><span class="lines">@@ -0,0 +1,79 @@
</span><ins>+/**
+ * WordPress View plugin.
+ */
+
+(function() {
+ tinymce.create('tinymce.plugins.wpView', {
+ init : function( editor, url ) {
+ var wpView = this;
+
+ // Check if the `wp.mce` API exists.
+ if ( typeof wp === 'undefined' || ! wp.mce )
+ return;
+
+ editor.onPreInit.add( function( editor ) {
+ // Add elements so we can set `contenteditable` to false.
+ editor.schema.addValidElements('div[*],span[*]');
+ });
+
+ // When the editor's content changes, scan the new content for
+ // matching view patterns, and transform the matches into
+ // view wrappers. Since the editor's DOM is outdated at this point,
+ // we'll wait to render the views.
+ editor.onBeforeSetContent.add( function( editor, o ) {
+ if ( ! o.content )
+ return;
+
+ o.content = wp.mce.view.toViews( o.content );
+ });
+
+ // When the editor's content has been updated and the DOM has been
+ // processed, render the views in the document.
+ editor.onSetContent.add( function( editor, o ) {
+ wp.mce.view.render( editor.getDoc() );
+ });
+
+ editor.onInit.add( function( editor ) {
+
+ // When the selection's content changes, scan any new content
+ // for matching views and immediately render them.
+ //
+ // Runs on paste and on inserting nodes/html.
+ editor.selection.onSetContent.add( function( selection, o ) {
+ if ( ! o.context )
+ return;
+
+ var node = selection.getNode();
+
+ if ( ! node.innerHTML )
+ return;
+
+ node.innerHTML = wp.mce.view.toViews( node.innerHTML );
+ wp.mce.view.render( node );
+ });
+ });
+
+ // When the editor's contents are being accessed as a string,
+ // transform any views back to their text representations.
+ editor.onPostProcess.add( function( editor, o ) {
+ if ( ( ! o.get && ! o.save ) || ! o.content )
+ return;
+
+ o.content = wp.mce.view.toText( o.content );
+ });
+ },
+
+ getInfo : function() {
+ return {
+ longname : 'WordPress Views',
+ author : 'WordPress',
+ authorurl : 'http://wordpress.org',
+ infourl : 'http://wordpress.org',
+ version : '1.0'
+ };
+ }
+ });
+
+ // Register plugin
+ tinymce.PluginManager.add( 'wpview', tinymce.plugins.wpView );
+})();
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpincludesjstinymcethemesadvancedskinswp_themecontentcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css (21960 => 21961)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css 2012-09-23 22:58:43 UTC (rev 21960)
+++ trunk/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css 2012-09-24 00:13:18 UTC (rev 21961)
</span><span class="lines">@@ -141,3 +141,7 @@
</span><span class="cx"> height: 250px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+/* WordPress TinyMCE Previews */
+div.wp-preview-wrap {
+ display: inline;
+}
</ins></span></pre></div>
<a id="trunkwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/script-loader.php (21960 => 21961)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/script-loader.php 2012-09-23 22:58:43 UTC (rev 21960)
+++ trunk/wp-includes/script-loader.php 2012-09-24 00:13:18 UTC (rev 21961)
</span><span class="lines">@@ -322,6 +322,8 @@
</span><span class="cx"> 'selectMediaMultiple' => __( 'Select one or more media files:' ),
</span><span class="cx"> ) );
</span><span class="cx">
</span><ins>+ $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'backbone', 'jquery' ), false, 1 );
+
</ins><span class="cx"> if ( is_admin() ) {
</span><span class="cx"> $scripts->add( 'ajaxcat', "/wp-admin/js/cat$suffix.js", array( 'wp-lists' ) );
</span><span class="cx"> $scripts->add_data( 'ajaxcat', 'group', 1 );
</span></span></pre>
</div>
</div>
</body>
</html>