WordPress.org

Make WordPress Core

Ticket #21812: 21812.diff

File 21812.diff, 9.5 KB (added by koopersmith, 6 years ago)
  • wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js

     
     1/**
     2 * WordPress View plugin.
     3 */
     4
     5(function() {
     6        tinymce.create('tinymce.plugins.wpView', {
     7                init : function( editor, url ) {
     8                        var wpView = this;
     9
     10                        // Check if the `wp.mce` API exists.
     11                        if ( typeof wp === 'undefined' || ! wp.mce )
     12                                return;
     13
     14                        editor.onPreInit.add( function( editor ) {
     15                                // Add elements so we can set `contenteditable` to false.
     16                                editor.schema.addValidElements('div[*],span[*]');
     17                        });
     18
     19                        // When the editor's content changes, scan the new content for
     20                        // matching view patterns, and transform the matches into
     21                        // view wrappers. Since the editor's DOM is outdated at this point,
     22                        // we'll wait to render the views.
     23                        editor.onBeforeSetContent.add( function( editor, o ) {
     24                                if ( ! o.content )
     25                                        return;
     26
     27                                o.content = wp.mce.view.toViews( o.content );
     28                        });
     29
     30                        // When the editor's content has been updated and the DOM has been
     31                        // processed, render the views in the document.
     32                        editor.onSetContent.add( function( editor, o ) {
     33                                wp.mce.view.render( editor.getDoc() );
     34                        });
     35
     36                        editor.onInit.add( function( editor ) {
     37
     38                                // When the selection's content changes, scan any new content
     39                                // for matching views and immediately render them.
     40                                //
     41                                // Runs on paste and on inserting nodes/html.
     42                                editor.selection.onSetContent.add( function( selection, o ) {
     43                                        if ( ! o.context )
     44                                                return;
     45
     46                                        var node = selection.getNode();
     47
     48                                        if ( ! node.innerHTML )
     49                                                return;
     50
     51                                        node.innerHTML = wp.mce.view.toViews( node.innerHTML );
     52                                        wp.mce.view.render( node );
     53                                });
     54                        });
     55
     56                        // When the editor's contents are being accessed as a string,
     57                        // transform any views back to their text representations.
     58                        editor.onPostProcess.add( function( editor, o ) {
     59                                if ( ( ! o.get && ! o.save ) || ! o.content )
     60                                        return;
     61
     62                                o.content = wp.mce.view.toText( o.content );
     63                        });
     64                },
     65
     66                getInfo : function() {
     67                        return {
     68                                longname  : 'WordPress Views',
     69                                author    : 'WordPress',
     70                                authorurl : 'http://wordpress.org',
     71                                infourl   : 'http://wordpress.org',
     72                                version   : '1.0'
     73                        };
     74                }
     75        });
     76
     77        // Register plugin
     78        tinymce.PluginManager.add( 'wpview', tinymce.plugins.wpView );
     79})();
  • wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

     
    141141        height: 250px;
    142142}
    143143
     144/* WordPress TinyMCE Previews */
     145div.wp-preview-wrap {
     146        display: inline;
     147}
  • wp-includes/js/mce-view.js

     
     1if ( typeof wp === 'undefined' )
     2        var wp = {};
     3
     4(function($){
     5        var views = {},
     6                instances = {};
     7
     8        wp.mce = {};
     9
     10        wp.mce.view = {
     11                // The default properties used for the objects in `wp.mce.view.add()`.
     12                defaults: {
     13                        view: Backbone.View,
     14                        text: function( instance ) {
     15                                return instance.options.original;
     16                        }
     17                },
     18
     19                // Registers a new TinyMCE view.
     20                //
     21                // Accepts a unique `id` and an `options` object.
     22                //
     23                // `options`
     24                // If `view` is an object, it will automatically be passed to
     25                // `wp.mce.View.extend( view, properties )` to create a new view class.
     26                //
     27                // If the `view` provided is already a constructor, the `properties`
     28                // variable is ignored.
     29                add: function( id, options ) {
     30                        var parent;
     31
     32                        // Fetch the parent view or the default options.
     33                        parent = options.extend ? wp.mce.view.get( options.extend ) : wp.mce.view.defaults;
     34
     35                        // Extend the `options` object with the parent's properties.
     36                        _.defaults( options, parent );
     37
     38                        // If the `view` provided was an object, automatically create
     39                        // a new `Backbone.View` constructor, using the parent's `view`
     40                        // constructor as a base.
     41                        if ( ! _.isFunction( options.view ) )
     42                                options.view = parent.view.extend( options.view );
     43
     44                        views[ id ] = options;
     45                },
     46
     47                // Returns a TinyMCE view options object.
     48                get: function( id ) {
     49                        return views[ id ];
     50                },
     51
     52                // Unregisters a TinyMCE view.
     53                remove: function( id ) {
     54                        delete views[ id ];
     55                },
     56
     57                // Scans a `content` string for each view's pattern, replacing any
     58                // matches with wrapper elements, and creates a new view instance for
     59                // every match.
     60                //
     61                // To render the views, call `wp.mce.view.render( scope )`.
     62                toViews: function( content ) {
     63                        _.each( views, function( view, viewType ) {
     64                                if ( ! view.pattern )
     65                                        return;
     66
     67                                // Scan for matches.
     68                                content = content.replace( view.pattern, function( match ) {
     69                                        var instance, id, tag;
     70
     71                                        // Create a new view instance.
     72                                        instance = new view.view({
     73                                                original: match,
     74                                                results:  _.toArray( arguments ),
     75                                                viewType: viewType
     76                                        });
     77
     78                                        // Use the view's `id` if it already exists. Otherwise,
     79                                        // create a new `id`.
     80                                        id = instance.el.id = instance.el.id || _.uniqueId('__wpmce-');
     81                                        instances[ id ] = instance;
     82
     83                                        // If the view is a span, wrap it in a span.
     84                                        tag = 'span' === instance.tagName ? 'span' : 'div';
     85
     86                                        return '<' + tag + ' class="wp-view-wrap" data-wp-view="' + id + '" contenteditable="false"></' + tag + '>';
     87                                });
     88                        });
     89
     90                        return content;
     91                },
     92
     93                // Renders any view instances inside a DOM node `scope`.
     94                //
     95                // View instances are detected by the presence of wrapper elements.
     96                // To generate wrapper elements, pass your content through
     97                // `wp.mce.view.toViews( content )`.
     98                render: function( scope ) {
     99                        $( '.wp-view-wrap', scope ).each( function() {
     100                                var wrapper = $(this),
     101                                        id = wrapper.data('wp-view'),
     102                                        view = instances[ id ];
     103
     104                                if ( ! view )
     105                                        return;
     106
     107                                // Render the view.
     108                                view.render();
     109                                // Detach the view element to ensure events are not unbound.
     110                                view.$el.detach();
     111
     112                                // Empty the wrapper, attach the view element to the wrapper,
     113                                // and add an ending marker to the wrapper to help regexes
     114                                // scan the HTML string.
     115                                wrapper.empty().append( view.el ).append('<span data-wp-view-end></span>');
     116                        });
     117                },
     118
     119                // Scans an HTML `content` string and replaces any view instances with
     120                // their respective text representations.
     121                toText: function( content ) {
     122                        return content.replace( /<(?:div|span)[^>]+data-wp-view="([^"]+)"[^>]*>.*?<span data-wp-view-end[^>]*><\/span><\/(?:div|span)>/g, function( match, id ) {
     123                                var instance = instances[ id ],
     124                                        view;
     125
     126                                if ( instance )
     127                                        view = wp.mce.view.get( instance.options.viewType );
     128
     129                                return instance && view ? view.text( instance ) : '';
     130                        });
     131                }
     132        };
     133
     134}(jQuery));
     135 No newline at end of file
  • wp-includes/script-loader.php

     
    322322                'selectMediaMultiple' => __( 'Select one or more media files:' ),
    323323        ) );
    324324
     325        $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'backbone', 'jquery' ), false, 1 );
     326
    325327        if ( is_admin() ) {
    326328                $scripts->add( 'ajaxcat', "/wp-admin/js/cat$suffix.js", array( 'wp-lists' ) );
    327329                $scripts->add_data( 'ajaxcat', 'group', 1 );
  • wp-includes/class-wp-editor.php

     
    167167                                self::$baseurl = includes_url('js/tinymce');
    168168                                self::$mce_locale = $mce_locale = ( '' == get_locale() ) ? 'en' : strtolower( substr(get_locale(), 0, 2) ); // only ISO 639-1
    169169                                $no_captions = (bool) apply_filters( 'disable_captions', '' );
    170                                 $plugins = array( 'inlinepopups', 'spellchecker', 'tabfocus', 'paste', 'media', 'fullscreen', 'wordpress', 'wpeditimage', 'wpgallery', 'wplink', 'wpdialogs' );
     170                                $plugins = array( 'inlinepopups', 'spellchecker', 'tabfocus', 'paste', 'media', 'fullscreen', 'wordpress', 'wpeditimage', 'wpgallery', 'wplink', 'wpdialogs', 'wpview' );
    171171                                $first_run = true;
    172172                                $ext_plugins = '';
    173173
    174174                                if ( $set['teeny'] ) {
    175                                         self::$plugins = $plugins = apply_filters( 'teeny_mce_plugins', array('inlinepopups', 'fullscreen', 'wordpress', 'wplink', 'wpdialogs'), $editor_id );
     175                                        self::$plugins = $plugins = apply_filters( 'teeny_mce_plugins', array('inlinepopups', 'fullscreen', 'wordpress', 'wplink', 'wpdialogs', 'wpview'), $editor_id );
    176176                                } else {
    177177                                        /*
    178178                                        The following filter takes an associative array of external plugins for TinyMCE in the form 'plugin_name' => 'url'.
  • wp-admin/edit-form-advanced.php

     
    2222        wp_enqueue_style( 'media-views' );
    2323        wp_plupload_default_settings();
    2424        add_action( 'admin_footer', 'wp_print_media_templates' );
     25
     26        wp_enqueue_script( 'mce-view' );
    2527}
    2628
    2729/**