-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathplugin.js
191 lines (136 loc) · 8.03 KB
/
plugin.js
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
/**
* Plugin to fix this issue in webkit browsers
* Bug description http://dev.ckeditor.com/ticket/9998
* It removes spans created by webkit browsers
* It preserves existing spans created by the user
* Logs information on the console when removing, merging etc.
*
* @author pr0nbaer
* @version 0.0.2
*/
(function() {
// register plugin
CKEDITOR.plugins.add('webkit-span-fix', {
// initialize plugin
init: function(editor) {
////////////////////////////////////////////////////////////////////////
// Webkit Span Bugfix //////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
// only for Webkit browsers
if (CKEDITOR.env.webkit) {
console.log('>>> Using Webkit Span Bugfix');
var getParentsToClosestBlockElement = function(node) {
var parentsToBlockElement = [];
var parents;
if (node instanceof CKEDITOR.dom.element || node instanceof CKEDITOR.dom.text) {
// get all parent nodes of the node (including the node itself)
parents = node.getParents(true);
// if parent nodes exist
if (parents !== null) {
// loop over parent nodes
for (var i = 0; i < parents.length; i++) {
parentsToBlockElement[i] = parents[i];
// if the current parent element has block display, then hold on to the previous parent element and break
if (i >= 1 && parents[i] instanceof CKEDITOR.dom.element && parents[i].getComputedStyle('display') == 'block') {
break;
}
}
}
}
return parentsToBlockElement;
};
var getNextNodeSiblingsOfSelection = function() {
// the return array
var siblings = [];
// get selection
var selection = editor.getSelection();
var nextNode;
var ranges;
var nextNodeParents;
var element;
// if selection exists
if (selection !== null) {
// get selection ranges
ranges = selection.getRanges();
// if ranges exist
if (ranges.length) {
nextNode = ranges[0].getNextNode();
// if node exists
if (nextNode !== null) {
nextNodeParents = getParentsToClosestBlockElement(nextNode);
// if element exists
if (nextNodeParents[nextNodeParents.length - 2] !== undefined) {
element = nextNodeParents[nextNodeParents.length - 2];
// hold on to the element and all of its siblings
do {
siblings.push(element);
element = element.getNext();
} while (element !== null);
}
}
}
}
var redoSelection = function() {
if (selection !== null && ranges !== null && ranges.length) {
selection.selectRanges(ranges);
}
};
return {
'siblings': siblings,
'redoSelection': redoSelection,
'nextNode': nextNode
};
};
// if editor is in edit-mode
editor.on('contentDom', function() {
// if keydown event was triggered
editor.document.on('keydown', function(event) {
var nextNodeSiblingsOnKeyDown = getNextNodeSiblingsOfSelection();
// bind keyDown event on keyUp once
// => will be called after Chrome sets SPAN elements! ;)
editor.document.once('keyup', function(event) {
var nextNodeSiblingsOnKeyUp = getNextNodeSiblingsOfSelection();
var blockElementsMerged = false;
if (nextNodeSiblingsOnKeyDown.nextNode !== null && nextNodeSiblingsOnKeyUp.nextNode !== null) {
var nextNodeOnKeyDownParents = getParentsToClosestBlockElement(nextNodeSiblingsOnKeyDown.nextNode);
var nextNodeOnKeyUpParents = getParentsToClosestBlockElement(nextNodeSiblingsOnKeyUp.nextNode);
if (nextNodeOnKeyDownParents[nextNodeOnKeyDownParents.length - 1].getAddress().join('|') != nextNodeOnKeyUpParents[nextNodeOnKeyUpParents.length - 1].getAddress().join('|')) {
blockElementsMerged = true;
}
}
if (blockElementsMerged) {
console.log('>>> Detected merge of block elements');
for (var i = 0; i < nextNodeSiblingsOnKeyDown.siblings.length; i++) {
if (nextNodeSiblingsOnKeyUp.siblings[i] === undefined) break;
nodeBeforeKey = nextNodeSiblingsOnKeyDown.siblings[i];
nodeAfterKey = nextNodeSiblingsOnKeyUp.siblings[i];
// convert text node to SPAN element
if (nodeBeforeKey instanceof CKEDITOR.dom.text && nodeAfterKey instanceof CKEDITOR.dom.element && nodeAfterKey.getName() == 'span') {
console.log('>>> Remove Webkit Span', nodeAfterKey.getOuterHtml());
nodeAfterKey.remove(true);
// modify style attribute of inline element
} else if (nodeBeforeKey instanceof CKEDITOR.dom.element
&& nodeAfterKey instanceof CKEDITOR.dom.element
&& nodeAfterKey.getComputedStyle('display').match(/^inline/)
&& nodeAfterKey instanceof CKEDITOR.dom.element
&& nodeAfterKey.getName() == nodeBeforeKey.getName()
&& nodeAfterKey.getAttribute('style') != nodeBeforeKey.getAttribute('style')) {
if ( nodeBeforeKey.getAttribute('style') != null ) {
console.log('>>> Update Webkit Span Style Attribute', nodeAfterKey.getOuterHtml(), 'to', nodeBeforeKey.getAttribute('style'));
nodeAfterKey.setAttribute('style', nodeBeforeKey.getAttribute('style'));
} else {
console.log('>>> Remove Webkit Span Style Attribute', nodeAfterKey.getOuterHtml());
nodeAfterKey.removeAttribute('style');
}
}
// Bugfix => restore selection
nextNodeSiblingsOnKeyUp.redoSelection();
}
}
});
});
});
}
}
});
})();