WordPress.org

Make WordPress Core

Changeset 7687


Ignore:
Timestamp:
04/15/08 16:03:24 (7 years ago)
Author:
ryan
Message:

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

Location:
trunk/wp-includes/js/tinymce
Files:
3 edited

Legend:

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

    r7489 r7687  
    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            }); 
  • trunk/wp-includes/js/tinymce/themes/advanced/js/image.js

    r7270 r7687  
    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) { 
  • trunk/wp-includes/js/tinymce/wordpress.css

    r7556 r7687  
    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.