[Summary view] [Print] [Text view]

   1  /*
   2  Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
   3  For licensing, see LICENSE.html or http://ckeditor.com/license
   4  */
   5  
   6  /**
   7   * @file Plugin for inserting Drupal teaser and page breaks.
   8   */
   9  CKEDITOR.plugins.add( 'drupalbreaks',
  10  {
  11      requires  : [ 'fakeobjects', 'htmldataprocessor' ],
  12  
  13      init : function( editor )
  14      {
  15          // Add the styles that renders our fake objects.
  16          editor.addCss(
  17              'img.cke_drupal_pagebreak,img.cke_drupal_break' +
  18              '{' +
  19                  'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/pagebreak.gif' ) + ');' +
  20                  'background-position: center center;' +
  21                  'background-repeat: no-repeat;' +
  22                  'clear: both;' +
  23                  'display: block;' +
  24                  'float: none;' +
  25                  'width: 100%;' +
  26                  'border-top: #999999 1px dotted;' +
  27                  'border-bottom: #999999 1px dotted;' +
  28                  'height: 5px;' +
  29              '}' +
  30              'img.cke_drupal_break' +
  31              '{' +
  32                  'border-top: #FF0000 1px dotted;' +
  33                  'border-bottom: #FF0000 1px dotted;' +
  34              '}'
  35          );
  36  
  37          // Register the toolbar buttons.
  38          if ( Drupal.ckeditorTeaserInfo(editor.name) || Drupal.settings.ckeditor.teaser == editor.name ) {
  39              editor.ui.addButton( 'DrupalBreak',
  40                  {
  41                      label : Drupal.t('Insert Teaser Break'),
  42                      icon : this.path + 'images/drupalbreak.gif',
  43                      command : 'drupalbreak'
  44                  });
  45  
  46              if ( Drupal.settings.ckeditor.pagebreak ) {
  47                  editor.ui.addButton( 'DrupalPageBreak',
  48                          {
  49                              label : Drupal.t( 'Insert Page Break' ),
  50                              icon : this.path + 'images/drupalpagebreak.gif',
  51                              command : 'drupalpagebreak'
  52                          });
  53              }
  54          }
  55  
  56          // Register the commands.
  57  
  58          editor.addCommand( 'drupalbreak',
  59          {
  60              exec : function()
  61              {
  62                  // There should be only one <!--break--> in document. So, look
  63                  // for an image with class "cke_drupal_break" (the fake element).
  64                  var images = editor.document.getElementsByTag( 'img' );
  65                  for ( var i = 0, len = images.count() ; i < len ; i++ )
  66                  {
  67                      var img = images.getItem( i );
  68                      if ( img.hasClass( 'cke_drupal_break' ) )
  69                      {
  70                          if ( confirm( Drupal.t( 'The document already contains a teaser break. Do you want to proceed by removing it first?' ) ) )
  71                          {
  72                              img.remove();
  73                              break;
  74                          }
  75                          else
  76                              return;
  77                      }
  78                  }
  79  
  80                  insertComment( 'break' );
  81              }
  82          } );
  83  
  84          editor.addCommand( 'drupalpagebreak',
  85          {
  86              exec : function()
  87              {
  88                  insertComment( 'pagebreak' );
  89              }
  90          } );
  91  
  92          // This function effectively inserts the comment into the editor.
  93  		function insertComment( text )
  94          {
  95              // Create the fake element that will be inserted into the document.
  96              // The trick is declaring it as an <hr>, so it will behave like a
  97              // block element (and in effect it behaves much like an <hr>).
  98                if ( !CKEDITOR.dom.comment.prototype.getAttribute ) {
  99                  CKEDITOR.dom.comment.prototype.getAttribute = function() { return ''; };
 100                  CKEDITOR.dom.comment.prototype.attributes = { align : '' };
 101                }
 102              var fakeElement = editor.createFakeElement( new CKEDITOR.dom.comment( text ), 'cke_drupal_' + text, 'hr' );
 103  
 104              // This is the trick part. We can't use editor.insertElement()
 105              // because we need to put the comment directly at <body> level.
 106              // We need to do range manipulation for that.
 107  
 108              // Get a DOM range from the current selection.
 109              var range = editor.getSelection().getRanges()[0],
 110                  elementsPath = new CKEDITOR.dom.elementPath( range.getCommonAncestor( true ) ),
 111                  element = ( elementsPath.block && elementsPath.block.getParent() ) || elementsPath.blockLimit,
 112                  hasMoved;
 113  
 114              // If we're not in <body> go moving the position to after the
 115              // elements until reaching it. This may happen when inside tables,
 116              // lists, blockquotes, etc.
 117              while ( element && element.getName() != 'body' )
 118              {
 119                  range.moveToPosition( element, CKEDITOR.POSITION_AFTER_END );
 120                  hasMoved = 1;
 121                  element = element.getParent();
 122              }
 123  
 124              // Split the current block.
 125              if ( !hasMoved )
 126                  range.splitBlock( 'p' );
 127  
 128              // Insert the fake element into the document.
 129              range.insertNode( fakeElement );
 130              
 131              // Now, we move the selection to the best possible place following
 132              // our fake element.
 133              var next = fakeElement;
 134              while ( ( next = next.getNext() ) && !range.moveToElementEditStart( next ) )
 135              {}
 136  
 137              range.select();
 138          }
 139      },
 140  
 141      afterInit : function( editor )
 142      {
 143          // Adds the comment processing rules to the data filter, so comments
 144          // are replaced by fake elements.
 145          editor.dataProcessor.dataFilter.addRules(
 146              {
 147                  comment : function( value )
 148                  {
 149                        if ( !CKEDITOR.htmlParser.comment.prototype.getAttribute ) {
 150                             CKEDITOR.htmlParser.comment.prototype.getAttribute = function() { return ''; };
 151                             CKEDITOR.htmlParser.comment.prototype.attributes = { align : '' };
 152                        }
 153                  
 154                      if ( value == 'break' || value == 'pagebreak' )
 155                          return editor.createFakeParserElement( new CKEDITOR.htmlParser.comment( value ), 'cke_drupal_' + value, 'hr' );
 156  
 157                      return value;
 158                  }
 159              });
 160      }
 161  });