JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.5.1
[ckeditor.git] / _source / plugins / htmldataprocessor / plugin.js
1 /*\r
2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
4 */\r
5 \r
6 (function()\r
7 {\r
8         // Regex to scan for   at the end of blocks, which are actually placeholders.\r
9         // Safari transforms the   to \xa0. (#4172)\r
10         var tailNbspRegex = /^[\t\r\n ]*(?: |\xa0)$/;\r
11 \r
12         var protectedSourceMarker = '{cke_protected}';\r
13 \r
14         // Return the last non-space child node of the block (#4344).\r
15         function lastNoneSpaceChild( block )\r
16         {\r
17                 var lastIndex = block.children.length,\r
18                         last = block.children[ lastIndex - 1 ];\r
19                 while (  last && last.type == CKEDITOR.NODE_TEXT && !CKEDITOR.tools.trim( last.value ) )\r
20                         last = block.children[ --lastIndex ];\r
21                 return last;\r
22         }\r
23 \r
24         function trimFillers( block, fromSource )\r
25         {\r
26                 // If the current node is a block, and if we're converting from source or\r
27                 // we're not in IE then search for and remove any tailing BR node.\r
28                 //\r
29                 // Also, any   at the end of blocks are fillers, remove them as well.\r
30                 // (#2886)\r
31                 var children = block.children, lastChild = lastNoneSpaceChild( block );\r
32                 if ( lastChild )\r
33                 {\r
34                         if ( ( fromSource || !CKEDITOR.env.ie ) && lastChild.type == CKEDITOR.NODE_ELEMENT && lastChild.name == 'br' )\r
35                                 children.pop();\r
36                         if ( lastChild.type == CKEDITOR.NODE_TEXT && tailNbspRegex.test( lastChild.value ) )\r
37                                 children.pop();\r
38                 }\r
39         }\r
40 \r
41         function blockNeedsExtension( block, fromSource, extendEmptyBlock )\r
42         {\r
43                 if( !fromSource && ( !extendEmptyBlock ||\r
44                         typeof extendEmptyBlock == 'function' && ( extendEmptyBlock( block ) === false ) ) )\r
45                         return false;\r
46 \r
47         // 1. For IE version >=8,  empty blocks are displayed correctly themself in wysiwiyg;\r
48         // 2. For the rest, at least table cell and list item need no filler space.\r
49         // (#6248)\r
50         if ( fromSource && CKEDITOR.env.ie &&\r
51                 ( document.documentMode > 7\r
52                 || block.name in CKEDITOR.dtd.tr\r
53                 || block.name in CKEDITOR.dtd.$listItem ) )\r
54             return false;\r
55 \r
56                 var lastChild = lastNoneSpaceChild( block );\r
57 \r
58                 return !lastChild || lastChild &&\r
59                                 ( lastChild.type == CKEDITOR.NODE_ELEMENT && lastChild.name == 'br'\r
60                                 // Some of the controls in form needs extension too,\r
61                                 // to move cursor at the end of the form. (#4791)\r
62                                 || block.name == 'form' && lastChild.name == 'input' );\r
63         }\r
64 \r
65         function getBlockExtension( isOutput, emptyBlockFiller )\r
66         {\r
67                 return function( node )\r
68                 {\r
69                         trimFillers( node, !isOutput );\r
70 \r
71                         if ( blockNeedsExtension( node, !isOutput, emptyBlockFiller ) )\r
72                         {\r
73                                 if ( isOutput || CKEDITOR.env.ie )\r
74                                         node.add( new CKEDITOR.htmlParser.text( '\xa0' ) );\r
75                                 else\r
76                                         node.add( new CKEDITOR.htmlParser.element( 'br', {} ) );\r
77                         }\r
78                 };\r
79         }\r
80 \r
81         var dtd = CKEDITOR.dtd;\r
82 \r
83         // Find out the list of block-like tags that can contain <br>.\r
84         var blockLikeTags = CKEDITOR.tools.extend( {}, dtd.$block, dtd.$listItem, dtd.$tableContent );\r
85         for ( var i in blockLikeTags )\r
86         {\r
87                 if ( ! ( 'br' in dtd[i] ) )\r
88                         delete blockLikeTags[i];\r
89         }\r
90         // We just avoid filler in <pre> right now.\r
91         // TODO: Support filler for <pre>, line break is also occupy line height.\r
92         delete blockLikeTags.pre;\r
93         var defaultDataFilterRules =\r
94         {\r
95                 elements : {\r
96                         a : function( element )\r
97                         {\r
98                                 var attrs = element.attributes;\r
99                                 if ( attrs && attrs[ 'data-cke-saved-name' ] )\r
100                                         attrs[ 'class' ] = ( attrs[ 'class' ] ? attrs[ 'class' ] + ' ' : '' ) + 'cke_anchor';\r
101                         }\r
102                 },\r
103                 attributeNames :\r
104                 [\r
105                         // Event attributes (onXYZ) must not be directly set. They can become\r
106                         // active in the editing area (IE|WebKit).\r
107                         [ ( /^on/ ), 'data-cke-pa-on' ]\r
108                 ]\r
109         };\r
110 \r
111         var defaultDataBlockFilterRules = { elements : {} };\r
112 \r
113         for ( i in blockLikeTags )\r
114                 defaultDataBlockFilterRules.elements[ i ] = getBlockExtension();\r
115 \r
116         var defaultHtmlFilterRules =\r
117                 {\r
118                         elementNames :\r
119                         [\r
120                                 // Remove the "cke:" namespace prefix.\r
121                                 [ ( /^cke:/ ), '' ],\r
122 \r
123                                 // Ignore <?xml:namespace> tags.\r
124                                 [ ( /^\?xml:namespace$/ ), '' ]\r
125                         ],\r
126 \r
127                         attributeNames :\r
128                         [\r
129                                 // Attributes saved for changes and protected attributes.\r
130                                 [ ( /^data-cke-(saved|pa)-/ ), '' ],\r
131 \r
132                                 // All "data-cke-" attributes are to be ignored.\r
133                                 [ ( /^data-cke-.*/ ), '' ],\r
134 \r
135                                 [ 'hidefocus', '' ]\r
136                         ],\r
137 \r
138                         elements :\r
139                         {\r
140                                 $ : function( element )\r
141                                 {\r
142                                         var attribs = element.attributes;\r
143 \r
144                                         if ( attribs )\r
145                                         {\r
146                                                 // Elements marked as temporary are to be ignored.\r
147                                                 if ( attribs[ 'data-cke-temp' ] )\r
148                                                         return false;\r
149 \r
150                                                 // Remove duplicated attributes - #3789.\r
151                                                 var attributeNames = [ 'name', 'href', 'src' ],\r
152                                                         savedAttributeName;\r
153                                                 for ( var i = 0 ; i < attributeNames.length ; i++ )\r
154                                                 {\r
155                                                         savedAttributeName = 'data-cke-saved-' + attributeNames[ i ];\r
156                                                         savedAttributeName in attribs && ( delete attribs[ attributeNames[ i ] ] );\r
157                                                 }\r
158                                         }\r
159 \r
160                                         return element;\r
161                                 },\r
162 \r
163                                 embed : function( element )\r
164                                 {\r
165                                         var parent = element.parent;\r
166 \r
167                                         // If the <embed> is child of a <object>, copy the width\r
168                                         // and height attributes from it.\r
169                                         if ( parent && parent.name == 'object' )\r
170                                         {\r
171                                                 var parentWidth = parent.attributes.width,\r
172                                                         parentHeight = parent.attributes.height;\r
173                                                 parentWidth && ( element.attributes.width = parentWidth );\r
174                                                 parentHeight && ( element.attributes.height = parentHeight );\r
175                                         }\r
176                                 },\r
177                                 // Restore param elements into self-closing.\r
178                                 param : function( param )\r
179                                 {\r
180                                         param.children = [];\r
181                                         param.isEmpty = true;\r
182                                         return param;\r
183                                 },\r
184 \r
185                                 // Remove empty link but not empty anchor.(#3829)\r
186                                 a : function( element )\r
187                                 {\r
188                                         if ( !( element.children.length ||\r
189                                                         element.attributes.name ||\r
190                                                         element.attributes[ 'data-cke-saved-name' ] ) )\r
191                                         {\r
192                                                 return false;\r
193                                         }\r
194                                 },\r
195 \r
196                                 // Remove dummy span in webkit.\r
197                                 span: function( element )\r
198                                 {\r
199                                         if ( element.attributes[ 'class' ] == 'Apple-style-span' )\r
200                                                 delete element.name;\r
201                                 },\r
202 \r
203                                 // Empty <pre> in IE is reported with filler node (&nbsp;).\r
204                                 pre : function( element ) { CKEDITOR.env.ie && trimFillers( element ); },\r
205 \r
206                                 html : function( element )\r
207                                 {\r
208                                         delete element.attributes.contenteditable;\r
209                                         delete element.attributes[ 'class' ];\r
210                                 },\r
211 \r
212                                 body : function( element )\r
213                                 {\r
214                                         delete element.attributes.spellcheck;\r
215                                         delete element.attributes.contenteditable;\r
216                                 },\r
217 \r
218                                 style : function( element )\r
219                                 {\r
220                                         var child = element.children[ 0 ];\r
221                                         child && child.value && ( child.value = CKEDITOR.tools.trim( child.value ));\r
222 \r
223                                         if ( !element.attributes.type )\r
224                                                 element.attributes.type = 'text/css';\r
225                                 },\r
226 \r
227                                 title : function( element )\r
228                                 {\r
229                                         var titleText = element.children[ 0 ];\r
230                                         titleText && ( titleText.value = element.attributes[ 'data-cke-title' ] || '' );\r
231                                 }\r
232                         },\r
233 \r
234                         attributes :\r
235                         {\r
236                                 'class' : function( value, element )\r
237                                 {\r
238                                         // Remove all class names starting with "cke_".\r
239                                         return CKEDITOR.tools.ltrim( value.replace( /(?:^|\s+)cke_[^\s]*/g, '' ) ) || false;\r
240                                 }\r
241                         },\r
242 \r
243                         comment : function( contents )\r
244                         {\r
245                                 // If this is a comment for protected source.\r
246                                 if ( contents.substr( 0, protectedSourceMarker.length ) == protectedSourceMarker )\r
247                                 {\r
248                                         // Remove the extra marker for real comments from it.\r
249                                         if ( contents.substr( protectedSourceMarker.length, 3 ) == '{C}' )\r
250                                                 contents = contents.substr( protectedSourceMarker.length + 3 );\r
251                                         else\r
252                                                 contents = contents.substr( protectedSourceMarker.length );\r
253 \r
254                                         return new CKEDITOR.htmlParser.cdata( decodeURIComponent( contents ) );\r
255                                 }\r
256 \r
257                                 return contents;\r
258                         }\r
259                 };\r
260 \r
261         if ( CKEDITOR.env.ie )\r
262         {\r
263                 // IE outputs style attribute in capital letters. We should convert\r
264                 // them back to lower case, while not hurting the values (#5930)\r
265                 defaultHtmlFilterRules.attributes.style = function( value, element )\r
266                 {\r
267                         return value.replace( /(^|;)([^\:]+)/g, function( match )\r
268                                 {\r
269                                         return match.toLowerCase();\r
270                                 });\r
271                 };\r
272         }\r
273 \r
274         function protectReadOnly( element )\r
275         {\r
276                 var attrs = element.attributes;\r
277 \r
278                 // We should flag that the element was locked by our code so\r
279                 // it'll be editable by the editor functions (#6046).\r
280                 if ( attrs.contenteditable != "false" )\r
281                         attrs[ 'data-cke-editable' ] = attrs.contenteditable ? 'true' : 1;\r
282 \r
283                 attrs.contenteditable = "false";\r
284         }\r
285         function unprotectReadyOnly( element )\r
286         {\r
287                 var attrs = element.attributes;\r
288                 switch( attrs[ 'data-cke-editable' ] )\r
289                 {\r
290                         case 'true':    attrs.contenteditable = 'true'; break;\r
291                         case '1':               delete attrs.contenteditable;   break;\r
292                 }\r
293         }\r
294         // Disable form elements editing mode provided by some browers. (#5746)\r
295         for ( i in { input : 1, textarea : 1 } )\r
296         {\r
297                 defaultDataFilterRules.elements[ i ] = protectReadOnly;\r
298                 defaultHtmlFilterRules.elements[ i ] = unprotectReadyOnly;\r
299         }\r
300 \r
301         var protectElementRegex = /<(a|area|img|input)\b([^>]*)>/gi,\r
302                 protectAttributeRegex = /\b(href|src|name)\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|(?:[^ "'>]+))/gi;\r
303 \r
304         var protectElementsRegex = /(?:<style(?=[ >])[^>]*>[\s\S]*<\/style>)|(?:<(:?link|meta|base)[^>]*>)/gi,\r
305                 encodedElementsRegex = /<cke:encoded>([^<]*)<\/cke:encoded>/gi;\r
306 \r
307         var protectElementNamesRegex = /(<\/?)((?:object|embed|param|html|body|head|title)[^>]*>)/gi,\r
308                 unprotectElementNamesRegex = /(<\/?)cke:((?:html|body|head|title)[^>]*>)/gi;\r
309 \r
310         var protectSelfClosingRegex = /<cke:(param|embed)([^>]*?)\/?>(?!\s*<\/cke:\1)/gi;\r
311 \r
312         function protectAttributes( html )\r
313         {\r
314                 return html.replace( protectElementRegex, function( element, tag, attributes )\r
315                 {\r
316                         return '<' +  tag + attributes.replace( protectAttributeRegex, function( fullAttr, attrName )\r
317                         {\r
318                                 // We should not rewrite the existed protected attributes, e.g. clipboard content from editor. (#5218)\r
319                                 if ( attributes.indexOf( 'data-cke-saved-' + attrName ) == -1 )\r
320                                         return ' data-cke-saved-' + fullAttr + ' ' + fullAttr;\r
321 \r
322                                 return fullAttr;\r
323                         }) + '>';\r
324                 });\r
325         }\r
326 \r
327         function protectElements( html )\r
328         {\r
329                 return html.replace( protectElementsRegex, function( match )\r
330                         {\r
331                                 return '<cke:encoded>' + encodeURIComponent( match ) + '</cke:encoded>';\r
332                         });\r
333         }\r
334 \r
335         function unprotectElements( html )\r
336         {\r
337                 return html.replace( encodedElementsRegex, function( match, encoded )\r
338                         {\r
339                                 return decodeURIComponent( encoded );\r
340                         });\r
341         }\r
342 \r
343         function protectElementsNames( html )\r
344         {\r
345                 return html.replace( protectElementNamesRegex, '$1cke:$2');\r
346         }\r
347 \r
348         function unprotectElementNames( html )\r
349         {\r
350                 return html.replace( unprotectElementNamesRegex, '$1$2' );\r
351         }\r
352 \r
353         function protectSelfClosingElements( html )\r
354         {\r
355                 return html.replace( protectSelfClosingRegex, '<cke:$1$2></cke:$1>' );\r
356         }\r
357 \r
358         function protectPreFormatted( html )\r
359         {\r
360                 return html.replace( /(<pre\b[^>]*>)(\r\n|\n)/g, '$1$2$2' );\r
361         }\r
362 \r
363         function protectRealComments( html )\r
364         {\r
365                 return html.replace( /<!--(?!{cke_protected})[\s\S]+?-->/g, function( match )\r
366                         {\r
367                                 return '<!--' + protectedSourceMarker +\r
368                                                 '{C}' +\r
369                                                 encodeURIComponent( match ).replace( /--/g, '%2D%2D' ) +\r
370                                                 '-->';\r
371                         });\r
372         }\r
373 \r
374         function unprotectRealComments( html )\r
375         {\r
376                 return html.replace( /<!--\{cke_protected\}\{C\}([\s\S]+?)-->/g, function( match, data )\r
377                         {\r
378                                 return decodeURIComponent( data );\r
379                         });\r
380         }\r
381 \r
382         function protectSource( data, protectRegexes )\r
383         {\r
384                 var protectedHtml = [],\r
385                         tempRegex = /<\!--\{cke_temp(comment)?\}(\d*?)-->/g;\r
386 \r
387                 var regexes =\r
388                         [\r
389                                 // Script tags will also be forced to be protected, otherwise\r
390                                 // IE will execute them.\r
391                                 ( /<script[\s\S]*?<\/script>/gi ),\r
392 \r
393                                 // <noscript> tags (get lost in IE and messed up in FF).\r
394                                 /<noscript[\s\S]*?<\/noscript>/gi\r
395                         ]\r
396                         .concat( protectRegexes );\r
397 \r
398                 // First of any other protection, we must protect all comments\r
399                 // to avoid loosing them (of course, IE related).\r
400                 // Note that we use a different tag for comments, as we need to\r
401                 // transform them when applying filters.\r
402                 data = data.replace( (/<!--[\s\S]*?-->/g), function( match )\r
403                         {\r
404                                 return  '<!--{cke_tempcomment}' + ( protectedHtml.push( match ) - 1 ) + '-->';\r
405                         });\r
406 \r
407                 for ( var i = 0 ; i < regexes.length ; i++ )\r
408                 {\r
409                         data = data.replace( regexes[i], function( match )\r
410                                 {\r
411                                         match = match.replace( tempRegex,               // There could be protected source inside another one. (#3869).\r
412                                                 function( $, isComment, id )\r
413                                                 {\r
414                                                         return protectedHtml[ id ];\r
415                                                 }\r
416                                         );\r
417                                         return  '<!--{cke_temp}' + ( protectedHtml.push( match ) - 1 ) + '-->';\r
418                                 });\r
419                 }\r
420                 data = data.replace( tempRegex, function( $, isComment, id )\r
421                         {\r
422                                 return '<!--' + protectedSourceMarker +\r
423                                                 ( isComment ? '{C}' : '' ) +\r
424                                                 encodeURIComponent( protectedHtml[ id ] ).replace( /--/g, '%2D%2D' ) +\r
425                                                 '-->';\r
426                         }\r
427                 );\r
428                 return data;\r
429         }\r
430 \r
431         CKEDITOR.plugins.add( 'htmldataprocessor',\r
432         {\r
433                 requires : [ 'htmlwriter' ],\r
434 \r
435                 init : function( editor )\r
436                 {\r
437                         var dataProcessor = editor.dataProcessor = new CKEDITOR.htmlDataProcessor( editor );\r
438 \r
439                         dataProcessor.writer.forceSimpleAmpersand = editor.config.forceSimpleAmpersand;\r
440 \r
441                         dataProcessor.dataFilter.addRules( defaultDataFilterRules );\r
442                         dataProcessor.dataFilter.addRules( defaultDataBlockFilterRules );\r
443                         dataProcessor.htmlFilter.addRules( defaultHtmlFilterRules );\r
444 \r
445                         var defaultHtmlBlockFilterRules = { elements : {} };\r
446                         for ( i in blockLikeTags )\r
447                                 defaultHtmlBlockFilterRules.elements[ i ] = getBlockExtension( true, editor.config.fillEmptyBlocks );\r
448 \r
449                         dataProcessor.htmlFilter.addRules( defaultHtmlBlockFilterRules );\r
450                 },\r
451 \r
452                 onLoad : function()\r
453                 {\r
454                         ! ( 'fillEmptyBlocks' in CKEDITOR.config ) && ( CKEDITOR.config.fillEmptyBlocks = 1 );\r
455                 }\r
456         });\r
457 \r
458         CKEDITOR.htmlDataProcessor = function( editor )\r
459         {\r
460                 this.editor = editor;\r
461 \r
462                 this.writer = new CKEDITOR.htmlWriter();\r
463                 this.dataFilter = new CKEDITOR.htmlParser.filter();\r
464                 this.htmlFilter = new CKEDITOR.htmlParser.filter();\r
465         };\r
466 \r
467         CKEDITOR.htmlDataProcessor.prototype =\r
468         {\r
469                 toHtml : function( data, fixForBody )\r
470                 {\r
471                         // The source data is already HTML, but we need to clean\r
472                         // it up and apply the filter.\r
473 \r
474                         data = protectSource( data, this.editor.config.protectedSource );\r
475 \r
476                         // Before anything, we must protect the URL attributes as the\r
477                         // browser may changing them when setting the innerHTML later in\r
478                         // the code.\r
479                         data = protectAttributes( data );\r
480 \r
481                         // Protect elements than can't be set inside a DIV. E.g. IE removes\r
482                         // style tags from innerHTML. (#3710)\r
483                         data = protectElements( data );\r
484 \r
485                         // Certain elements has problem to go through DOM operation, protect\r
486                         // them by prefixing 'cke' namespace. (#3591)\r
487                         data = protectElementsNames( data );\r
488 \r
489                         // All none-IE browsers ignore self-closed custom elements,\r
490                         // protecting them into open-close. (#3591)\r
491                         data = protectSelfClosingElements( data );\r
492 \r
493                         // Compensate one leading line break after <pre> open as browsers\r
494                         // eat it up. (#5789)\r
495                         data = protectPreFormatted( data );\r
496 \r
497                         // Call the browser to help us fixing a possibly invalid HTML\r
498                         // structure.\r
499                         var div = new CKEDITOR.dom.element( 'div' );\r
500                         // Add fake character to workaround IE comments bug. (#3801)\r
501                         div.setHtml( 'a' + data );\r
502                         data = div.getHtml().substr( 1 );\r
503 \r
504                         // Unprotect "some" of the protected elements at this point.\r
505                         data = unprotectElementNames( data );\r
506 \r
507                         data = unprotectElements( data );\r
508 \r
509                         // Restore the comments that have been protected, in this way they\r
510                         // can be properly filtered.\r
511                         data = unprotectRealComments( data );\r
512 \r
513                         // Now use our parser to make further fixes to the structure, as\r
514                         // well as apply the filter.\r
515                         var fragment = CKEDITOR.htmlParser.fragment.fromHtml( data, fixForBody ),\r
516                                 writer = new CKEDITOR.htmlParser.basicWriter();\r
517 \r
518                         fragment.writeHtml( writer, this.dataFilter );\r
519                         data = writer.getHtml( true );\r
520 \r
521                         // Protect the real comments again.\r
522                         data = protectRealComments( data );\r
523 \r
524                         return data;\r
525                 },\r
526 \r
527                 toDataFormat : function( html, fixForBody )\r
528                 {\r
529                         var writer = this.writer,\r
530                                 fragment = CKEDITOR.htmlParser.fragment.fromHtml( html, fixForBody );\r
531 \r
532                         writer.reset();\r
533 \r
534                         fragment.writeHtml( writer, this.htmlFilter );\r
535 \r
536                         return writer.getHtml( true );\r
537                 }\r
538         };\r
539 })();\r
540 \r
541 /**\r
542  * Whether to force using "&" instead of "&amp;amp;" in elements attributes\r
543  * values, it's not recommended to change this setting for compliance with the\r
544  * W3C XHTML 1.0 standards (<a href="http://www.w3.org/TR/xhtml1/#C_12">C.12, XHTML 1.0</a>).\r
545  * @name CKEDITOR.config.forceSimpleAmpersand\r
546  * @name CKEDITOR.config.forceSimpleAmpersand\r
547  * @type Boolean\r
548  * @default false\r
549  * @example\r
550  * config.forceSimpleAmpersand = false;\r
551  */\r
552 \r
553 /**\r
554  * Whether a filler text (non-breaking space entity - &nbsp;) will be inserted into empty block elements in HTML output,\r
555  * this is used to render block elements properly with line-height; When a function is instead specified,\r
556  * it'll be passed a {@link CKEDITOR.htmlParser.element} to decide whether adding the filler text\r
557  * by expecting a boolean return value.\r
558  * @name CKEDITOR.config.fillEmptyBlocks\r
559  * @since 3.5\r
560  * @type Boolean\r
561  * @default true\r
562  * @example\r
563  * config.fillEmptyBlocks = false;      // Prevent filler nodes in all empty blocks.\r
564  *\r
565  * // Prevent filler node only in float cleaners.\r
566  * config.fillEmptyBlocks = function( element )\r
567  * {\r
568  *      if ( element.attributes[ 'class' ].indexOf ( 'clear-both' ) != -1 )\r
569  *              return false;\r
570  * }\r
571  */\r