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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<style>
.options {
line-height: 24px;
}
.options label {
display: block;
}
.options input {
margin-right: 8px;
}
</style>
<div class="options"><p>
Allowed content:
</p></div>
<textarea id="editor1">
<table>
<tbody>
<tr>
<td>This is cell</td>
</tr>
</tbody>
</table>
</textarea>
<script>
var cellPropMap = {
'Width': 'width',
'Height': 'height',
'Word Wrap': 'white-space',
'Horizontal Align': 'text-align',
'Vertical Align': 'vertical-align',
'Cell Type': 'th',
'Rows Span': 'rowspan',
'Cols Span': 'colspan',
'Background Color': 'background-color',
'Border Color': 'border-color',
'Color Dialog': 'colordialog'
},
options = CKEDITOR.document.findOne( '.options' ),
allowedContent = {
p: true,
div: true,
table: true,
thead: true,
tbody: true,
tr: true,
td: {
styles: [],
attributes: []
}
},
// 'change' event doesn't work in IE8.
eventName = CKEDITOR.env.ie && CKEDITOR.env.version === 8 ? 'click' : 'change',
editor;
for ( var key in cellPropMap ) {
var name = cellPropMap[ key ],
additionalInfo = name === 'colordialog' ? '<br> Adds button for picking color next to border and background color options.' : '';
if ( key === 'Color Dialog' ) {
options.appendHtml(
'<p>Extra plugins:</p>'
);
}
options.appendHtml(
'<label><input type="checkbox" name="' + name + '">' + key + additionalInfo + '</label>'
);
}
editor = createEditor();
options.on( eventName, inputListener );
function createEditor() {
var config = {
allowedContent: allowedContent,
plugins: 'wysiwygarea,toolbar,table,tabletools,sourcearea',
extraPlugins: []
};
if ( CKEDITOR.document.findOne( 'input[name="colordialog"]' ).$.checked ) {
config.extraPlugins.push( 'colordialog' );
}
return CKEDITOR.replace( 'editor1', config );
}
function inputListener( e ) {
var target = e.data.getTarget(),
state = target.$.checked,
rule = target.getAttribute( 'name' ),
attributes = allowedContent.td.attributes,
styles = allowedContent.td.styles;
if ( !rule ) {
return;
}
switch ( rule ) {
case 'th':
if ( state ) {
allowedContent.th = true;
} else {
delete allowedContent.th;
}
case 'rowspan':
case 'colspan':
addRemoveRule( rule, state, attributes );
break;
default:
addRemoveRule( rule, state, styles );
}
editor.once( 'destroy', function() {
setTimeout( function() {
editor = createEditor();
// Calling destroy on editor removes listener.
options.on( eventName, inputListener );
} );
} );
// We need to recreate editor, because filter is caching checks.
editor.destroy();
}
function addRemoveRule( rule, state, arr ) {
var index = CKEDITOR.tools.array.indexOf( arr, rule );
if ( state && index === -1 ) {
arr.push( rule );
} else if ( !state && index >= 0 ) {
arr.splice( index, 1 );
}
}
</script>
|
