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
|
CKEDITOR.plugins.add('accordionList', {
requires: 'widget,collapsibleItem',
icons: 'accordionlist',
hidpi: true,
init: function(editor) {
editor.widgets.add('accordionList', {
button: 'Insert a new Accordion List',
template: '<div class="accordion-list">' +
' <div class="panel-group accordion-list-group accordion-list-items" id="unknown" role="tablist" aria-multiselectable="true"></div>' +
'</div>',
editables: {
content: {
selector: 'div.accordion-list-items',
allowedContent: 'div(!collapsible-item*,panel*,collapse)[*];h4(!collapsible-item*,panel*)[*];a(!collapsible-item*,panel*,collapsed,pull-right*)[*];p;br;ul;ol;li;strong;em;u;table[*];tbody;theader;tr;td;th;hr;a;a(*)[*];span(*)[*];img(*)[*]'
}
},
allowedContent: 'div(!accordion-list*)[*];',
requiredContent: 'div(accordion-list)',
upcast: function(element) {
return element.name == 'div' && element.hasClass('accordion-list');
},
init: function() {
var idPrefix = 'accordion';
this.setData('accordionId', idPrefix + (new Date()).getTime());
var editable = this.editables.content;
var editorForElement = editable.editor;
editable.enterMode = 2;
editorForElement.setActiveEnterMode(CKEDITOR.ENTER_BR, CKEDITOR.ENTER_BR);
//prevent entering any data via keyboard, since we only want nested widgets in here
editable.on('keydown', function(event) {
console.log("down", event);
if (event.data.$.target.id.indexOf(idPrefix) == 0) {
event.data.$.preventDefault();
event.data.$.stopPropagation();
}
});
},
data: function() {
//called whenever the data is updated
var accordionElement = this.element.find('.accordion-list-items').$[0];
if (accordionElement.getAttribute('id') == 'unknown') {
accordionElement.setAttribute('id', this.data.accordionId);
}
},
});
},
onLoad: function() {
CKEDITOR.addCss(
'.accordion-list::before {font-size:10px;color:#000;content: "Bootstrap Accordion"} ' +
'.accordion-list {padding: 8px;background: #eee;border-radius: 8px;border: 1px solid #ddd;box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;}' +
'.accordion-list-items {padding: 0 8px;box-shadow: 0 1px 1px #ddd inset;border: 1px solid #cccccc;border-radius: 5px;background: #fff;}' +
'.accordion-list-items::before {font-size:14px;color:#ccc;content: "Insert collapsible items here"; position:relative;} '
);
}
});
|
