[Summary view] [Print] [Text view]

   1  /*
   2  Copyright (c) 2003-2012, 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.png',
  43                      command : 'drupalbreak'
  44                  });
  45  
  46                          editor.ui.addButton( 'DrupalPageBreak',
  47                                  {
  48                                          label : Drupal.t( 'Insert Page Break' ),
  49                                          icon : this.path + 'images/drupalpagebreak.png',
  50                                          command : 'drupalpagebreak'
  51                                  });
  52          }
  53  
  54          // Register the commands.
  55  
  56          editor.addCommand( 'drupalbreak',
  57          {
  58              exec : function()
  59              {
  60                  // There should be only one <!--break--> in document. So, look
  61                  // for an image with class "cke_drupal_break" (the fake element).
  62                  var images = editor.document.getElementsByTag( 'img' );
  63                  for ( var i = 0, len = images.count() ; i < len ; i++ )
  64                  {
  65                      var img = images.getItem( i );
  66                      if ( img.hasClass( 'cke_drupal_break' ) )
  67                      {
  68                          if ( confirm( Drupal.t( 'The document already contains a teaser break. Do you want to proceed by removing it first?' ) ) )
  69                          {
  70                              img.remove();
  71                              break;
  72                          }
  73                          else
  74                              return;
  75                      }
  76                  }
  77  
  78                  insertComment( 'break' );
  79              }
  80          } );
  81  
  82          editor.addCommand( 'drupalpagebreak',
  83          {
  84              exec : function()
  85              {
  86                  insertComment( 'pagebreak' );
  87              }
  88          } );
  89  
  90          // This function effectively inserts the comment into the editor.
  91  		function insertComment( text )
  92          {
  93              // Create the fake element that will be inserted into the document.
  94              // The trick is declaring it as an <hr>, so it will behave like a
  95              // block element (and in effect it behaves much like an <hr>).
  96                if ( !CKEDITOR.dom.comment.prototype.getAttribute ) {
  97                  CKEDITOR.dom.comment.prototype.getAttribute = function() { return ''; };
  98                  CKEDITOR.dom.comment.prototype.attributes = { align : '' };
  99                }
 100              var fakeElement = editor.createFakeElement( new CKEDITOR.dom.comment( text ), 'cke_drupal_' + text, 'hr' );
 101  
 102              // This is the trick part. We can't use editor.insertElement()
 103              // because we need to put the comment directly at <body> level.
 104              // We need to do range manipulation for that.
 105  
 106              // Get a DOM range from the current selection.
 107              var range = editor.getSelection().getRanges()[0],
 108                  elementsPath = new CKEDITOR.dom.elementPath( range.getCommonAncestor( true ) ),
 109                  element = ( elementsPath.block && elementsPath.block.getParent() ) || elementsPath.blockLimit,
 110                  hasMoved;
 111  
 112              // If we're not in <body> go moving the position to after the
 113              // elements until reaching it. This may happen when inside tables,
 114              // lists, blockquotes, etc.
 115              while ( element && element.getName() != 'body' )
 116              {
 117                  range.moveToPosition( element, CKEDITOR.POSITION_AFTER_END );
 118                  hasMoved = 1;
 119                  element = element.getParent();
 120              }
 121  
 122              // Split the current block.
 123              if ( !hasMoved )
 124                  range.splitBlock( 'p' );
 125  
 126              // Insert the fake element into the document.
 127              range.insertNode( fakeElement );
 128              
 129              // Now, we move the selection to the best possible place following
 130              // our fake element.
 131              var next = fakeElement;
 132              while ( ( next = next.getNext() ) && !range.moveToElementEditStart( next ) )
 133              {}
 134  
 135              range.select();
 136          }
 137      },
 138  
 139      afterInit : function( editor )
 140      {
 141          // Adds the comment processing rules to the data filter, so comments
 142          // are replaced by fake elements.
 143          editor.dataProcessor.dataFilter.addRules(
 144              {
 145                  comment : function( value )
 146                  {
 147                        if ( !CKEDITOR.htmlParser.comment.prototype.getAttribute ) {
 148                             CKEDITOR.htmlParser.comment.prototype.getAttribute = function() { return ''; };
 149                             CKEDITOR.htmlParser.comment.prototype.attributes = { align : '' };
 150                        }
 151                  
 152                      if ( value == 'break' || value == 'pagebreak' )
 153                          return editor.createFakeParserElement( new CKEDITOR.htmlParser.comment( value ), 'cke_drupal_' + value, 'hr' );
 154  
 155                      return value;
 156                  }
 157              });
 158      }
 159  });