Created
May 23, 2019 05:29
-
-
Save bhdzllr/995d71c2ee725f1cc0565d8f4dabe6c9 to your computer and use it in GitHub Desktop.
CKEditor 4 table header scope Quickfix
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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