sources/plugins/pagebreak/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 /**
   7  * @fileOverview Horizontal Page Break
   8  */
   9
  10 'use strict';
  11
  12 ( function() {
  13         // Register a plugin named "pagebreak".
  14         CKEDITOR.plugins.add( 'pagebreak', {
  15                 requires: 'fakeobjects',
  16                 // jscs:disable maximumLineLength
  17                 lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
  18                 // jscs:enable maximumLineLength
  19                 icons: 'pagebreak,pagebreak-rtl', // %REMOVE_LINE_CORE%
  20                 hidpi: true, // %REMOVE_LINE_CORE%
  21                 onLoad: function() {
  22                         var cssStyles = (
  23                                         'background:url(' + CKEDITOR.getUrl( this.path + 'images/pagebreak.gif' ) + ') no-repeat center center;' +
  24                                         'clear:both;' +
  25                                         'width:100%;' +
  26                                         'border-top:#999 1px dotted;' +
  27                                         'border-bottom:#999 1px dotted;' +
  28                                         'padding:0;' +
  29                                         'height:7px;' +
  30                                         'cursor:default;'
  31                                 ).replace( /;/g, ' !important;' ); // Increase specificity to override other styles, e.g. block outline.
  32
  33                         // Add the style that renders our placeholder.
  34                         CKEDITOR.addCss( 'div.cke_pagebreak{' + cssStyles + '}' );
  35                 },
  36
  37                 init: function( editor ) {
  38                         if ( editor.blockless )
  39                                 return;
  40
  41                         // Register the command.
  42                         editor.addCommand( 'pagebreak', CKEDITOR.plugins.pagebreakCmd );
  43
  44                         // Register the toolbar button.
  45                         editor.ui.addButton && editor.ui.addButton( 'PageBreak', {
  46                                 label: editor.lang.pagebreak.toolbar,
  47                                 command: 'pagebreak',
  48                                 toolbar: 'insert,70'
  49                         } );
  50
  51                         // Webkit based browsers needs help to select the page-break.
  52                         CKEDITOR.env.webkit && editor.on( 'contentDom', function() {
  53                                 editor.document.on( 'click', function( evt ) {
  54                                         var target = evt.data.getTarget();
  55                                         if ( target.is( 'div' ) && target.hasClass( 'cke_pagebreak' ) )
  56                                                 editor.getSelection().selectElement( target );
  57                                 } );
  58                         } );
  59                 },
  60
  61                 afterInit: function( editor ) {
  62                         // Register a filter to displaying placeholders after mode change.
  63                         var dataProcessor = editor.dataProcessor,
  64                                 dataFilter = dataProcessor && dataProcessor.dataFilter,
  65                                 htmlFilter = dataProcessor && dataProcessor.htmlFilter,
  66                                 styleRegex = /page-break-after\s*:\s*always/i,
  67                                 childStyleRegex = /display\s*:\s*none/i;
  68
  69                         function upcastPageBreak( element ) {
  70                                 CKEDITOR.tools.extend( element.attributes, attributesSet( editor.lang.pagebreak.alt ), true );
  71
  72                                 element.children.length = 0;
  73                         }
  74
  75                         if ( htmlFilter ) {
  76                                 htmlFilter.addRules( {
  77                                         attributes: {
  78                                                 'class': function( value, element ) {
  79                                                         var className = value.replace( 'cke_pagebreak', '' );
  80                                                         if ( className != value ) {
  81                                                                 var span = CKEDITOR.htmlParser.fragment.fromHtml( '<span style="display: none;">&nbsp;</span>' ).children[ 0 ];
  82                                                                 element.children.length = 0;
  83                                                                 element.add( span );
  84                                                                 var attrs = element.attributes;
  85                                                                 delete attrs[ 'aria-label' ];
  86                                                                 delete attrs.contenteditable;
  87                                                                 delete attrs.title;
  88                                                         }
  89                                                         return className;
  90                                                 }
  91                                         }
  92                                 }, { applyToAll: true, priority: 5 } );
  93                         }
  94
  95                         if ( dataFilter ) {
  96                                 dataFilter.addRules( {
  97                                         elements: {
  98                                                 div: function( element ) {
  99                                                         // The "internal form" of a pagebreak is pasted from clipboard.
 100                                                         // ACF may have distorted the HTML because "internal form" is
 101                                                         // different than "data form". Make sure that element remains valid
 102                                                         // by re-upcasting it (#11133).
 103                                                         if ( element.attributes[ 'data-cke-pagebreak' ] )
 104                                                                 upcastPageBreak( element );
 105
 106                                                         // Check for "data form" of the pagebreak. If both element and
 107                                                         // descendants match, convert them to internal form.
 108                                                         else if ( styleRegex.test( element.attributes.style ) ) {
 109                                                                 var child = element.children[ 0 ];
 110
 111                                                                 if ( child && child.name == 'span' && childStyleRegex.test( child.attributes.style ) )
 112                                                                         upcastPageBreak( element );
 113                                                         }
 114                                                 }
 115                                         }
 116                                 } );
 117                         }
 118                 }
 119         } );
 120
 121         // TODO Much probably there's no need to expose this object as public object.
 122         CKEDITOR.plugins.pagebreakCmd = {
 123                 exec: function( editor ) {
 124                         // Create read-only element that represents a print break.
 125                         var pagebreak = editor.document.createElement( 'div', {
 126                                 attributes: attributesSet( editor.lang.pagebreak.alt )
 127                         } );
 128
 129                         editor.insertElement( pagebreak );
 130                 },
 131                 context: 'div',
 132                 allowedContent: {
 133                         div: {
 134                                 styles: '!page-break-after'
 135                         },
 136                         span: {
 137                                 match: function( element ) {
 138                                         var parent = element.parent;
 139                                         return parent && parent.name == 'div' && parent.styles && parent.styles[ 'page-break-after' ];
 140                                 },
 141                                 styles: 'display'
 142                         }
 143                 },
 144                 requiredContent: 'div{page-break-after}'
 145         };
 146
 147         // Returns an object representing all the attributes
 148         // of the "internal form" of the pagebreak element.
 149         function attributesSet( label ) {
 150                 return {
 151                         'aria-label': label,
 152                         'class': 'cke_pagebreak',
 153                         contenteditable: 'false',
 154                         'data-cke-display-name': 'pagebreak',
 155                         'data-cke-pagebreak': 1,
 156                         style: 'page-break-after: always',
 157                         title: label
 158                 };
 159         }
 160 } )();