sources/plugins/sourcearea/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 /**
   7  * @fileOverview The Source Editing Area plugin. It registers the "source" editing
   8  *              mode, which displays raw  HTML data being edited in the editor.
   9  */
  10
  11 ( function() {
  12         CKEDITOR.plugins.add( 'sourcearea', {
  13                 // jscs:disable maximumLineLength
  14                 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%
  15                 // jscs:enable maximumLineLength
  16                 icons: 'source,source-rtl', // %REMOVE_LINE_CORE%
  17                 hidpi: true, // %REMOVE_LINE_CORE%
  18                 init: function( editor ) {
  19                         // Source mode in inline editors is only available through the "sourcedialog" plugin.
  20                         if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE )
  21                                 return;
  22
  23                         var sourcearea = CKEDITOR.plugins.sourcearea;
  24
  25                         editor.addMode( 'source', function( callback ) {
  26                                 var contentsSpace = editor.ui.space( 'contents' ),
  27                                         textarea = contentsSpace.getDocument().createElement( 'textarea' );
  28
  29                                 textarea.setStyles(
  30                                         CKEDITOR.tools.extend( {
  31                                                 // IE7 has overflow the <textarea> from wrapping table cell.
  32                                                 width: CKEDITOR.env.ie7Compat ? '99%' : '100%',
  33                                                 height: '100%',
  34                                                 resize: 'none',
  35                                                 outline: 'none',
  36                                                 'text-align': 'left'
  37                                         },
  38                                         CKEDITOR.tools.cssVendorPrefix( 'tab-size', editor.config.sourceAreaTabSize || 4 ) ) );
  39
  40                                 // Make sure that source code is always displayed LTR,
  41                                 // regardless of editor language (http://dev.ckeditor.com/ticket/10105).
  42                                 textarea.setAttribute( 'dir', 'ltr' );
  43
  44                                 textarea.addClass( 'cke_source' ).addClass( 'cke_reset' ).addClass( 'cke_enable_context_menu' );
  45
  46                                 editor.ui.space( 'contents' ).append( textarea );
  47
  48                                 var editable = editor.editable( new sourceEditable( editor, textarea ) );
  49
  50                                 // Fill the textarea with the current editor data.
  51                                 editable.setData( editor.getData( 1 ) );
  52
  53                                 // Having to make <textarea> fixed sized to conquer the following bugs:
  54                                 // 1. The textarea height/width='100%' doesn't constraint to the 'td' in IE6/7.
  55                                 // 2. Unexpected vertical-scrolling behavior happens whenever focus is moving out of editor
  56                                 // if text content within it has overflowed. (http://dev.ckeditor.com/ticket/4762)
  57                                 if ( CKEDITOR.env.ie ) {
  58                                         editable.attachListener( editor, 'resize', onResize, editable );
  59                                         editable.attachListener( CKEDITOR.document.getWindow(), 'resize', onResize, editable );
  60                                         CKEDITOR.tools.setTimeout( onResize, 0, editable );
  61                                 }
  62
  63                                 editor.fire( 'ariaWidget', this );
  64
  65                                 callback();
  66                         } );
  67
  68                         editor.addCommand( 'source', sourcearea.commands.source );
  69
  70                         if ( editor.ui.addButton ) {
  71                                 editor.ui.addButton( 'Source', {
  72                                         label: editor.lang.sourcearea.toolbar,
  73                                         command: 'source',
  74                                         toolbar: 'mode,10'
  75                                 } );
  76                         }
  77
  78                         editor.on( 'mode', function() {
  79                                 editor.getCommand( 'source' ).setState( editor.mode == 'source' ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );
  80                         } );
  81
  82                         var needsFocusHack = CKEDITOR.env.ie && CKEDITOR.env.version == 9;
  83
  84                         function onResize() {
  85                                 // We have to do something with focus on IE9, because if sourcearea had focus
  86                                 // before being resized, the caret ends somewhere in the editor UI (http://dev.ckeditor.com/ticket/11839).
  87                                 var wasActive = needsFocusHack && this.equals( CKEDITOR.document.getActive() );
  88
  89                                 // Holder rectange size is stretched by textarea,
  90                                 // so hide it just for a moment.
  91                                 this.hide();
  92                                 this.setStyle( 'height', this.getParent().$.clientHeight + 'px' );
  93                                 this.setStyle( 'width', this.getParent().$.clientWidth + 'px' );
  94                                 // When we have proper holder size, show textarea again.
  95                                 this.show();
  96
  97                                 if ( wasActive )
  98                                         this.focus();
  99                         }
 100                 }
 101         } );
 102
 103         var sourceEditable = CKEDITOR.tools.createClass( {
 104                 base: CKEDITOR.editable,
 105                 proto: {
 106                         setData: function( data ) {
 107                                 this.setValue( data );
 108                                 this.status = 'ready';
 109                                 this.editor.fire( 'dataReady' );
 110                         },
 111
 112                         getData: function() {
 113                                 return this.getValue();
 114                         },
 115
 116                         // Insertions are not supported in source editable.
 117                         insertHtml: function() {},
 118                         insertElement: function() {},
 119                         insertText: function() {},
 120
 121                         // Read-only support for textarea.
 122                         setReadOnly: function( isReadOnly ) {
 123                                 this[ ( isReadOnly ? 'set' : 'remove' ) + 'Attribute' ]( 'readOnly', 'readonly' );
 124                         },
 125
 126                         detach: function() {
 127                                 sourceEditable.baseProto.detach.call( this );
 128                                 this.clearCustomData();
 129                                 this.remove();
 130                         }
 131                 }
 132         } );
 133 } )();
 134
 135 CKEDITOR.plugins.sourcearea = {
 136         commands: {
 137                 source: {
 138                         modes: { wysiwyg: 1, source: 1 },
 139                         editorFocus: false,
 140                         readOnly: 1,
 141                         exec: function( editor ) {
 142                                 if ( editor.mode == 'wysiwyg' )
 143                                         editor.fire( 'saveSnapshot' );
 144                                 editor.getCommand( 'source' ).setState( CKEDITOR.TRISTATE_DISABLED );
 145                                 editor.setMode( editor.mode == 'source' ? 'wysiwyg' : 'source' );
 146                         },
 147
 148                         canUndo: false
 149                 }
 150         }
 151 };
 152
 153 /**
 154  * Controls the `tab-size` CSS property of the source editing area. Use it to set the width
 155  * of the tab character in the source view. Enter an integer to denote the number of spaces
 156  * that the tab will contain.
 157  *
 158  * **Note:** Works only with {@link #dataIndentationChars}
 159  * set to `'\t'`. Please consider that not all browsers support the `tab-size` CSS
 160  * property yet.
 161  *
 162  *              // Set tab-size to 10 characters.
 163  *              config.sourceAreaTabSize = 10;
 164  *
 165  * @cfg {Number} [sourceAreaTabSize=4]
 166  * @member CKEDITOR.config
 167  * @see CKEDITOR.config#dataIndentationChars
 168  */