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
|
<p><code>[aria-pressed]</code> value: <span id="aria-pressed-value">editor is loading…</span></p>
<div id="editor">
<p>Whatever</p>
</div>
<script>
( function() {
CKEDITOR.replace( 'editor', {
toolbar: [ [ 'toggleButton' ] ],
on: {
pluginsLoaded: function( evt ) {
evt.editor.addCommand( 'toggleButton', {
exec: function() {
if ( this.state === CKEDITOR.TRISTATE_OFF ) {
this.setState( CKEDITOR.TRISTATE_ON );
} else {
this.setState( CKEDITOR.TRISTATE_OFF );
}
renderButtonState();
}
} );
evt.editor.ui.addButton( 'toggleButton', {
label: 'Toggle button',
icon: 'Link',
isToggle: true,
command: 'toggleButton'
} );
},
instanceReady: renderButtonState
}
} );
function renderButtonState() {
var button = CKEDITOR.document.findOne( '.cke_button__togglebutton' ),
stateIndicator = CKEDITOR.document.getById( 'aria-pressed-value' ),
currentState = button.getAttribute( 'aria-pressed' )
stateIndicator.setHtml( currentState );
}
} )();
</script>
|
