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
|
<p>Amount of copied/cut widgets: <span id="counter-clipboard">0</span></p>
<p>Amount of selected widgets: <span id="counter-selection">0</span></p>
<p><button id="reset">Reset counters</button></p>
<div id="editor">
<p>Adipisicing corporis rem repellendus vel mollitia vero?</p>
<div data-widget="customwidget">Widget</div>
<p>Consectetur dolores voluptatibus illo ipsam eveniet?</p>
<div data-widget="customwidget">Widget</div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<script>
CKEDITOR.replace( 'editor', {
extraPlugins: 'customwidget',
allowedContent: true,
on: {
pluginsLoaded: function( evt ) {
var editor = evt.editor;
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'cut', updateCounter( 'clipboard' ) );
editable.attachListener( editable, 'copy', updateCounter( 'clipboard' ) );
} );
editor.widgets.on( 'checkSelection', updateCounter( 'selection' ) );
CKEDITOR.document.getById( 'reset' ).on( 'click', function() {
CKEDITOR.document.getById( 'counter-selection' ).setText( 0 );
CKEDITOR.document.getById( 'counter-clipboard' ).setText( 0 );
} );
function updateCounter( id ) {
return function() {
CKEDITOR.document.getById( 'counter-' + id ).setText( editor.widgets.selected.length );
};
}
}
}
} );
CKEDITOR.plugins.add( 'customwidget', {
requires: 'widget',
allowedContent: 'div(copied)',
init: function ( editor ) {
editor.widgets.add( 'customwidget', {
button: 'Add widget',
template: '<div>Widget</div>'
} );
}
} );
</script>
|
