[Summary view] [Print] [Text view]

   1  /*

   2  Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.

   3  For licensing, see LICENSE.html or http://ckeditor.com/license

   4  */
   5  
   6  CKEDITOR.plugins.add( 'htmlwriter' );
   7  
   8  /**

   9   * Class used to write HTML data.

  10   * @constructor

  11   * @example

  12   * var writer = new CKEDITOR.htmlWriter();

  13   * writer.openTag( 'p' );

  14   * writer.attribute( 'class', 'MyClass' );

  15   * writer.openTagClose( 'p' );

  16   * writer.text( 'Hello' );

  17   * writer.closeTag( 'p' );

  18   * alert( writer.getHtml() );  "<p class="MyClass">Hello</p>"

  19   */
  20  CKEDITOR.htmlWriter = CKEDITOR.tools.createClass(
  21  {
  22      base : CKEDITOR.htmlParser.basicWriter,
  23  
  24      $ : function()
  25      {
  26          // Call the base contructor.

  27          this.base();
  28  
  29          /**

  30           * The characters to be used for each identation step.

  31           * @type String

  32           * @default "\t" (tab)

  33           * @example

  34           * // Use two spaces for indentation.

  35           * editorInstance.dataProcessor.writer.indentationChars = '  ';

  36           */
  37          this.indentationChars = '\t';
  38  
  39          /**

  40           * The characters to be used to close "self-closing" elements, like "br" or

  41           * "img".

  42           * @type String

  43           * @default " />"

  44           * @example

  45           * // Use HTML4 notation for self-closing elements.

  46           * editorInstance.dataProcessor.writer.selfClosingEnd = '>';

  47           */
  48          this.selfClosingEnd = ' />';
  49  
  50          /**

  51           * The characters to be used for line breaks.

  52           * @type String

  53           * @default "\n" (LF)

  54           * @example

  55           * // Use CRLF for line breaks.

  56           * editorInstance.dataProcessor.writer.lineBreakChars = '\r\n';

  57           */
  58          this.lineBreakChars = '\n';
  59  
  60          this.forceSimpleAmpersand = false;
  61  
  62          this.sortAttributes = true;
  63  
  64          this._.indent = false;
  65          this._.indentation = '';
  66          this._.rules = {};
  67  
  68          var dtd = CKEDITOR.dtd;
  69  
  70          for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
  71          {
  72              this.setRules( e,
  73                  {
  74                      indent : true,
  75                      breakBeforeOpen : true,
  76                      breakAfterOpen : true,
  77                      breakBeforeClose : !dtd[ e ][ '#' ],
  78                      breakAfterClose : true
  79                  });
  80          }
  81  
  82          this.setRules( 'br',
  83              {
  84                  breakAfterOpen : true
  85              });
  86  
  87          this.setRules( 'title',
  88              {
  89                  indent : false,
  90                  breakAfterOpen : false
  91              });
  92  
  93          this.setRules( 'style',
  94              {
  95                  indent : false,
  96                  breakBeforeClose : true
  97              });
  98  
  99          // Disable indentation on <pre>.

 100          this.setRules( 'pre',
 101              {
 102                indent: false
 103              });
 104      },
 105  
 106      proto :
 107      {
 108          /**

 109           * Writes the tag opening part for a opener tag.

 110           * @param {String} tagName The element name for this tag.

 111           * @param {Object} attributes The attributes defined for this tag. The

 112           *        attributes could be used to inspect the tag.

 113           * @example

 114           * // Writes "&lt;p".

 115           * writer.openTag( 'p', { class : 'MyClass', id : 'MyId' } );

 116           */
 117          openTag : function( tagName, attributes )
 118          {
 119              var rules = this._.rules[ tagName ];
 120  
 121              if ( this._.indent )
 122                  this.indentation();
 123              // Do not break if indenting.

 124              else if ( rules && rules.breakBeforeOpen )
 125              {
 126                  this.lineBreak();
 127                  this.indentation();
 128              }
 129  
 130              this._.output.push( '<', tagName );
 131          },
 132  
 133          /**

 134           * Writes the tag closing part for a opener tag.

 135           * @param {String} tagName The element name for this tag.

 136           * @param {Boolean} isSelfClose Indicates that this is a self-closing tag,

 137           *        like "br" or "img".

 138           * @example

 139           * // Writes "&gt;".

 140           * writer.openTagClose( 'p', false );

 141           * @example

 142           * // Writes " /&gt;".

 143           * writer.openTagClose( 'br', true );

 144           */
 145          openTagClose : function( tagName, isSelfClose )
 146          {
 147              var rules = this._.rules[ tagName ];
 148  
 149              if ( isSelfClose )
 150                  this._.output.push( this.selfClosingEnd );
 151              else
 152              {
 153                  this._.output.push( '>' );
 154  
 155                  if ( rules && rules.indent )
 156                      this._.indentation += this.indentationChars;
 157              }
 158  
 159              if ( rules && rules.breakAfterOpen )
 160                  this.lineBreak();
 161          },
 162  
 163          /**

 164           * Writes an attribute. This function should be called after opening the

 165           * tag with {@link #openTagClose}.

 166           * @param {String} attName The attribute name.

 167           * @param {String} attValue The attribute value.

 168           * @example

 169           * // Writes ' class="MyClass"'.

 170           * writer.attribute( 'class', 'MyClass' );

 171           */
 172          attribute : function( attName, attValue )
 173          {
 174  
 175              if ( typeof attValue == 'string' )
 176              {
 177                  this.forceSimpleAmpersand && ( attValue = attValue.replace( /&amp;/g, '&' ) );
 178                  // Browsers don't always escape special character in attribute values. (#4683, #4719).

 179                  attValue = CKEDITOR.tools.htmlEncodeAttr( attValue );
 180              }
 181  
 182              this._.output.push( ' ', attName, '="', attValue, '"' );
 183          },
 184  
 185          /**

 186           * Writes a closer tag.

 187           * @param {String} tagName The element name for this tag.

 188           * @example

 189           * // Writes "&lt;/p&gt;".

 190           * writer.closeTag( 'p' );

 191           */
 192          closeTag : function( tagName )
 193          {
 194              var rules = this._.rules[ tagName ];
 195  
 196              if ( rules && rules.indent )
 197                  this._.indentation = this._.indentation.substr( this.indentationChars.length );
 198  
 199              if ( this._.indent )
 200                  this.indentation();
 201              // Do not break if indenting.

 202              else if ( rules && rules.breakBeforeClose )
 203              {
 204                  this.lineBreak();
 205                  this.indentation();
 206              }
 207  
 208              this._.output.push( '</', tagName, '>' );
 209  
 210              if ( rules && rules.breakAfterClose )
 211                  this.lineBreak();
 212          },
 213  
 214          /**

 215           * Writes text.

 216           * @param {String} text The text value

 217           * @example

 218           * // Writes "Hello Word".

 219           * writer.text( 'Hello Word' );

 220           */
 221          text : function( text )
 222          {
 223              if ( this._.indent )
 224              {
 225                  this.indentation();
 226                  text = CKEDITOR.tools.ltrim( text );
 227              }
 228  
 229              this._.output.push( text );
 230          },
 231  
 232          /**

 233           * Writes a comment.

 234           * @param {String} comment The comment text.

 235           * @example

 236           * // Writes "&lt;!-- My comment --&gt;".

 237           * writer.comment( ' My comment ' );

 238           */
 239          comment : function( comment )
 240          {
 241              if ( this._.indent )
 242                  this.indentation();
 243  
 244              this._.output.push( '<!--', comment, '-->' );
 245          },
 246  
 247          /**

 248           * Writes a line break. It uses the {@link #lineBreakChars} property for it.

 249           * @example

 250           * // Writes "\n" (e.g.).

 251           * writer.lineBreak();

 252           */
 253          lineBreak : function()
 254          {
 255              if ( this._.output.length > 0 )
 256                  this._.output.push( this.lineBreakChars );
 257              this._.indent = true;
 258          },
 259  
 260          /**

 261           * Writes the current indentation chars. It uses the

 262           * {@link #indentationChars} property, repeating it for the current

 263           * indentation steps.

 264           * @example

 265           * // Writes "\t" (e.g.).

 266           * writer.indentation();

 267           */
 268          indentation : function()
 269          {
 270              this._.output.push( this._.indentation );
 271              this._.indent = false;
 272          },
 273  
 274          /**

 275           * Sets formatting rules for a give element. The possible rules are:

 276           * <ul>

 277           *    <li><b>indent</b>: indent the element contents.</li>

 278           *    <li><b>breakBeforeOpen</b>: break line before the opener tag for this element.</li>

 279           *    <li><b>breakAfterOpen</b>: break line after the opener tag for this element.</li>

 280           *    <li><b>breakBeforeClose</b>: break line before the closer tag for this element.</li>

 281           *    <li><b>breakAfterClose</b>: break line after the closer tag for this element.</li>

 282           * </ul>

 283           *

 284           * All rules default to "false". Each call to the function overrides

 285           * already present rules, leaving the undefined untouched.

 286           *

 287           * By default, all elements available in the {@link CKEDITOR.dtd.$block),

 288           * {@link CKEDITOR.dtd.$listItem} and {@link CKEDITOR.dtd.$tableContent}

 289           * lists have all the above rules set to "true". Additionaly, the "br"

 290           * element has the "breakAfterOpen" set to "true".

 291           * @param {String} tagName The element name to which set the rules.

 292           * @param {Object} rules An object containing the element rules.

 293           * @example

 294           * // Break line before and after "img" tags.

 295           * writer.setRules( 'img',

 296           *     {

 297           *         breakBeforeOpen : true

 298           *         breakAfterOpen : true

 299           *     });

 300           * @example

 301           * // Reset the rules for the "h1" tag.

 302           * writer.setRules( 'h1', {} );

 303           */
 304          setRules : function( tagName, rules )
 305          {
 306              var currentRules = this._.rules[ tagName ];
 307  
 308              if ( currentRules )
 309                  CKEDITOR.tools.extend( currentRules, rules, true );
 310              else
 311                  this._.rules[ tagName ] = rules;
 312          }
 313      }
 314  });