Support » Plugin: Advanced Editor Tools (previously TinyMCE Advanced) » The “Reset table size” option is buggy

  • Consider this table:

    <table width="500" style="width: 100%;">
    <thead width="500" style="width: 100%;">
    <tr width="500" style="width: 100%;">
    <th width="500" style="width: 50%;">Heading</th>
    <th width="500" style="width: 50%;">Heading</th>
    </tr>
    </thead>
    <tbody width="500" style="width: 100%;">
    <tr width="500" style="width: 100%;">
    <td width="500" style="width: 100%;">Content</td>
    <td width="500" style="width: 100%;">Content</td>
    </tr>
    </tbody>
    <tfoot width="500" style="width: 100%;">
    <tr width="500" style="width: 100%;">
    <th width="500" style="width: 50%;">Footer Heading</th>
    <th width="500" style="width: 50%;">Footer Heading</th>
    </tr>
    </tfoot>
    </table>

    When I use the “Reset table size” option, I would expect it to produce this:

    <table>
    <thead>
    <tr>
    <th>Heading</th>
    <th>Heading</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Content</td>
    <td>Content</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <th>Footer Heading</th>
    <th>Footer Heading</th>
    </tr>
    </tfoot>
    </table>

    But instead it produces this:

    <table width="500">
    <thead style="width: 100%;">
    <tr>
    <th style="width: 50%;" width="500">Heading</th>
    <th style="width: 50%;" width="500">Heading</th>
    </tr>
    </thead>
    <tbody style="width: 100%;">
    <tr>
    <td width="500">Content</td>
    <td width="500">Content</td>
    </tr>
    </tbody>
    <tfoot style="width: 100%;">
    <tr>
    <th style="width: 50%;" width="500">Footer Heading</th>
    <th style="width: 50%;" width="500">Footer Heading</th>
    </tr>
    </tfoot>
    </table>

    It appears that there are two bugs here:

    • The feature only removes the width style, not the width attribute. This is problematic because, when pasting a table from Microsoft Word, it will sometimes copy over a width attribute. Since the width attribute is deprecated anyway, it would be a good idea for the plugin to get rid of it just like the width style.
    • The feature only targets table, tr, and td elements. It doesn’t target thead, tfoot, or th elements. It would be best if the feature removed the width style and width attribute from those elements as well.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter pikamander2

    (@pikamander2)

    The relevant code is located in \tinymce-advanced\mce\wptadv\plugin.js and its minified version.

    Here’s some fixed code that targets all the table elements and removes a few more styles/attributes that you would expect it to:

    editor.addCommand( 'tmaRemoveTableStyles', function() {
    	var node = editor.selection.getStart();
    	var table = editor.dom.getParents( node, 'table' );
    
    	if ( table ) {
    		editor.$( table ).attr({
    			style: null,
    			width: null,
    			height: null,
    			minWidth: null,
    			maxWidth: null,
    			minHeight: null,
    			maxHeight: null,
    			border: null,
    			cellspacing: null,
    			cellpadding: null
    		}).find( 'tr, thead, tbody, tfoot, td, th' ).each( function( i, element ) {
    			editor.$( element ).attr({
    				style: null,
    				width: null,
    				height: null,
    				minWidth: null,
    				maxWidth: null,
    				minHeight: null,
    				maxHeight: null,
    				border: null,
    				cellspacing: null,
    				cellpadding: null
    			});
    		} );
    	}
    } );
    
    editor.addCommand( 'tmaResetTableSize', function() {
    	var node = editor.selection.getStart();
    	var table = editor.dom.getParents( node, 'table' );
    
    	if ( table ) {
    		removeInlineSizes( table );
    
    		editor.$( table ).find( 'tr, thead, tbody, tfoot, td, th' ).each( function( i, element ) {
    			removeInlineSizes( element );
    		} );
    	}
    } );
    
    function removeInlineSizes( node ) {
    	var element = editor.$( node );
    
    	element.attr({
    		width: null,
    		height: null,
    		minWidth: null,
    		maxWidth: null,
    		minHeight: null,
    		maxHeight: null,
    	});
    
    	element.css({ width: null, height: null });
    
    	if ( ! element.attr( 'style' ) ) {
    		element.attr({ style: null });
    	}
    }

    I’ve tested it and everything seems to work as expected now. Would it be possible to merge that into the plugin’s code?

    Plugin Author Andrew Ozz

    (@azaozz)

    Yeah, this targets/resets only the sizes/attributes that are added by the editor. Probably a good idea to extend it to do a “full cleanup” of the <table> HTML, removing deprecated attributes and things that were not added by TinyMCE but may have been pasted.

    Will try to fix for the next version 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘The “Reset table size” option is buggy’ is closed to new replies.