2 * editor_plugin_src.js
\r
4 * Copyright 2009, Moxiecode Systems AB
\r
5 * Released under LGPL License.
\r
7 * License: http://tinymce.moxiecode.com/license
\r
8 * Contributing: http://tinymce.moxiecode.com/contributing
\r
12 var TreeWalker = tinymce.dom.TreeWalker;
\r
13 var externalName = 'contenteditable', internalName = 'data-mce-' + externalName;
\r
14 var VK = tinymce.VK;
\r
16 function handleContentEditableSelection(ed) {
\r
17 var dom = ed.dom, selection = ed.selection, invisibleChar, caretContainerId = 'mce_noneditablecaret';
\r
19 // Setup invisible character use zero width space on Gecko since it doesn't change the height of the container
\r
20 invisibleChar = tinymce.isGecko ? '\u200B' : '\uFEFF';
\r
22 // Returns the content editable state of a node "true/false" or null
\r
23 function getContentEditable(node) {
\r
24 var contentEditable;
\r
26 // Ignore non elements
\r
27 if (node.nodeType === 1) {
\r
28 // Check for fake content editable
\r
29 contentEditable = node.getAttribute(internalName);
\r
30 if (contentEditable && contentEditable !== "inherit") {
\r
31 return contentEditable;
\r
34 // Check for real content editable
\r
35 contentEditable = node.contentEditable;
\r
36 if (contentEditable !== "inherit") {
\r
37 return contentEditable;
\r
44 // Returns the noneditable parent or null if there is a editable before it or if it wasn't found
\r
45 function getNonEditableParent(node) {
\r
49 state = getContentEditable(node);
\r
51 return state === "false" ? node : null;
\r
54 node = node.parentNode;
\r
58 // Get caret container parent for the specified node
\r
59 function getParentCaretContainer(node) {
\r
61 if (node.id === caretContainerId) {
\r
65 node = node.parentNode;
\r
69 // Finds the first text node in the specified node
\r
70 function findFirstTextNode(node) {
\r
74 walker = new TreeWalker(node, node);
\r
76 for (node = walker.current(); node; node = walker.next()) {
\r
77 if (node.nodeType === 3) {
\r
84 // Insert caret container before/after target or expand selection to include block
\r
85 function insertCaretContainerOrExpandToBlock(target, before) {
\r
86 var caretContainer, rng;
\r
89 if (getContentEditable(target) === "false") {
\r
90 if (dom.isBlock(target)) {
\r
91 selection.select(target);
\r
96 rng = dom.createRng();
\r
98 if (getContentEditable(target) === "true") {
\r
99 if (!target.firstChild) {
\r
100 target.appendChild(ed.getDoc().createTextNode('\u00a0'));
\r
103 target = target.firstChild;
\r
107 //caretContainer = dom.create('span', {id: caretContainerId, 'data-mce-bogus': true, style:'border: 1px solid red'}, invisibleChar);
\r
108 caretContainer = dom.create('span', {id: caretContainerId, 'data-mce-bogus': true}, invisibleChar);
\r
111 target.parentNode.insertBefore(caretContainer, target);
\r
113 dom.insertAfter(caretContainer, target);
\r
116 rng.setStart(caretContainer.firstChild, 1);
\r
117 rng.collapse(true);
\r
118 selection.setRng(rng);
\r
120 return caretContainer;
\r
123 // Removes any caret container except the one we might be in
\r
124 function removeCaretContainer(caretContainer) {
\r
125 var child, currentCaretContainer, lastContainer;
\r
127 if (caretContainer) {
\r
128 rng = selection.getRng(true);
\r
129 rng.setStartBefore(caretContainer);
\r
130 rng.setEndBefore(caretContainer);
\r
132 child = findFirstTextNode(caretContainer);
\r
133 if (child && child.nodeValue.charAt(0) == invisibleChar) {
\r
134 child = child.deleteData(0, 1);
\r
137 dom.remove(caretContainer, true);
\r
139 selection.setRng(rng);
\r
141 currentCaretContainer = getParentCaretContainer(selection.getStart());
\r
142 while ((caretContainer = dom.get(caretContainerId)) && caretContainer !== lastContainer) {
\r
143 if (currentCaretContainer !== caretContainer) {
\r
144 child = findFirstTextNode(caretContainer);
\r
145 if (child && child.nodeValue.charAt(0) == invisibleChar) {
\r
146 child = child.deleteData(0, 1);
\r
149 dom.remove(caretContainer, true);
\r
152 lastContainer = caretContainer;
\r
157 // Modifies the selection to include contentEditable false elements or insert caret containers
\r
158 function moveSelection() {
\r
159 var nonEditableStart, nonEditableEnd, isCollapsed, rng, element;
\r
161 // Checks if there is any contents to the left/right side of caret returns the noneditable element or any editable element if it finds one inside
\r
162 function hasSideContent(element, left) {
\r
163 var container, offset, walker, node, len;
\r
165 container = rng.startContainer;
\r
166 offset = rng.startOffset;
\r
168 // If endpoint is in middle of text node then expand to beginning/end of element
\r
169 if (container.nodeType == 3) {
\r
170 len = container.nodeValue.length;
\r
171 if ((offset > 0 && offset < len) || (left ? offset == len : offset == 0)) {
\r
175 // Can we resolve the node by index
\r
176 if (offset < container.childNodes.length) {
\r
177 // Browser represents caret position as the offset at the start of an element. When moving right
\r
178 // this is the element we are moving into so we consider our container to be child node at offset-1
\r
179 var pos = !left && offset > 0 ? offset-1 : offset;
\r
180 container = container.childNodes[pos];
\r
181 if (container.hasChildNodes()) {
\r
182 container = container.firstChild;
\r
185 // If not then the caret is at the last position in it's container and the caret container should be inserted after the noneditable element
\r
186 return !left ? element : null;
\r
190 // Walk left/right to look for contents
\r
191 walker = new TreeWalker(container, element);
\r
192 while (node = walker[left ? 'prev' : 'next']()) {
\r
193 if (node.nodeType === 3 && node.nodeValue.length > 0) {
\r
195 } else if (getContentEditable(node) === "true") {
\r
196 // Found contentEditable=true element return this one to we can move the caret inside it
\r
204 // Remove any existing caret containers
\r
205 removeCaretContainer();
\r
207 // Get noneditable start/end elements
\r
208 isCollapsed = selection.isCollapsed();
\r
209 nonEditableStart = getNonEditableParent(selection.getStart());
\r
210 nonEditableEnd = getNonEditableParent(selection.getEnd());
\r
212 // Is any fo the range endpoints noneditable
\r
213 if (nonEditableStart || nonEditableEnd) {
\r
214 rng = selection.getRng(true);
\r
216 // If it's a caret selection then look left/right to see if we need to move the caret out side or expand
\r
218 nonEditableStart = nonEditableStart || nonEditableEnd;
\r
219 var start = selection.getStart();
\r
220 if (element = hasSideContent(nonEditableStart, true)) {
\r
221 // We have no contents to the left of the caret then insert a caret container before the noneditable element
\r
222 insertCaretContainerOrExpandToBlock(element, true);
\r
223 } else if (element = hasSideContent(nonEditableStart, false)) {
\r
224 // We have no contents to the right of the caret then insert a caret container after the noneditable element
\r
225 insertCaretContainerOrExpandToBlock(element, false);
\r
227 // We are in the middle of a noneditable so expand to select it
\r
228 selection.select(nonEditableStart);
\r
231 rng = selection.getRng(true);
\r
233 // Expand selection to include start non editable element
\r
234 if (nonEditableStart) {
\r
235 rng.setStartBefore(nonEditableStart);
\r
238 // Expand selection to include end non editable element
\r
239 if (nonEditableEnd) {
\r
240 rng.setEndAfter(nonEditableEnd);
\r
243 selection.setRng(rng);
\r
248 function handleKey(ed, e) {
\r
249 var keyCode = e.keyCode, nonEditableParent, caretContainer, startElement, endElement;
\r
251 function getNonEmptyTextNodeSibling(node, prev) {
\r
252 while (node = node[prev ? 'previousSibling' : 'nextSibling']) {
\r
253 if (node.nodeType !== 3 || node.nodeValue.length > 0) {
\r
259 function positionCaretOnElement(element, start) {
\r
260 selection.select(element);
\r
261 selection.collapse(start);
\r
264 startElement = selection.getStart()
\r
265 endElement = selection.getEnd();
\r
267 // Disable all key presses in contentEditable=false except delete or backspace
\r
268 nonEditableParent = getNonEditableParent(startElement) || getNonEditableParent(endElement);
\r
269 if (nonEditableParent && (keyCode < 112 || keyCode > 124) && keyCode != VK.DELETE && keyCode != VK.BACKSPACE) {
\r
270 e.preventDefault();
\r
272 // Arrow left/right select the element and collapse left/right
\r
273 if (keyCode == VK.LEFT || keyCode == VK.RIGHT) {
\r
274 var left = keyCode == VK.LEFT;
\r
275 // If a block element find previous or next element to position the caret
\r
276 if (ed.dom.isBlock(nonEditableParent)) {
\r
277 var targetElement = left ? nonEditableParent.previousSibling : nonEditableParent.nextSibling;
\r
278 var walker = new TreeWalker(targetElement, targetElement);
\r
279 var caretElement = left ? walker.prev() : walker.next();
\r
280 positionCaretOnElement(caretElement, !left);
\r
282 positionCaretOnElement(nonEditableParent, left);
\r
286 // Is arrow left/right, backspace or delete
\r
287 if (keyCode == VK.LEFT || keyCode == VK.RIGHT || keyCode == VK.BACKSPACE || keyCode == VK.DELETE) {
\r
288 caretContainer = getParentCaretContainer(startElement);
\r
289 if (caretContainer) {
\r
290 // Arrow left or backspace
\r
291 if (keyCode == VK.LEFT || keyCode == VK.BACKSPACE) {
\r
292 nonEditableParent = getNonEmptyTextNodeSibling(caretContainer, true);
\r
294 if (nonEditableParent && getContentEditable(nonEditableParent) === "false") {
\r
295 e.preventDefault();
\r
297 if (keyCode == VK.LEFT) {
\r
298 positionCaretOnElement(nonEditableParent, true);
\r
300 dom.remove(nonEditableParent);
\r
303 removeCaretContainer(caretContainer);
\r
307 // Arrow right or delete
\r
308 if (keyCode == VK.RIGHT || keyCode == VK.DELETE) {
\r
309 nonEditableParent = getNonEmptyTextNodeSibling(caretContainer);
\r
311 if (nonEditableParent && getContentEditable(nonEditableParent) === "false") {
\r
312 e.preventDefault();
\r
314 if (keyCode == VK.RIGHT) {
\r
315 positionCaretOnElement(nonEditableParent, false);
\r
317 dom.remove(nonEditableParent);
\r
320 removeCaretContainer(caretContainer);
\r
328 ed.onMouseDown.addToTop(function(ed, e){
\r
329 // prevent collapsing selection to caret when clicking in a non-editable section
\r
330 var node = ed.selection.getNode();
\r
331 if (getContentEditable(node) === "false" && node == e.target) {
\r
332 e.preventDefault();
\r
335 ed.onMouseUp.addToTop(moveSelection);
\r
336 ed.onKeyDown.addToTop(handleKey);
\r
337 ed.onKeyUp.addToTop(moveSelection);
\r
340 tinymce.create('tinymce.plugins.NonEditablePlugin', {
\r
341 init : function(ed, url) {
\r
342 var editClass, nonEditClass, nonEditableRegExps;
\r
344 editClass = " " + tinymce.trim(ed.getParam("noneditable_editable_class", "mceEditable")) + " ";
\r
345 nonEditClass = " " + tinymce.trim(ed.getParam("noneditable_noneditable_class", "mceNonEditable")) + " ";
\r
347 // Setup noneditable regexps array
\r
348 nonEditableRegExps = ed.getParam("noneditable_regexp");
\r
349 if (nonEditableRegExps && !nonEditableRegExps.length) {
\r
350 nonEditableRegExps = [nonEditableRegExps];
\r
353 ed.onPreInit.add(function() {
\r
354 handleContentEditableSelection(ed);
\r
356 if (nonEditableRegExps) {
\r
357 ed.onBeforeSetContent.add(function(ed, args) {
\r
358 var i = nonEditableRegExps.length, content = args.content, cls = tinymce.trim(nonEditClass);
\r
360 // Don't replace the variables when raw is used for example on undo/redo
\r
361 if (args.format == "raw") {
\r
366 content = content.replace(nonEditableRegExps[i], function() {
\r
367 var args = arguments;
\r
369 return '<span class="' + cls + '" data-mce-content="' + ed.dom.encode(args[0]) + '">' + ed.dom.encode(typeof(args[1]) === "string" ? args[1] : args[0]) + '</span>';
\r
373 args.content = content;
\r
377 // Apply contentEditable true/false on elements with the noneditable/editable classes
\r
378 ed.parser.addAttributeFilter('class', function(nodes) {
\r
379 var i = nodes.length, className, node;
\r
383 className = " " + node.attr("class") + " ";
\r
385 if (className.indexOf(editClass) !== -1) {
\r
386 node.attr(internalName, "true");
\r
387 } else if (className.indexOf(nonEditClass) !== -1) {
\r
388 node.attr(internalName, "false");
\r
393 // Remove internal name
\r
394 ed.serializer.addAttributeFilter(internalName, function(nodes, name) {
\r
395 var i = nodes.length, node;
\r
400 if (nonEditableRegExps && node.attr('data-mce-content')) {
\r
401 node.name = "#text";
\r
404 node.value = node.attr('data-mce-content');
\r
406 node.attr(externalName, null);
\r
407 node.attr(internalName, null);
\r
412 // Convert external name into internal name
\r
413 ed.parser.addAttributeFilter(externalName, function(nodes, name) {
\r
414 var i = nodes.length, node;
\r
418 node.attr(internalName, node.attr(externalName));
\r
419 node.attr(externalName, null);
\r
425 getInfo : function() {
\r
427 longname : 'Non editable elements',
\r
428 author : 'Moxiecode Systems AB',
\r
429 authorurl : 'http://tinymce.moxiecode.com',
\r
430 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/noneditable',
\r
431 version : tinymce.majorVersion + "." + tinymce.minorVersion
\r
437 tinymce.PluginManager.add('noneditable', tinymce.plugins.NonEditablePlugin);
\r