sources/plugins/fakeobjects/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 ( function() {
   7         var cssStyle = CKEDITOR.htmlParser.cssStyle,
   8                 cssLength = CKEDITOR.tools.cssLength;
   9
  10         var cssLengthRegex = /^((?:\d*(?:\.\d+))|(?:\d+))(.*)?$/i;
  11
  12         // Replacing the former CSS length value with the later one, with
  13         // adjustment to the length  unit.
  14         function replaceCssLength( length1, length2 ) {
  15                 var parts1 = cssLengthRegex.exec( length1 ),
  16                         parts2 = cssLengthRegex.exec( length2 );
  17
  18                 // Omit pixel length unit when necessary,
  19                 // e.g. replaceCssLength( 10, '20px' ) -> 20
  20                 if ( parts1 ) {
  21                         if ( !parts1[ 2 ] && parts2[ 2 ] == 'px' )
  22                                 return parts2[ 1 ];
  23                         if ( parts1[ 2 ] == 'px' && !parts2[ 2 ] )
  24                                 return parts2[ 1 ] + 'px';
  25                 }
  26
  27                 return length2;
  28         }
  29
  30         var htmlFilterRules = {
  31                 elements: {
  32                         $: function( element ) {
  33                                 var attributes = element.attributes,
  34                                         realHtml = attributes && attributes[ 'data-cke-realelement' ],
  35                                         realFragment = realHtml && new CKEDITOR.htmlParser.fragment.fromHtml( decodeURIComponent( realHtml ) ),
  36                                         realElement = realFragment && realFragment.children[ 0 ];
  37
  38                                 // Width/height in the fake object are subjected to clone into the real element.
  39                                 if ( realElement && element.attributes[ 'data-cke-resizable' ] ) {
  40                                         var styles = new cssStyle( element ).rules,
  41                                                 realAttrs = realElement.attributes,
  42                                                 width = styles.width,
  43                                                 height = styles.height;
  44
  45                                         width && ( realAttrs.width = replaceCssLength( realAttrs.width, width ) );
  46                                         height && ( realAttrs.height = replaceCssLength( realAttrs.height, height ) );
  47                                 }
  48
  49                                 return realElement;
  50                         }
  51                 }
  52         };
  53
  54         CKEDITOR.plugins.add( 'fakeobjects', {
  55                 // jscs:disable maximumLineLength
  56                 lang: 'af,ar,az,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,oc,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%
  57                 // jscs:enable maximumLineLength
  58
  59                 init: function( editor ) {
  60                         // Allow image with all styles and classes plus src, alt and title attributes.
  61                         // We need them when fakeobject is pasted.
  62                         editor.filter.allow( 'img[!data-cke-realelement,src,alt,title](*){*}', 'fakeobjects' );
  63                 },
  64
  65                 afterInit: function( editor ) {
  66                         var dataProcessor = editor.dataProcessor,
  67                                 htmlFilter = dataProcessor && dataProcessor.htmlFilter;
  68
  69                         if ( htmlFilter ) {
  70                                 htmlFilter.addRules( htmlFilterRules, {
  71                                         applyToAll: true
  72                                 } );
  73                         }
  74                 }
  75         } );
  76
  77         /**
  78          * @member CKEDITOR.editor
  79          * @todo
  80          */
  81         CKEDITOR.editor.prototype.createFakeElement = function( realElement, className, realElementType, isResizable ) {
  82                 var lang = this.lang.fakeobjects,
  83                         label = lang[ realElementType ] || lang.unknown;
  84
  85                 var attributes = {
  86                         'class': className,
  87                         'data-cke-realelement': encodeURIComponent( realElement.getOuterHtml() ),
  88                         'data-cke-real-node-type': realElement.type,
  89                         alt: label,
  90                         title: label,
  91                         align: realElement.getAttribute( 'align' ) || ''
  92                 };
  93
  94                 // Do not set "src" on high-contrast so the alt text is displayed. (#8945)
  95                 if ( !CKEDITOR.env.hc )
  96                         attributes.src = CKEDITOR.tools.transparentImageData;
  97
  98                 if ( realElementType )
  99                         attributes[ 'data-cke-real-element-type' ] = realElementType;
 100
 101                 if ( isResizable ) {
 102                         attributes[ 'data-cke-resizable' ] = isResizable;
 103
 104                         var fakeStyle = new cssStyle();
 105
 106                         var width = realElement.getAttribute( 'width' ),
 107                                 height = realElement.getAttribute( 'height' );
 108
 109                         width && ( fakeStyle.rules.width = cssLength( width ) );
 110                         height && ( fakeStyle.rules.height = cssLength( height ) );
 111                         fakeStyle.populate( attributes );
 112                 }
 113
 114                 return this.document.createElement( 'img', { attributes: attributes } );
 115         };
 116
 117         /**
 118          * @member CKEDITOR.editor
 119          * @todo
 120          */
 121         CKEDITOR.editor.prototype.createFakeParserElement = function( realElement, className, realElementType, isResizable ) {
 122                 var lang = this.lang.fakeobjects,
 123                         label = lang[ realElementType ] || lang.unknown,
 124                         html;
 125
 126                 var writer = new CKEDITOR.htmlParser.basicWriter();
 127                 realElement.writeHtml( writer );
 128                 html = writer.getHtml();
 129
 130                 var attributes = {
 131                         'class': className,
 132                         'data-cke-realelement': encodeURIComponent( html ),
 133                         'data-cke-real-node-type': realElement.type,
 134                         alt: label,
 135                         title: label,
 136                         align: realElement.attributes.align || ''
 137                 };
 138
 139                 // Do not set "src" on high-contrast so the alt text is displayed. (#8945)
 140                 if ( !CKEDITOR.env.hc )
 141                         attributes.src = CKEDITOR.tools.transparentImageData;
 142
 143                 if ( realElementType )
 144                         attributes[ 'data-cke-real-element-type' ] = realElementType;
 145
 146                 if ( isResizable ) {
 147                         attributes[ 'data-cke-resizable' ] = isResizable;
 148                         var realAttrs = realElement.attributes,
 149                                 fakeStyle = new cssStyle();
 150
 151                         var width = realAttrs.width,
 152                                 height = realAttrs.height;
 153
 154                         width !== undefined && ( fakeStyle.rules.width = cssLength( width ) );
 155                         height !== undefined && ( fakeStyle.rules.height = cssLength( height ) );
 156                         fakeStyle.populate( attributes );
 157                 }
 158
 159                 return new CKEDITOR.htmlParser.element( 'img', attributes );
 160         };
 161
 162         /**
 163          * @member CKEDITOR.editor
 164          * @todo
 165          */
 166         CKEDITOR.editor.prototype.restoreRealElement = function( fakeElement ) {
 167                 if ( fakeElement.data( 'cke-real-node-type' ) != CKEDITOR.NODE_ELEMENT )
 168                         return null;
 169
 170                 var element = CKEDITOR.dom.element.createFromHtml( decodeURIComponent( fakeElement.data( 'cke-realelement' ) ), this.document );
 171
 172                 if ( fakeElement.data( 'cke-resizable' ) ) {
 173                         var width = fakeElement.getStyle( 'width' ),
 174                                 height = fakeElement.getStyle( 'height' );
 175
 176                         width && element.setAttribute( 'width', replaceCssLength( element.getAttribute( 'width' ), width ) );
 177                         height && element.setAttribute( 'height', replaceCssLength( element.getAttribute( 'height' ), height ) );
 178                 }
 179
 180                 return element;
 181         };
 182
 183 } )();