1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<style>
table {
margin-top: 20px;
}
td, th {
padding: 10px;
text-align: center;
}
tbody th {
font-weight: normal;
}
</style>
<div id="editor">
<p>Whatever</p>
</div>
<div id="table"></div>
<script>
( function() {
CKEDITOR.replace( 'editor', {
language: 'en',
plugins: [
'toolbar',
'wysiwygarea',
'basicstyles',
'bidi',
'blockquote',
'copyformatting',
'justify',
'list',
'sourcearea'
],
removeButtons: 'Indent,Outdent',
on: {
instanceReady: function( evt ) {
var editor = evt.editor;
editor.on( 'afterCommandExec', renderButtonStates );
editor.on( 'selectionChange', renderButtonStates );
editor.on( 'mode', renderButtonStates );
CKEDITOR.document.findOne( '.cke_top' ).on( 'mouseup', renderButtonStates );
renderButtonStates();
}
}
} );
function renderButtonStates() {
var buttons = CKEDITOR.document.find( '.cke_toolbar .cke_button' ).toArray(),
tableContainer = CKEDITOR.document.getById( 'table' ),
// Create the entire table in JS (#5200).
tableHtml = '<table border="1">' +
'<thead>' +
'<tr>' +
'<th scope="col">Button</th>' +
'<th scope="col"><code>[aria-pressed]</code> value</th>' +
'</tr>' +
'</thead>' +
'<tbody>{states}</tbody>' +
'</table>',
statesHtml = CKEDITOR.tools.array.map( buttons, function( button ) {
var currentState = button.getAttribute( 'aria-pressed' ),
buttonLabel = button.findOne( '.cke_button_label' ).getHtml();
return '<tr><th scope="row">' + buttonLabel + '</th><td>' + currentState + '</td></tr>';
} ).join( '' );
tableHtml = tableHtml.replace( '{states}', statesHtml );
tableContainer.setHtml( tableHtml );
}
} )();
</script>
|
