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,es-mx,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          * Creates fake {@link CKEDITOR.dom.element} based on real element.
  79          * Fake element is an img with special attributes, which keep real element properties.
  80          *
  81          * @member CKEDITOR.editor
  82          * @param {CKEDITOR.dom.element} realElement Real element to transform.
  83          * @param {String} className Class name which will be used as class of fake element.
  84          * @param {String} realElementType Stores type of fake element.
  85          * @param {Boolean} isResizable Keeps information if element is resizable.
  86          * @returns {CKEDITOR.dom.element} Fake element.
  87          */
  88         CKEDITOR.editor.prototype.createFakeElement = function( realElement, className, realElementType, isResizable ) {
  89                 var lang = this.lang.fakeobjects,
  90                         label = lang[ realElementType ] || lang.unknown;
  91
  92                 var attributes = {
  93                         'class': className,
  94                         'data-cke-realelement': encodeURIComponent( realElement.getOuterHtml() ),
  95                         'data-cke-real-node-type': realElement.type,
  96                         alt: label,
  97                         title: label,
  98                         align: realElement.getAttribute( 'align' ) || ''
  99                 };
 100
 101                 // Do not set "src" on high-contrast so the alt text is displayed. (http://dev.ckeditor.com/ticket/8945)
 102                 if ( !CKEDITOR.env.hc )
 103                         attributes.src = CKEDITOR.tools.transparentImageData;
 104
 105                 if ( realElementType )
 106                         attributes[ 'data-cke-real-element-type' ] = realElementType;
 107
 108                 if ( isResizable ) {
 109                         attributes[ 'data-cke-resizable' ] = isResizable;
 110
 111                         var fakeStyle = new cssStyle();
 112
 113                         var width = realElement.getAttribute( 'width' ),
 114                                 height = realElement.getAttribute( 'height' );
 115
 116                         width && ( fakeStyle.rules.width = cssLength( width ) );
 117                         height && ( fakeStyle.rules.height = cssLength( height ) );
 118                         fakeStyle.populate( attributes );
 119                 }
 120
 121                 return this.document.createElement( 'img', { attributes: attributes } );
 122         };
 123
 124         /**
 125          * Creates fake {@link CKEDITOR.htmlParser.element} based on real element.
 126          *
 127          * @member CKEDITOR.editor
 128          * @param {CKEDITOR.dom.element} realElement Real element to transform.
 129          * @param {String} className Class name which will be used as class of fake element.
 130          * @param {String} realElementType Store type of fake element.
 131          * @param {Boolean} isResizable Keep information if element is resizable.
 132          * @returns {CKEDITOR.htmlParser.element} Fake htmlParser element.
 133          */
 134         CKEDITOR.editor.prototype.createFakeParserElement = function( realElement, className, realElementType, isResizable ) {
 135                 var lang = this.lang.fakeobjects,
 136                         label = lang[ realElementType ] || lang.unknown,
 137                         html;
 138
 139                 var writer = new CKEDITOR.htmlParser.basicWriter();
 140                 realElement.writeHtml( writer );
 141                 html = writer.getHtml();
 142
 143                 var attributes = {
 144                         'class': className,
 145                         'data-cke-realelement': encodeURIComponent( html ),
 146                         'data-cke-real-node-type': realElement.type,
 147                         alt: label,
 148                         title: label,
 149                         align: realElement.attributes.align || ''
 150                 };
 151
 152                 // Do not set "src" on high-contrast so the alt text is displayed. (http://dev.ckeditor.com/ticket/8945)
 153                 if ( !CKEDITOR.env.hc )
 154                         attributes.src = CKEDITOR.tools.transparentImageData;
 155
 156                 if ( realElementType )
 157                         attributes[ 'data-cke-real-element-type' ] = realElementType;
 158
 159                 if ( isResizable ) {
 160                         attributes[ 'data-cke-resizable' ] = isResizable;
 161                         var realAttrs = realElement.attributes,
 162                                 fakeStyle = new cssStyle();
 163
 164                         var width = realAttrs.width,
 165                                 height = realAttrs.height;
 166
 167                         width !== undefined && ( fakeStyle.rules.width = cssLength( width ) );
 168                         height !== undefined && ( fakeStyle.rules.height = cssLength( height ) );
 169                         fakeStyle.populate( attributes );
 170                 }
 171
 172                 return new CKEDITOR.htmlParser.element( 'img', attributes );
 173         };
 174
 175         /**
 176          * Creates {@link CKEDITOR.dom.element} from fake element.
 177          *
 178          * @member CKEDITOR.editor
 179          * @param {CKEDITOR.dom.element} fakeElement Fake element to transform.
 180          * @returns {CKEDITOR.dom.element/null} Returns real element or `null` if transformed element wasn't fake.
 181          */
 182         CKEDITOR.editor.prototype.restoreRealElement = function( fakeElement ) {
 183                 if ( fakeElement.data( 'cke-real-node-type' ) != CKEDITOR.NODE_ELEMENT )
 184                         return null;
 185
 186                 var element = CKEDITOR.dom.element.createFromHtml( decodeURIComponent( fakeElement.data( 'cke-realelement' ) ), this.document );
 187
 188                 if ( fakeElement.data( 'cke-resizable' ) ) {
 189                         var width = fakeElement.getStyle( 'width' ),
 190                                 height = fakeElement.getStyle( 'height' );
 191
 192                         width && element.setAttribute( 'width', replaceCssLength( element.getAttribute( 'width' ), width ) );
 193                         height && element.setAttribute( 'height', replaceCssLength( element.getAttribute( 'height' ), height ) );
 194                 }
 195
 196                 return element;
 197         };
 198
 199 } )();