WordPress.org

Make WordPress Core

Changeset 7686


Ignore:
Timestamp:
04/15/2008 04:02:26 PM (10 years ago)
Author:
ryan
Message:

Add or remove class=aligncenter when aligning images in TinyMCE. Props azaozz. fixes #6645 for 2.5

Location:
branches/2.5/wp-includes/js/tinymce
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • branches/2.5/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js

    r7489 r7686  
    1212        init : function(ed, url) {
    1313            var t = this, tbId = ed.getParam('wordpress_adv_toolbar', 'toolbar2');
    14             var moreHTML = '<img src="' + url + '/img/trans.gif" class="mceWPmore mceItemNoResize" title="'+ed.getLang('wordpress.wp_more_alt')+'" />';
    15             var nextpageHTML = '<img src="' + url + '/img/trans.gif" class="mceWPnextpage mceItemNoResize" title="'+ed.getLang('wordpress.wp_page_alt')+'" />';
     14            var moreHTML = '<img src="' + url + '/img/trans.gif" class="mceWPmore mceItemNoResize" title="'+ed.getLang('wordpress.wp_more_alt')+'" />';
     15            var nextpageHTML = '<img src="' + url + '/img/trans.gif" class="mceWPnextpage mceItemNoResize" title="'+ed.getLang('wordpress.wp_page_alt')+'" />';
    1616
    1717            if ( tinymce.util.Cookie.get('kitchenSink') == '1' )
     
    4343                    });
    4444                });
    45            
     45
    4646            ed.addCommand('WP_Adv', function() {
    4747                var id = ed.controlManager.get(tbId).id, cm = ed.controlManager, cook = tinymce.util.Cookie, date;
    4848
    4949                date = new Date();
    50                 date.setTime(date.getTime()+(10*365*24*60*60*1000));
    51                
     50                date.setTime(date.getTime()+(10*365*24*60*60*1000));
     51
    5252                if (DOM.isHidden(id)) {
    5353                    cm.setActive('wp_adv', 1);
     
    9090            });
    9191
    92             // Add class "alignleft" or "alignright" when selecting align for images.
     92            // Add class "alignleft", "alignright" and "aligncenter" when selecting align for images.
     93            ed.onExecCommand.add(function( editor, cmd ) {
     94                var node, bl, dom = editor.dom;
     95
     96                if ( 'JustifyCenter' == cmd ) {
     97                    if ( ( node = editor.selection.getNode() ) && node.nodeName == 'IMG' ) {
     98                        if ( ! dom.hasClass( node, "aligncenter" ) && ( bl = editor.forceBlocks.getParentBlock(node) ) && bl.childNodes.length == 1 )
     99                            dom.setStyle(bl, 'text-align', '');
     100                    }
     101                    editor.execCommand('mceRepaint');
     102                }
     103            });
     104
    93105            ed.onBeforeExecCommand.add(function( editor, cmd ) {
    94                 var node, dir, xdir;
    95    
     106                var node, dir, xdir, bl, dom = editor.dom;
     107
    96108                if ( ( cmd.indexOf('Justify') != -1 ) && ( node = editor.selection.getNode() ) ) {
    97                     if ( node.nodeName !== 'IMG' ) return;
     109                    if ( 'JustifyFull' == cmd || node.nodeName !== 'IMG' ) return;
    98110                    dir = cmd.substring(7).toLowerCase();
    99                     if ( 'JustifyCenter' == cmd || editor.queryCommandState( cmd ) ) {
    100                         editor.dom.removeClass( node, "alignleft" );
    101                         editor.dom.removeClass( node, "alignright" );
     111
     112                    if (  editor.queryCommandState( cmd ) ) {
     113                        dom.removeClass( node, "alignleft" );
     114                        dom.removeClass( node, "alignright" );
     115                        dom.removeClass( node, "aligncenter" );
     116                    } else if ( 'JustifyCenter' == cmd ) {
     117                        dom.removeClass( node, "alignleft" );
     118                        dom.removeClass( node, "alignright" );
     119
     120                        if ( dom.hasClass( node, "aligncenter" ) ) {
     121                            dom.removeClass( node, "aligncenter" );
     122                            if ( ( bl = editor.forceBlocks.getParentBlock(node) ) && bl.childNodes.length == 1 && tinymce.isGecko )
     123                                editor.selection.select(bl.firstChild);
     124                        } else dom.addClass( node, "aligncenter" );
     125
    102126                    } else {
    103127                        xdir = ( dir == 'left' ) ? 'right' : 'left';
    104                         editor.dom.removeClass( node, "align"+xdir );
    105                         editor.dom.addClass( node, "align"+dir );
     128                        dom.removeClass( node, "aligncenter" );
     129                        dom.removeClass( node, "align"+xdir );
     130                        dom.addClass( node, "align"+dir );
    106131                    }
    107132                }
    108133            });
    109            
     134
    110135            // Add listeners to handle more break
    111136            t._handleMoreBreak(ed, url);
    112            
     137
    113138            // Add custom shortcuts
    114139            ed.addShortcut('alt+shift+c', ed.getLang('justifycenter_desc'), 'JustifyCenter');
     
    158183        _handleMoreBreak : function(ed, url) {
    159184            var moreHTML = '<img src="' + url + '/img/trans.gif" alt="$1" class="mceWPmore mceItemNoResize" title="'+ed.getLang('wordpress.wp_more_alt')+'" />';
    160             var nextpageHTML = '<img src="' + url + '/img/trans.gif" class="mceWPnextpage mceItemNoResize" title="'+ed.getLang('wordpress.wp_page_alt')+'" />';
     185            var nextpageHTML = '<img src="' + url + '/img/trans.gif" class="mceWPnextpage mceItemNoResize" title="'+ed.getLang('wordpress.wp_page_alt')+'" />';
    161186
    162187            // Load plugin specific CSS into editor
     
    170195                    ed.theme.onResolveName.add(function(th, o) {
    171196                        if (o.node.nodeName == 'IMG') {
    172                             if ( ed.dom.hasClass(o.node, 'mceWPmore') )
    173                                 o.name = 'wpmore';
    174                             if ( ed.dom.hasClass(o.node, 'mceWPnextpage') )
    175                                 o.name = 'wppage';
    176                         }
    177                            
     197                            if ( ed.dom.hasClass(o.node, 'mceWPmore') )
     198                                o.name = 'wpmore';
     199                            if ( ed.dom.hasClass(o.node, 'mceWPnextpage') )
     200                                o.name = 'wppage';
     201                        }
     202
    178203                    });
    179204                }
     
    191216                    o.content = o.content.replace(/<img[^>]+>/g, function(im) {
    192217                        if (im.indexOf('class="mceWPmore') !== -1) {
    193                             var m;
    194                             var moretext = (m = im.match(/alt="(.*?)"/)) ? m[1] : '';
    195 
    196                             im = '<!--more'+moretext+'-->';
    197                         }
    198                         if (im.indexOf('class="mceWPnextpage') !== -1)
     218                            var m, moretext = (m = im.match(/alt="(.*?)"/)) ? m[1] : '';
     219                            im = '<!--more'+moretext+'-->';
     220                        }
     221                        if (im.indexOf('class="mceWPnextpage') !== -1)
    199222                            im = '<!--nextpage-->';
    200                        
    201                         return im;
     223
     224                        return im;
    202225                    });
    203226            });
  • branches/2.5/wp-includes/js/tinymce/themes/advanced/js/image.js

    r7270 r7686  
    109109            v = getSelectValue(f, 'align');
    110110            cls = f.class_name.value || '';
    111             cls = cls ? cls.replace(/alignright\s*|alignleft\s*/g, '') : '';
     111            cls = cls ? cls.replace(/alignright\s*|alignleft\s*|aligncenter\s*/g, '') : '';
    112112            cls = cls ? cls.replace(/^\s*(.+?)\s*$/, '$1') : '';
    113113            if (v) {
  • branches/2.5/wp-includes/js/tinymce/wordpress.css

    r7556 r7686  
    11/* This file contains the CSS data for the editable area(iframe) of TinyMCE */
     2
     3.aligncenter {
     4    display: block;
     5    margin-left: auto;
     6    margin-right: auto;
     7}
     8
     9.alignleft {
     10    float: left;
     11}
     12
     13.alignright {
     14    float: right;
     15}
    216
    317body.mceContentBody {
Note: See TracChangeset for help on using the changeset viewer.