Skip to content

Instantly share code, notes, and snippets.

@bhdzllr
Created May 23, 2019 05:29
Show Gist options
  • Save bhdzllr/995d71c2ee725f1cc0565d8f4dabe6c9 to your computer and use it in GitHub Desktop.
Save bhdzllr/995d71c2ee725f1cc0565d8f4dabe6c9 to your computer and use it in GitHub Desktop.
CKEditor 4 table header scope Quickfix
CKEDITOR.editorConfig = function ( config ) {
config.extraPlugins = 'tableScopeFix';
};
CKEDITOR.plugins.add('tableScopeFix', {
init: function (editor) {
CKEDITOR.on( 'dialogDefinition', function (e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
var makeElement = function( name ) {
return new CKEDITOR.dom.element( name, editor.document );
};
if (dialogName == 'table' || dialogName == 'tableProperties') {
dialogDefinition.onOk = function () {
var selection = editor.getSelection(),
bms = this._.selectedElement && selection.createBookmarks();
var table = this._.selectedElement || makeElement( 'table' ),
data = {};
this.commitContent( data, table );
if ( data.info ) {
var info = data.info;
// Generate the rows and cols.
if ( !this._.selectedElement ) {
var tbody = table.append( makeElement( 'tbody' ) ),
rows = parseInt( info.txtRows, 10 ) || 0,
cols = parseInt( info.txtCols, 10 ) || 0;
for ( var i = 0; i < rows; i++ ) {
var row = tbody.append( makeElement( 'tr' ) );
for ( var j = 0; j < cols; j++ ) {
var cell = row.append( makeElement( 'td' ) );
cell.appendBogus();
}
}
}
// Modify the table headers. Depends on having rows and cols generated
// correctly so it can't be done in commit functions.
// Should we make a <thead>?
var headers = info.selHeaders;
if ( !table.$.tHead && ( headers == 'row' || headers == 'both' ) ) {
var thead = table.getElementsByTag( 'thead' ).getItem( 0 );
tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );
var theRow = tbody.getElementsByTag( 'tr' ).getItem( 0 );
if ( !thead ) {
thead = new CKEDITOR.dom.element( 'thead' );
thead.insertBefore( tbody );
}
// Change TD to TH:
for ( i = 0; i < theRow.getChildCount(); i++ ) {
var th = theRow.getChild( i );
// Skip bookmark nodes. (https://dev.ckeditor.com/ticket/6155)
if ( th.type == CKEDITOR.NODE_ELEMENT && !th.data( 'cke-bookmark' ) ) {
th.renameNode( 'th' );
th.setAttribute( 'scope', 'col' );
}
}
thead.append( theRow.remove() );
}
if ( table.$.tHead !== null && !( headers == 'row' || headers == 'both' ) ) {
// Move the row out of the THead and put it in the TBody:
thead = new CKEDITOR.dom.element( table.$.tHead );
tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );
while ( thead.getChildCount() > 0 ) {
theRow = thead.getFirst();
for ( i = 0; i < theRow.getChildCount(); i++ ) {
var newCell = theRow.getChild( i );
// Modified by bhdzllr
if ( newCell.type == CKEDITOR.NODE_ELEMENT && ( !headers || i > 0 ) ) {
// Headers are removed
// or set to first column and is not the first table row
newCell.renameNode( 'td' );
newCell.removeAttribute( 'scope' );
} else {
// Headers set to first column and first table row
newCell.setAttribute( 'scope', 'row' );
}
}
// Append the row to the start (#1397).
tbody.append( theRow, true );
}
thead.remove();
}
// Should we make all first cells in a row TH?
if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) ) {
for ( row = 0; row < table.$.rows.length; row++ ) {
newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ 0 ] );
newCell.renameNode( 'th' );
// Modified by bhdzllr
if ( headers == 'both' && row == 0 ) {
// Headears on columns and rows and not first table row
newCell.setAttribute( 'scope', 'col' );
} else {
newCell.setAttribute( 'scope', 'row' );
}
}
}
// Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)
if ( ( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' ) ) {
for ( i = 0; i < table.$.rows.length; i++ ) {
row = new CKEDITOR.dom.element( table.$.rows[ i ] );
if ( row.getParent().getName() == 'tbody' ) {
newCell = new CKEDITOR.dom.element( row.$.cells[ 0 ] );
newCell.renameNode( 'td' );
newCell.removeAttribute( 'scope' );
}
}
}
// Set the width and height.
info.txtHeight ? table.setStyle( 'height', info.txtHeight ) : table.removeStyle( 'height' );
info.txtWidth ? table.setStyle( 'width', info.txtWidth ) : table.removeStyle( 'width' );
if ( !table.getAttribute( 'style' ) )
table.removeAttribute( 'style' );
}
// Insert the table element if we're creating one.
if ( !this._.selectedElement ) {
editor.insertElement( table );
// Override the default cursor position after insertElement to place
// cursor inside the first cell (https://dev.ckeditor.com/ticket/7959), IE needs a while.
setTimeout( function() {
var firstCell = new CKEDITOR.dom.element( table.$.rows[ 0 ].cells[ 0 ] );
var range = editor.createRange();
if (!range) range = new CKEDITOR.dom.range( editor.document );
range.moveToPosition( firstCell, CKEDITOR.POSITION_AFTER_START );
range.select();
}, 0 );
}
// Properly restore the selection, (https://dev.ckeditor.com/ticket/4822) but don't break
// because of this, e.g. updated table caption.
else {
try {
selection.selectBookmarks( bms );
} catch ( er ) {
}
}
}
}
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment