2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 CKEDITOR.plugins.add( 'htmlwriter' );
\r
9 * Class used to write HTML data.
\r
12 * var writer = new CKEDITOR.htmlWriter();
\r
13 * writer.openTag( 'p' );
\r
14 * writer.attribute( 'class', 'MyClass' );
\r
15 * writer.openTagClose( 'p' );
\r
16 * writer.text( 'Hello' );
\r
17 * writer.closeTag( 'p' );
\r
18 * alert( writer.getHtml() ); "<p class="MyClass">Hello</p>"
\r
20 CKEDITOR.htmlWriter = CKEDITOR.tools.createClass(
\r
22 base : CKEDITOR.htmlParser.basicWriter,
\r
26 // Call the base contructor.
\r
30 * The characters to be used for each identation step.
\r
32 * @default "\t" (tab)
\r
34 * // Use two spaces for indentation.
\r
35 * editorInstance.dataProcessor.writer.indentationChars = ' ';
\r
37 this.indentationChars = '\t';
\r
40 * The characters to be used to close "self-closing" elements, like "br" or
\r
45 * // Use HTML4 notation for self-closing elements.
\r
46 * editorInstance.dataProcessor.writer.selfClosingEnd = '>';
\r
48 this.selfClosingEnd = ' />';
\r
51 * The characters to be used for line breaks.
\r
53 * @default "\n" (LF)
\r
55 * // Use CRLF for line breaks.
\r
56 * editorInstance.dataProcessor.writer.lineBreakChars = '\r\n';
\r
58 this.lineBreakChars = '\n';
\r
60 this.forceSimpleAmpersand = false;
\r
62 this.sortAttributes = true;
\r
64 this._.indent = false;
\r
65 this._.indentation = '';
\r
68 var dtd = CKEDITOR.dtd;
\r
70 for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
\r
75 breakBeforeOpen : true,
\r
76 breakAfterOpen : true,
\r
77 breakBeforeClose : !dtd[ e ][ '#' ],
\r
78 breakAfterClose : true
\r
82 this.setRules( 'br',
\r
84 breakAfterOpen : true
\r
87 this.setRules( 'title',
\r
90 breakAfterOpen : false
\r
93 this.setRules( 'style',
\r
96 breakBeforeClose : true
\r
99 // Disable indentation on <pre>.
\r
100 this.setRules( 'pre',
\r
109 * Writes the tag opening part for a opener tag.
\r
110 * @param {String} tagName The element name for this tag.
\r
111 * @param {Object} attributes The attributes defined for this tag. The
\r
112 * attributes could be used to inspect the tag.
\r
114 * // Writes "<p".
\r
115 * writer.openTag( 'p', { class : 'MyClass', id : 'MyId' } );
\r
117 openTag : function( tagName, attributes )
\r
119 var rules = this._.rules[ tagName ];
\r
121 if ( this._.indent )
\r
122 this.indentation();
\r
123 // Do not break if indenting.
\r
124 else if ( rules && rules.breakBeforeOpen )
\r
127 this.indentation();
\r
130 this._.output.push( '<', tagName );
\r
134 * Writes the tag closing part for a opener tag.
\r
135 * @param {String} tagName The element name for this tag.
\r
136 * @param {Boolean} isSelfClose Indicates that this is a self-closing tag,
\r
137 * like "br" or "img".
\r
139 * // Writes ">".
\r
140 * writer.openTagClose( 'p', false );
\r
142 * // Writes " />".
\r
143 * writer.openTagClose( 'br', true );
\r
145 openTagClose : function( tagName, isSelfClose )
\r
147 var rules = this._.rules[ tagName ];
\r
150 this._.output.push( this.selfClosingEnd );
\r
153 this._.output.push( '>' );
\r
155 if ( rules && rules.indent )
\r
156 this._.indentation += this.indentationChars;
\r
159 if ( rules && rules.breakAfterOpen )
\r
164 * Writes an attribute. This function should be called after opening the
\r
165 * tag with {@link #openTagClose}.
\r
166 * @param {String} attName The attribute name.
\r
167 * @param {String} attValue The attribute value.
\r
169 * // Writes ' class="MyClass"'.
\r
170 * writer.attribute( 'class', 'MyClass' );
\r
172 attribute : function( attName, attValue )
\r
175 if ( typeof attValue == 'string' )
\r
177 this.forceSimpleAmpersand && ( attValue = attValue.replace( /&/g, '&' ) );
\r
178 // Browsers don't always escape special character in attribute values. (#4683, #4719).
\r
179 attValue = CKEDITOR.tools.htmlEncodeAttr( attValue );
\r
182 this._.output.push( ' ', attName, '="', attValue, '"' );
\r
186 * Writes a closer tag.
\r
187 * @param {String} tagName The element name for this tag.
\r
189 * // Writes "</p>".
\r
190 * writer.closeTag( 'p' );
\r
192 closeTag : function( tagName )
\r
194 var rules = this._.rules[ tagName ];
\r
196 if ( rules && rules.indent )
\r
197 this._.indentation = this._.indentation.substr( this.indentationChars.length );
\r
199 if ( this._.indent )
\r
200 this.indentation();
\r
201 // Do not break if indenting.
\r
202 else if ( rules && rules.breakBeforeClose )
\r
205 this.indentation();
\r
208 this._.output.push( '</', tagName, '>' );
\r
210 if ( rules && rules.breakAfterClose )
\r
216 * @param {String} text The text value
\r
218 * // Writes "Hello Word".
\r
219 * writer.text( 'Hello Word' );
\r
221 text : function( text )
\r
223 if ( this._.indent )
\r
225 this.indentation();
\r
226 text = CKEDITOR.tools.ltrim( text );
\r
229 this._.output.push( text );
\r
233 * Writes a comment.
\r
234 * @param {String} comment The comment text.
\r
236 * // Writes "<!-- My comment -->".
\r
237 * writer.comment( ' My comment ' );
\r
239 comment : function( comment )
\r
241 if ( this._.indent )
\r
242 this.indentation();
\r
244 this._.output.push( '<!--', comment, '-->' );
\r
248 * Writes a line break. It uses the {@link #lineBreakChars} property for it.
\r
250 * // Writes "\n" (e.g.).
\r
251 * writer.lineBreak();
\r
253 lineBreak : function()
\r
255 if ( this._.output.length > 0 )
\r
256 this._.output.push( this.lineBreakChars );
\r
257 this._.indent = true;
\r
261 * Writes the current indentation chars. It uses the
\r
262 * {@link #indentationChars} property, repeating it for the current
\r
263 * indentation steps.
\r
265 * // Writes "\t" (e.g.).
\r
266 * writer.indentation();
\r
268 indentation : function()
\r
270 this._.output.push( this._.indentation );
\r
271 this._.indent = false;
\r
275 * Sets formatting rules for a give element. The possible rules are:
\r
277 * <li><b>indent</b>: indent the element contents.</li>
\r
278 * <li><b>breakBeforeOpen</b>: break line before the opener tag for this element.</li>
\r
279 * <li><b>breakAfterOpen</b>: break line after the opener tag for this element.</li>
\r
280 * <li><b>breakBeforeClose</b>: break line before the closer tag for this element.</li>
\r
281 * <li><b>breakAfterClose</b>: break line after the closer tag for this element.</li>
\r
284 * All rules default to "false". Each call to the function overrides
\r
285 * already present rules, leaving the undefined untouched.
\r
287 * By default, all elements available in the {@link CKEDITOR.dtd.$block),
\r
288 * {@link CKEDITOR.dtd.$listItem} and {@link CKEDITOR.dtd.$tableContent}
\r
289 * lists have all the above rules set to "true". Additionaly, the "br"
\r
290 * element has the "breakAfterOpen" set to "true".
\r
291 * @param {String} tagName The element name to which set the rules.
\r
292 * @param {Object} rules An object containing the element rules.
\r
294 * // Break line before and after "img" tags.
\r
295 * writer.setRules( 'img',
\r
297 * breakBeforeOpen : true
\r
298 * breakAfterOpen : true
\r
301 * // Reset the rules for the "h1" tag.
\r
302 * writer.setRules( 'h1', {} );
\r
304 setRules : function( tagName, rules )
\r
306 var currentRules = this._.rules[ tagName ];
\r
308 if ( currentRules )
\r
309 CKEDITOR.tools.extend( currentRules, rules, true );
\r
311 this._.rules[ tagName ] = rules;
\r