1 /** |
|
2 * $Id: editor_plugin_src.js 1225 2009-09-07 19:06:19Z spocke $ |
|
3 * |
|
4 * @author Moxiecode |
|
5 * @copyright Copyright © 2004-2008, Moxiecode Systems AB, All rights reserved. |
|
6 */ |
|
7 |
|
8 (function() { |
|
9 var each = tinymce.each; |
|
10 |
|
11 tinymce.create('tinymce.plugins.PastePlugin', { |
|
12 init : function(ed, url) { |
|
13 var t = this, cb; |
|
14 |
|
15 t.editor = ed; |
|
16 t.url = url; |
|
17 |
|
18 // Setup plugin events |
|
19 t.onPreProcess = new tinymce.util.Dispatcher(t); |
|
20 t.onPostProcess = new tinymce.util.Dispatcher(t); |
|
21 |
|
22 // Register default handlers |
|
23 t.onPreProcess.add(t._preProcess); |
|
24 t.onPostProcess.add(t._postProcess); |
|
25 |
|
26 // Register optional preprocess handler |
|
27 t.onPreProcess.add(function(pl, o) { |
|
28 ed.execCallback('paste_preprocess', pl, o); |
|
29 }); |
|
30 |
|
31 // Register optional postprocess |
|
32 t.onPostProcess.add(function(pl, o) { |
|
33 ed.execCallback('paste_postprocess', pl, o); |
|
34 }); |
|
35 |
|
36 // This function executes the process handlers and inserts the contents |
|
37 function process(o) { |
|
38 var dom = ed.dom; |
|
39 |
|
40 // Execute pre process handlers |
|
41 t.onPreProcess.dispatch(t, o); |
|
42 |
|
43 // Create DOM structure |
|
44 o.node = dom.create('div', 0, o.content); |
|
45 |
|
46 // Execute post process handlers |
|
47 t.onPostProcess.dispatch(t, o); |
|
48 |
|
49 // Serialize content |
|
50 o.content = ed.serializer.serialize(o.node, {getInner : 1}); |
|
51 |
|
52 // Insert cleaned content. We need to handle insertion of contents containing block elements separately |
|
53 if (/<(p|h[1-6]|ul|ol)/.test(o.content)) |
|
54 t._insertBlockContent(ed, dom, o.content); |
|
55 else |
|
56 t._insert(o.content); |
|
57 }; |
|
58 |
|
59 // Add command for external usage |
|
60 ed.addCommand('mceInsertClipboardContent', function(u, o) { |
|
61 process(o); |
|
62 }); |
|
63 |
|
64 // This function grabs the contents from the clipboard by adding a |
|
65 // hidden div and placing the caret inside it and after the browser paste |
|
66 // is done it grabs that contents and processes that |
|
67 function grabContent(e) { |
|
68 var n, or, rng, sel = ed.selection, dom = ed.dom, body = ed.getBody(), posY; |
|
69 |
|
70 if (dom.get('_mcePaste')) |
|
71 return; |
|
72 |
|
73 // Create container to paste into |
|
74 n = dom.add(body, 'div', {id : '_mcePaste'}, '\uFEFF'); |
|
75 |
|
76 // If contentEditable mode we need to find out the position of the closest element |
|
77 if (body != ed.getDoc().body) |
|
78 posY = dom.getPos(ed.selection.getStart(), body).y; |
|
79 else |
|
80 posY = body.scrollTop; |
|
81 |
|
82 // Styles needs to be applied after the element is added to the document since WebKit will otherwise remove all styles |
|
83 dom.setStyles(n, { |
|
84 position : 'absolute', |
|
85 left : -10000, |
|
86 top : posY, |
|
87 width : 1, |
|
88 height : 1, |
|
89 overflow : 'hidden' |
|
90 }); |
|
91 |
|
92 if (tinymce.isIE) { |
|
93 // Select the container |
|
94 rng = dom.doc.body.createTextRange(); |
|
95 rng.moveToElementText(n); |
|
96 rng.execCommand('Paste'); |
|
97 |
|
98 // Remove container |
|
99 dom.remove(n); |
|
100 |
|
101 // Check if the contents was changed, if it wasn't then clipboard extraction failed probably due |
|
102 // to IE security settings so we pass the junk though better than nothing right |
|
103 if (n.innerHTML === '\uFEFF') { |
|
104 ed.execCommand('mcePasteWord'); |
|
105 e.preventDefault(); |
|
106 return; |
|
107 } |
|
108 |
|
109 // Process contents |
|
110 process({content : n.innerHTML}); |
|
111 |
|
112 // Block the real paste event |
|
113 return tinymce.dom.Event.cancel(e); |
|
114 } else { |
|
115 or = ed.selection.getRng(); |
|
116 |
|
117 // Move caret into hidden div |
|
118 n = n.firstChild; |
|
119 rng = ed.getDoc().createRange(); |
|
120 rng.setStart(n, 0); |
|
121 rng.setEnd(n, 1); |
|
122 sel.setRng(rng); |
|
123 |
|
124 // Wait a while and grab the pasted contents |
|
125 window.setTimeout(function() { |
|
126 var h = '', nl = dom.select('div[id=_mcePaste]'); |
|
127 |
|
128 // WebKit will split the div into multiple ones so this will loop through then all and join them to get the whole HTML string |
|
129 each(nl, function(n) { |
|
130 h += (dom.select('> span.Apple-style-span div', n)[0] || dom.select('> span.Apple-style-span', n)[0] || n).innerHTML; |
|
131 }); |
|
132 |
|
133 // Remove the nodes |
|
134 each(nl, function(n) { |
|
135 dom.remove(n); |
|
136 }); |
|
137 |
|
138 // Restore the old selection |
|
139 if (or) |
|
140 sel.setRng(or); |
|
141 |
|
142 process({content : h}); |
|
143 }, 0); |
|
144 } |
|
145 }; |
|
146 |
|
147 // Check if we should use the new auto process method |
|
148 if (ed.getParam('paste_auto_cleanup_on_paste', true)) { |
|
149 // Is it's Opera or older FF use key handler |
|
150 if (tinymce.isOpera || /Firefox\/2/.test(navigator.userAgent)) { |
|
151 ed.onKeyDown.add(function(ed, e) { |
|
152 if (((tinymce.isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45)) |
|
153 grabContent(e); |
|
154 }); |
|
155 } else { |
|
156 // Grab contents on paste event on Gecko and WebKit |
|
157 ed.onPaste.addToTop(function(ed, e) { |
|
158 return grabContent(e); |
|
159 }); |
|
160 } |
|
161 } |
|
162 |
|
163 // Block all drag/drop events |
|
164 if (ed.getParam('paste_block_drop')) { |
|
165 ed.onInit.add(function() { |
|
166 ed.dom.bind(ed.getBody(), ['dragend', 'dragover', 'draggesture', 'dragdrop', 'drop', 'drag'], function(e) { |
|
167 e.preventDefault(); |
|
168 e.stopPropagation(); |
|
169 |
|
170 return false; |
|
171 }); |
|
172 }); |
|
173 } |
|
174 |
|
175 // Add legacy support |
|
176 t._legacySupport(); |
|
177 }, |
|
178 |
|
179 getInfo : function() { |
|
180 return { |
|
181 longname : 'Paste text/word', |
|
182 author : 'Moxiecode Systems AB', |
|
183 authorurl : 'http://tinymce.moxiecode.com', |
|
184 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/paste', |
|
185 version : tinymce.majorVersion + "." + tinymce.minorVersion |
|
186 }; |
|
187 }, |
|
188 |
|
189 _preProcess : function(pl, o) { |
|
190 var ed = this.editor, h = o.content, process, stripClass; |
|
191 |
|
192 //console.log('Before preprocess:' + o.content); |
|
193 |
|
194 function process(items) { |
|
195 each(items, function(v) { |
|
196 // Remove or replace |
|
197 if (v.constructor == RegExp) |
|
198 h = h.replace(v, ''); |
|
199 else |
|
200 h = h.replace(v[0], v[1]); |
|
201 }); |
|
202 }; |
|
203 |
|
204 // Detect Word content and process it more aggressive |
|
205 if (/(class=\"?Mso|style=\"[^\"]*\bmso\-|w:WordDocument)/.test(h) || o.wordContent) { |
|
206 o.wordContent = true; // Mark the pasted contents as word specific content |
|
207 //console.log('Word contents detected.'); |
|
208 |
|
209 // Process away some basic content |
|
210 process([ |
|
211 /^\s*( )+/g, // nbsp entities at the start of contents |
|
212 /( |<br[^>]*>)+\s*$/g // nbsp entities at the end of contents |
|
213 ]); |
|
214 |
|
215 if (ed.getParam('paste_convert_middot_lists', true)) { |
|
216 process([ |
|
217 [/<!--\[if !supportLists\]-->/gi, '$&__MCE_ITEM__'], // Convert supportLists to a list item marker |
|
218 [/(<span[^>]+:\s*symbol[^>]+>)/gi, '$1__MCE_ITEM__'], // Convert symbol spans to list items |
|
219 [/(<span[^>]+mso-list:[^>]+>)/gi, '$1__MCE_ITEM__'] // Convert mso-list to item marker |
|
220 ]); |
|
221 } |
|
222 |
|
223 process([ |
|
224 /<!--[\s\S]+?-->/gi, // Word comments |
|
225 /<\/?(img|font|meta|link|style|div|v:\w+)[^>]*>/gi, // Remove some tags including VML content |
|
226 /<\\?\?xml[^>]*>/gi, // XML namespace declarations |
|
227 /<\/?o:[^>]*>/gi, // MS namespaced elements <o:tag> |
|
228 / (id|name|language|type|on\w+|v:\w+)=\"([^\"]*)\"/gi, // on.., class, style and language attributes with quotes |
|
229 / (id|name|language|type|on\w+|v:\w+)=(\w+)/gi, // on.., class, style and language attributes without quotes (IE) |
|
230 [/<(\/?)s>/gi, '<$1strike>'], // Convert <s> into <strike> for line-though |
|
231 /<script[^>]+>[\s\S]*?<\/script>/gi, // All scripts elements for msoShowComment for example |
|
232 [/ /g, '\u00a0'] // Replace nsbp entites to char since it's easier to handle |
|
233 ]); |
|
234 |
|
235 // Remove all spans if no styles is to be retained |
|
236 if (!ed.getParam('paste_retain_style_properties')) { |
|
237 process([ |
|
238 /<\/?(span)[^>]*>/gi |
|
239 ]); |
|
240 } |
|
241 } |
|
242 |
|
243 // Allow for class names to be retained if desired; either all, or just the ones from Word |
|
244 // Note that the paste_strip_class_attributes: 'none, verify_css_classes: true is also a good variation. |
|
245 stripClass = ed.getParam('paste_strip_class_attributes'); |
|
246 if (stripClass != 'none') { |
|
247 // Cleans everything but mceItem... classes |
|
248 function cleanClasses(str, cls) { |
|
249 var i, out = ''; |
|
250 |
|
251 // Remove all classes |
|
252 if (stripClass == 'all') |
|
253 return ''; |
|
254 |
|
255 cls = tinymce.explode(cls, ' '); |
|
256 |
|
257 for (i = cls.length - 1; i >= 0; i--) { |
|
258 // Remove Mso classes |
|
259 if (!/^(Mso)/i.test(cls[i])) |
|
260 out += (!out ? '' : ' ') + cls[i]; |
|
261 } |
|
262 |
|
263 return ' class="' + out + '"'; |
|
264 }; |
|
265 |
|
266 process([ |
|
267 [/ class=\"([^\"]*)\"/gi, cleanClasses], // class attributes with quotes |
|
268 [/ class=(\w+)/gi, cleanClasses] // class attributes without quotes (IE) |
|
269 ]); |
|
270 } |
|
271 |
|
272 // Remove spans option |
|
273 if (ed.getParam('paste_remove_spans')) { |
|
274 process([ |
|
275 /<\/?(span)[^>]*>/gi |
|
276 ]); |
|
277 } |
|
278 |
|
279 //console.log('After preprocess:' + h); |
|
280 |
|
281 o.content = h; |
|
282 }, |
|
283 |
|
284 /** |
|
285 * Various post process items. |
|
286 */ |
|
287 _postProcess : function(pl, o) { |
|
288 var t = this, ed = t.editor, dom = ed.dom, styleProps; |
|
289 |
|
290 if (o.wordContent) { |
|
291 // Remove named anchors or TOC links |
|
292 each(dom.select('a', o.node), function(a) { |
|
293 if (!a.href || a.href.indexOf('#_Toc') != -1) |
|
294 dom.remove(a, 1); |
|
295 }); |
|
296 |
|
297 if (t.editor.getParam('paste_convert_middot_lists', true)) |
|
298 t._convertLists(pl, o); |
|
299 |
|
300 // Process styles |
|
301 styleProps = ed.getParam('paste_retain_style_properties'); // retained properties |
|
302 |
|
303 // If string property then split it |
|
304 if (tinymce.is(styleProps, 'string')) |
|
305 styleProps = tinymce.explode(styleProps); |
|
306 |
|
307 // Retains some style properties |
|
308 each(dom.select('*', o.node), function(el) { |
|
309 var newStyle = {}, npc = 0, i, sp, sv; |
|
310 |
|
311 // Store a subset of the existing styles |
|
312 if (styleProps) { |
|
313 for (i = 0; i < styleProps.length; i++) { |
|
314 sp = styleProps[i]; |
|
315 sv = dom.getStyle(el, sp); |
|
316 |
|
317 if (sv) { |
|
318 newStyle[sp] = sv; |
|
319 npc++; |
|
320 } |
|
321 } |
|
322 } |
|
323 |
|
324 // Remove all of the existing styles |
|
325 dom.setAttrib(el, 'style', ''); |
|
326 |
|
327 if (styleProps && npc > 0) |
|
328 dom.setStyles(el, newStyle); // Add back the stored subset of styles |
|
329 else // Remove empty span tags that do not have class attributes |
|
330 if (el.nodeName == 'SPAN' && !el.className) |
|
331 dom.remove(el, true); |
|
332 }); |
|
333 } |
|
334 |
|
335 // Remove all style information or only specifically on WebKit to avoid the style bug on that browser |
|
336 if (ed.getParam("paste_remove_styles") || (ed.getParam("paste_remove_styles_if_webkit") && tinymce.isWebKit)) { |
|
337 each(dom.select('*[style]', o.node), function(el) { |
|
338 el.removeAttribute('style'); |
|
339 el.removeAttribute('mce_style'); |
|
340 }); |
|
341 } else { |
|
342 if (tinymce.isWebKit) { |
|
343 // We need to compress the styles on WebKit since if you paste <img border="0" /> it will become <img border="0" style="... lots of junk ..." /> |
|
344 // Removing the mce_style that contains the real value will force the Serializer engine to compress the styles |
|
345 each(dom.select('*', o.node), function(el) { |
|
346 el.removeAttribute('mce_style'); |
|
347 }); |
|
348 } |
|
349 } |
|
350 }, |
|
351 |
|
352 /** |
|
353 * Converts the most common bullet and number formats in Office into a real semantic UL/LI list. |
|
354 */ |
|
355 _convertLists : function(pl, o) { |
|
356 var dom = pl.editor.dom, listElm, li, lastMargin = -1, margin, levels = [], lastType, html; |
|
357 |
|
358 // Convert middot lists into real semantic lists |
|
359 each(dom.select('p', o.node), function(p) { |
|
360 var sib, val = '', type, html, idx, parents; |
|
361 |
|
362 // Get text node value at beginning of paragraph |
|
363 for (sib = p.firstChild; sib && sib.nodeType == 3; sib = sib.nextSibling) |
|
364 val += sib.nodeValue; |
|
365 |
|
366 val = p.innerHTML.replace(/<\/?\w+[^>]*>/gi, '').replace(/ /g, '\u00a0'); |
|
367 |
|
368 // Detect unordered lists look for bullets |
|
369 if (/^(__MCE_ITEM__)+[\u2022\u00b7\u00a7\u00d8o]\s*\u00a0*/.test(val)) |
|
370 type = 'ul'; |
|
371 |
|
372 // Detect ordered lists 1., a. or ixv. |
|
373 if (/^__MCE_ITEM__\s*\w+\.\s*\u00a0{2,}/.test(val)) |
|
374 type = 'ol'; |
|
375 |
|
376 // Check if node value matches the list pattern: o |
|
377 if (type) { |
|
378 margin = parseFloat(p.style.marginLeft || 0); |
|
379 |
|
380 if (margin > lastMargin) |
|
381 levels.push(margin); |
|
382 |
|
383 if (!listElm || type != lastType) { |
|
384 listElm = dom.create(type); |
|
385 dom.insertAfter(listElm, p); |
|
386 } else { |
|
387 // Nested list element |
|
388 if (margin > lastMargin) { |
|
389 listElm = li.appendChild(dom.create(type)); |
|
390 } else if (margin < lastMargin) { |
|
391 // Find parent level based on margin value |
|
392 idx = tinymce.inArray(levels, margin); |
|
393 parents = dom.getParents(listElm.parentNode, type); |
|
394 listElm = parents[parents.length - 1 - idx] || listElm; |
|
395 } |
|
396 } |
|
397 |
|
398 // Remove middot or number spans if they exists |
|
399 each(dom.select('span', p), function(span) { |
|
400 var html = span.innerHTML.replace(/<\/?\w+[^>]*>/gi, ''); |
|
401 |
|
402 // Remove span with the middot or the number |
|
403 if (type == 'ul' && /^[\u2022\u00b7\u00a7\u00d8o]/.test(html)) |
|
404 dom.remove(span); |
|
405 else if (/^[\s\S]*\w+\.( |\u00a0)*\s*/.test(html)) |
|
406 dom.remove(span); |
|
407 }); |
|
408 |
|
409 html = p.innerHTML; |
|
410 |
|
411 // Remove middot/list items |
|
412 if (type == 'ul') |
|
413 html = p.innerHTML.replace(/__MCE_ITEM__/g, '').replace(/^[\u2022\u00b7\u00a7\u00d8o]\s*( |\u00a0)+\s*/, ''); |
|
414 else |
|
415 html = p.innerHTML.replace(/__MCE_ITEM__/g, '').replace(/^\s*\w+\.( |\u00a0)+\s*/, ''); |
|
416 |
|
417 // Create li and add paragraph data into the new li |
|
418 li = listElm.appendChild(dom.create('li', 0, html)); |
|
419 dom.remove(p); |
|
420 |
|
421 lastMargin = margin; |
|
422 lastType = type; |
|
423 } else |
|
424 listElm = lastMargin = 0; // End list element |
|
425 }); |
|
426 |
|
427 // Remove any left over makers |
|
428 html = o.node.innerHTML; |
|
429 if (html.indexOf('__MCE_ITEM__') != -1) |
|
430 o.node.innerHTML = html.replace(/__MCE_ITEM__/g, ''); |
|
431 }, |
|
432 |
|
433 /** |
|
434 * This method will split the current block parent and insert the contents inside the split position. |
|
435 * This logic can be improved so text nodes at the start/end remain in the start/end block elements |
|
436 */ |
|
437 _insertBlockContent : function(ed, dom, content) { |
|
438 var parentBlock, marker, sel = ed.selection, last, elm, vp, y, elmHeight; |
|
439 |
|
440 function select(n) { |
|
441 var r; |
|
442 |
|
443 if (tinymce.isIE) { |
|
444 r = ed.getDoc().body.createTextRange(); |
|
445 r.moveToElementText(n); |
|
446 r.collapse(false); |
|
447 r.select(); |
|
448 } else { |
|
449 sel.select(n, 1); |
|
450 sel.collapse(false); |
|
451 } |
|
452 }; |
|
453 |
|
454 // Insert a marker for the caret position |
|
455 this._insert('<span id="_marker"> </span>', 1); |
|
456 marker = dom.get('_marker'); |
|
457 parentBlock = dom.getParent(marker, 'p,h1,h2,h3,h4,h5,h6,ul,ol,th,td'); |
|
458 |
|
459 // If it's a parent block but not a table cell |
|
460 if (parentBlock && !/TD|TH/.test(parentBlock.nodeName)) { |
|
461 // Split parent block |
|
462 marker = dom.split(parentBlock, marker); |
|
463 |
|
464 // Insert nodes before the marker |
|
465 each(dom.create('div', 0, content).childNodes, function(n) { |
|
466 last = marker.parentNode.insertBefore(n.cloneNode(true), marker); |
|
467 }); |
|
468 |
|
469 // Move caret after marker |
|
470 select(last); |
|
471 } else { |
|
472 dom.setOuterHTML(marker, content); |
|
473 sel.select(ed.getBody(), 1); |
|
474 sel.collapse(0); |
|
475 } |
|
476 |
|
477 dom.remove('_marker'); // Remove marker if it's left |
|
478 |
|
479 // Get element, position and height |
|
480 elm = sel.getStart(); |
|
481 vp = dom.getViewPort(ed.getWin()); |
|
482 y = ed.dom.getPos(elm).y; |
|
483 elmHeight = elm.clientHeight; |
|
484 |
|
485 // Is element within viewport if not then scroll it into view |
|
486 if (y < vp.y || y + elmHeight > vp.y + vp.h) |
|
487 ed.getDoc().body.scrollTop = y < vp.y ? y : y - vp.h + 25; |
|
488 }, |
|
489 |
|
490 /** |
|
491 * Inserts the specified contents at the caret position. |
|
492 */ |
|
493 _insert : function(h, skip_undo) { |
|
494 var ed = this.editor; |
|
495 |
|
496 // First delete the contents seems to work better on WebKit |
|
497 if (!ed.selection.isCollapsed()) |
|
498 ed.getDoc().execCommand('Delete', false, null); |
|
499 |
|
500 // It's better to use the insertHTML method on Gecko since it will combine paragraphs correctly before inserting the contents |
|
501 ed.execCommand(tinymce.isGecko ? 'insertHTML' : 'mceInsertContent', false, h, {skip_undo : skip_undo}); |
|
502 }, |
|
503 |
|
504 /** |
|
505 * This method will open the old style paste dialogs. Some users might want the old behavior but still use the new cleanup engine. |
|
506 */ |
|
507 _legacySupport : function() { |
|
508 var t = this, ed = t.editor; |
|
509 |
|
510 // Register commands for backwards compatibility |
|
511 each(['mcePasteText', 'mcePasteWord'], function(cmd) { |
|
512 ed.addCommand(cmd, function() { |
|
513 ed.windowManager.open({ |
|
514 file : t.url + (cmd == 'mcePasteText' ? '/pastetext.htm' : '/pasteword.htm'), |
|
515 width : parseInt(ed.getParam("paste_dialog_width", "450")), |
|
516 height : parseInt(ed.getParam("paste_dialog_height", "400")), |
|
517 inline : 1 |
|
518 }); |
|
519 }); |
|
520 }); |
|
521 |
|
522 // Register buttons for backwards compatibility |
|
523 ed.addButton('pastetext', {title : 'paste.paste_text_desc', cmd : 'mcePasteText'}); |
|
524 ed.addButton('pasteword', {title : 'paste.paste_word_desc', cmd : 'mcePasteWord'}); |
|
525 ed.addButton('selectall', {title : 'paste.selectall_desc', cmd : 'selectall'}); |
|
526 } |
|
527 }); |
|
528 |
|
529 // Register plugin |
|
530 tinymce.PluginManager.add('paste', tinymce.plugins.PastePlugin); |
|
531 })(); |
|