plugin.js 20.5 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539
/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

'use strict';

( function() {
	CKEDITOR.plugins.add( 'uploadwidget', {
		lang: 'az,ca,cs,da,de,de-ch,el,en,eo,es,eu,fr,gl,hu,id,it,ja,km,ko,ku,nb,nl,no,oc,pl,pt,pt-br,ru,sv,tr,ug,uk,zh,zh-cn', // %REMOVE_LINE_CORE%
		requires: 'widget,clipboard,filetools,notificationaggregator',

		init: function( editor ) {
			// Images which should be changed into upload widget needs to be marked with `data-widget` on paste,
			// because otherwise wrong widget may handle upload placeholder element (e.g. image2 plugin would handle image).
			// `data-widget` attribute is allowed only in the elements which has also `data-cke-upload-id` attribute.
			editor.filter.allow( '*[!data-widget,!data-cke-upload-id]' );
		}
	} );

	/**
	 * This function creates an upload widget — a placeholder to show the progress of an upload. The upload widget
	 * is based on its {@link CKEDITOR.fileTools.uploadWidgetDefinition definition}. The `addUploadWidget` method also
	 * creates a `paste` event, if the {@link CKEDITOR.fileTools.uploadWidgetDefinition#fileToElement fileToElement} method
	 * is defined. This event helps in handling pasted files, as it will automatically check if the files were pasted and
	 * mark them to be uploaded.
	 *
	 * The upload widget helps to handle content that is uploaded asynchronously inside the editor. It solves issues such as:
	 * editing during upload, undo manager integration, getting data, removing or copying uploaded element.
	 *
	 * To create an upload widget you need to define two transformation methods:
	 *
	 * * The {@link CKEDITOR.fileTools.uploadWidgetDefinition#fileToElement fileToElement} method which will be called on
	 * `paste` and transform a file into a placeholder.
	 * * The {@link CKEDITOR.fileTools.uploadWidgetDefinition#onUploaded onUploaded} method with
	 * the {@link CKEDITOR.fileTools.uploadWidgetDefinition#replaceWith replaceWith} method which will be called to replace
	 * the upload placeholder with the final HTML when the upload is done.
	 * If you want to show more information about the progress you can also define
	 * the {@link CKEDITOR.fileTools.uploadWidgetDefinition#onLoading onLoading} and
	 * {@link CKEDITOR.fileTools.uploadWidgetDefinition#onUploading onUploading} methods.
	 *
	 * The simplest uploading widget which uploads a file and creates a link to it may look like this:
	 *
	 * 		CKEDITOR.fileTools.addUploadWidget( editor, 'uploadfile', {
	 *			uploadUrl: CKEDITOR.fileTools.getUploadUrl( editor.config ),
	 *
	 *			fileToElement: function( file ) {
	 *				var a = new CKEDITOR.dom.element( 'a' );
	 *				a.setText( file.name );
	 *				a.setAttribute( 'href', '#' );
	 *				return a;
	 *			},
	 *
	 *			onUploaded: function( upload ) {
	 *				this.replaceWith( '<a href="' + upload.url + '" target="_blank">' + upload.fileName + '</a>' );
	 *			}
	 *		} );
	 *
	 * The upload widget uses {@link CKEDITOR.fileTools.fileLoader} as a helper to upload the file. A
	 * {@link CKEDITOR.fileTools.fileLoader} instance is created when the file is pasted and a proper method is
	 * called &mdash; by default it is the {@link CKEDITOR.fileTools.fileLoader#loadAndUpload} method. If you want
	 * to only use the `load` or `upload`, you can use the {@link CKEDITOR.fileTools.uploadWidgetDefinition#loadMethod loadMethod}
	 * property.
	 *
	 * Note that if you want to handle a big file, e.g. a video, you may need to use `upload` instead of
	 * `loadAndUpload` because the file may be too big to load it to memory at once.
	 *
	 * If you do not upload the file, you need to define {@link CKEDITOR.fileTools.uploadWidgetDefinition#onLoaded onLoaded}
	 * instead of {@link CKEDITOR.fileTools.uploadWidgetDefinition#onUploaded onUploaded}.
	 * For example, if you want to read the content of the file:
	 *
	 *		CKEDITOR.fileTools.addUploadWidget( editor, 'fileReader', {
	 *			loadMethod: 'load',
	 *			supportedTypes: /text\/(plain|html)/,
	 *
	 *			fileToElement: function( file ) {
	 *				var el = new CKEDITOR.dom.element( 'span' );
	 *				el.setText( '...' );
	 *				return el;
	 *			},
	 *
	 *			onLoaded: function( loader ) {
	 *				this.replaceWith( atob( loader.data.split( ',' )[ 1 ] ) );
	 *			}
	 *		} );
	 *
	 * If you need to pass additional data to the request, you can do this using the
	 * {@link CKEDITOR.fileTools.uploadWidgetDefinition#additionalRequestParameters additionalRequestParameters} property.
	 * That data is then passed to the upload method defined by {@link CKEDITOR.fileTools.uploadWidgetDefinition#loadMethod},
	 * and to the {@link CKEDITOR.editor#fileUploadRequest} event (as part of the `requestData` property).
	 * The syntax of that parameter is compatible with the {@link CKEDITOR.editor#fileUploadRequest} `requestData` property.
	 *
	 *		CKEDITOR.fileTools.addUploadWidget( editor, 'uploadFile', {
	 *			additionalRequestParameters: {
	 *				foo: 'bar'
	 *			},
	 *
	 *			fileToElement: function( file ) {
	 *				var el = new CKEDITOR.dom.element( 'span' );
	 *				el.setText( '...' );
	 *				return el;
	 *			},
	 *
	 *			onUploaded: function( upload ) {
	 *				this.replaceWith( '<a href="' + upload.url + '" target="_blank">' + upload.fileName + '</a>' );
	 *			}
	 *		} );
	 *
	 * If you need custom `paste` handling, you need to mark the pasted element to be changed into an upload widget
	 * using {@link CKEDITOR.fileTools#markElement markElement}. For example, instead of the `fileToElement` helper from the
	 * example above, a `paste` listener can be created manually:
	 *
	 *		editor.on( 'paste', function( evt ) {
	 *			var file, i, el, loader;
	 *
	 *			for ( i = 0; i < evt.data.dataTransfer.getFilesCount(); i++ ) {
	 *				file = evt.data.dataTransfer.getFile( i );
	 *
	 *				if ( CKEDITOR.fileTools.isTypeSupported( file, /text\/(plain|html)/ ) ) {
	 *					el = new CKEDITOR.dom.element( 'span' ),
	 *					loader = editor.uploadRepository.create( file );
	 *
	 *					el.setText( '...' );
	 *
	 *					loader.load();
	 *
	 *					CKEDITOR.fileTools.markElement( el, 'filereader', loader.id );
	 *
	 *					evt.data.dataValue += el.getOuterHtml();
	 *				}
	 *			}
	 *		} );
	 *
	 * Note that you can bind notifications to the upload widget on paste using
	 * the {@link CKEDITOR.fileTools#bindNotifications} method, so notifications will automatically
	 * show the progress of the upload. Because this method shows notifications about upload, do not use it if you only
	 * {@link CKEDITOR.fileTools.fileLoader#load load} (and not upload) a file.
	 *
	 *		editor.on( 'paste', function( evt ) {
	 *			var file, i, el, loader;
	 *
	 *			for ( i = 0; i < evt.data.dataTransfer.getFilesCount(); i++ ) {
	 *				file = evt.data.dataTransfer.getFile( i );
	 *
	 *				if ( CKEDITOR.fileTools.isTypeSupported( file, /text\/pdf/ ) ) {
	 *					el = new CKEDITOR.dom.element( 'span' ),
	 *					loader = editor.uploadRepository.create( file );
	 *
	 *					el.setText( '...' );
	 *
	 *					loader.upload();
	 *
	 *					CKEDITOR.fileTools.markElement( el, 'pdfuploader', loader.id );
	 *
	 *					CKEDITOR.fileTools.bindNotifications( editor, loader );
	 *
	 *					evt.data.dataValue += el.getOuterHtml();
	 *				}
	 *			}
	 *		} );
	 *
	 * @member CKEDITOR.fileTools
	 * @param {CKEDITOR.editor} editor The editor instance.
	 * @param {String} name The name of the upload widget.
	 * @param {CKEDITOR.fileTools.uploadWidgetDefinition} def Upload widget definition.
	 */
	function addUploadWidget( editor, name, def ) {
		var fileTools = CKEDITOR.fileTools,
			uploads = editor.uploadRepository,
			// Plugins which support all file type has lower priority than plugins which support specific types.
			priority = def.supportedTypes ? 10 : 20;

		if ( def.fileToElement ) {
			editor.on( 'paste', function( evt ) {
				var data = evt.data,
					dataTransfer = data.dataTransfer,
					filesCount = dataTransfer.getFilesCount(),
					loadMethod = def.loadMethod || 'loadAndUpload',
					file, i;

				if ( data.dataValue || !filesCount ) {
					return;
				}

				for ( i = 0; i < filesCount; i++ ) {
					file = dataTransfer.getFile( i );

					// No def.supportedTypes means all types are supported.
					if ( !def.supportedTypes || fileTools.isTypeSupported( file, def.supportedTypes ) ) {
						var el = def.fileToElement( file ),
							loader = uploads.create( file );

						if ( el ) {
							loader[ loadMethod ]( def.uploadUrl, def.additionalRequestParameters );

							CKEDITOR.fileTools.markElement( el, name, loader.id );

							if ( loadMethod == 'loadAndUpload' || loadMethod == 'upload' ) {
								//CKEDITOR.fileTools.bindNotifications( editor, loader ); // edit by dyf
							}

							data.dataValue += el.getOuterHtml();
						}
					}
				}
			}, null, null, priority );
		}

		/**
		 * This is an abstract class that describes a definition of an upload widget.
		 * It is a type of {@link CKEDITOR.fileTools#addUploadWidget} method's second argument.
		 *
		 * Note that because the upload widget is a type of a widget, this definition extends
		 * {@link CKEDITOR.plugins.widget.definition}.
		 * It adds several new properties and callbacks and implements the {@link CKEDITOR.plugins.widget.definition#downcast}
		 * and {@link CKEDITOR.plugins.widget.definition#init} callbacks. These two properties
		 * should not be overwritten.
		 *
		 * Also, the upload widget definition defines a few properties ({@link #fileToElement}, {@link #supportedTypes},
		 * {@link #loadMethod loadMethod}, {@link #uploadUrl} and {@link #additionalRequestParameters}) used in the
		 * {@link CKEDITOR.editor#paste} listener which is registered by {@link CKEDITOR.fileTools#addUploadWidget}
		 * if the upload widget definition contains the {@link #fileToElement} callback.
		 *
		 * @abstract
		 * @class CKEDITOR.fileTools.uploadWidgetDefinition
		 * @mixins CKEDITOR.plugins.widget.definition
		 */
		CKEDITOR.tools.extend( def, {
			/**
			 * Upload widget definition overwrites the {@link CKEDITOR.plugins.widget.definition#downcast} property.
			 * This should not be changed.
			 *
			 * @property {String/Function}
			 */
			downcast: function() {
				return new CKEDITOR.htmlParser.text( '' );
			},

			/**
			 * Upload widget definition overwrites the {@link CKEDITOR.plugins.widget.definition#init} property.
			 * If you want to add some code in the `init` callback remember to call the base function.
			 *
			 * @property {Function}
			 */
			init: function() {
				var widget = this,
					id = this.wrapper.findOne( '[data-cke-upload-id]' ).data( 'cke-upload-id' ),
					loader = uploads.loaders[ id ],
					capitalize = CKEDITOR.tools.capitalize,
					oldStyle, newStyle;

				loader.on( 'update', function( evt ) {
					// Abort if widget was removed.
					if ( !widget.wrapper || !widget.wrapper.getParent() ) {
						if ( !editor.editable().find( '[data-cke-upload-id="' + id + '"]' ).count() ) {
							loader.abort();
						}
						evt.removeListener();
						return;
					}

					editor.fire( 'lockSnapshot' );

					// Call users method, eg. if the status is `uploaded` then
					// `onUploaded` method will be called, if exists.
					var methodName = 'on' + capitalize( loader.status );

					if ( typeof widget[ methodName ] === 'function' ) {
						if ( widget[ methodName ]( loader ) === false ) {
							editor.fire( 'unlockSnapshot' );
							return;
						}
					}

					// Set style to the wrapper if it still exists.
					newStyle = 'cke_upload_' + loader.status;
					if ( widget.wrapper && newStyle != oldStyle ) {
						oldStyle && widget.wrapper.removeClass( oldStyle );
						widget.wrapper.addClass( newStyle );
						oldStyle = newStyle;
					}

					// Remove widget on error or abort.
					if ( loader.status == 'error' || loader.status == 'abort' ) {
						editor.widgets.del( widget );
					}

					editor.fire( 'unlockSnapshot' );
				} );

				loader.update();
			},

			/**
			 * Replaces the upload widget with the final HTML. This method should be called when the upload is done,
			 * usually in the {@link #onUploaded} callback.
			 *
			 * @property {Function}
			 * @param {String} data HTML to replace the upload widget.
			 * @param {String} [mode='html'] See {@link CKEDITOR.editor#method-insertHtml}'s modes.
			 */
			replaceWith: function( data, mode ) {
				if ( data.trim() === '' ) {
					editor.widgets.del( this );
					return;
				}

				var wasSelected = ( this == editor.widgets.focused ),
					editable = editor.editable(),
					range = editor.createRange(),
					bookmark, bookmarks;

				if ( !wasSelected ) {
					bookmarks = editor.getSelection().createBookmarks();
				}

				range.setStartBefore( this.wrapper );
				range.setEndAfter( this.wrapper );

				if ( wasSelected ) {
					bookmark = range.createBookmark();
				}

				editable.insertHtmlIntoRange( data, range, mode );

				editor.widgets.checkWidgets( { initOnlyNew: true } );

				// Ensure that old widgets instance will be removed.
				// If replaceWith is called in init, because of paste then checkWidgets will not remove it.
				editor.widgets.destroy( this, true );

				if ( wasSelected ) {
					range.moveToBookmark( bookmark );
					range.select();
				} else {
					editor.getSelection().selectBookmarks( bookmarks );
				}

			}

			/**
			 * If this property is defined, paste listener is created to transform the pasted file into an HTML element.
			 * It creates an HTML element which will be then transformed into an upload widget.
			 * It is only called for {@link #supportedTypes supported files}.
			 * If multiple files were pasted, this function will be called for each file of a supported type.
			 *
			 * @property {Function} fileToElement
			 * @param {Blob} file A pasted file to load or upload.
			 * @returns {CKEDITOR.dom.element} An element which will be transformed into the upload widget.
			 */

			/**
			 * Regular expression to check if the file type is supported by this widget.
			 * If not defined, all files will be handled.
			 *
			 * @property {String} [supportedTypes]
			 */

			/**
			 * The URL to which the file will be uploaded. It should be taken from the configuration using
			 * {@link CKEDITOR.fileTools#getUploadUrl}.
			 *
			 * @property {String} [uploadUrl]
			 */

			/**
			 * An object containing additional data that should be passed to the function defined by {@link #loadMethod}.
			 *
			 * @property {Object} [additionalRequestParameters]
			 */

			/**
			 * The type of loading operation that should be executed as a result of pasting a file. Possible options are:
			 *
			 * * `'loadAndUpload'` &ndash; Default behavior. The {@link CKEDITOR.fileTools.fileLoader#loadAndUpload} method will be
			 * executed, the file will be loaded first and uploaded immediately after loading is done.
			 * * `'load'` &ndash; The {@link CKEDITOR.fileTools.fileLoader#load} method will be executed. This loading type should
			 * be used if you only want to load file data without uploading it.
			 * * `'upload'` &ndash; The {@link CKEDITOR.fileTools.fileLoader#upload} method will be executed, the file will be uploaded
			 * without loading it to memory. This loading type should be used if you want to upload a big file,
			 * otherwise you can get an "out of memory" error.
			 *
			 * @property {String} [loadMethod=loadAndUpload]
			 */

			/**
			 * A function called when the {@link CKEDITOR.fileTools.fileLoader#status status} of the upload changes to `loading`.
			 *
			 * @property {Function} [onLoading]
			 * @param {CKEDITOR.fileTools.fileLoader} loader Loader instance.
			 * @returns {Boolean}
			 */

			/**
			 * A function called when the {@link CKEDITOR.fileTools.fileLoader#status status} of the upload changes to `loaded`.
			 *
			 * @property {Function} [onLoaded]
			 * @param {CKEDITOR.fileTools.fileLoader} loader Loader instance.
			 * @returns {Boolean}
			 */

			/**
			 * A function called when the {@link CKEDITOR.fileTools.fileLoader#status status} of the upload changes to `uploading`.
			 *
			 * @property {Function} [onUploading]
			 * @param {CKEDITOR.fileTools.fileLoader} loader Loader instance.
			 * @returns {Boolean}
			 */

			/**
			 * A function called when the {@link CKEDITOR.fileTools.fileLoader#status status} of the upload changes to `uploaded`.
			 * At that point the upload is done and the upload widget should be replaced with the final HTML using
			 * the {@link #replaceWith} method.
			 *
			 * @property {Function} [onUploaded]
			 * @param {CKEDITOR.fileTools.fileLoader} loader Loader instance.
			 * @returns {Boolean}
			 */

			/**
			 * A function called when the {@link CKEDITOR.fileTools.fileLoader#status status} of the upload changes to `error`.
			 * The default behavior is to remove the widget and it can be canceled if this function returns `false`.
			 *
			 * @property {Function} [onError]
			 * @param {CKEDITOR.fileTools.fileLoader} loader Loader instance.
			 * @returns {Boolean} If `false`, the default behavior (remove widget) will be canceled.
			 */

			/**
			 * A function called when the {@link CKEDITOR.fileTools.fileLoader#status status} of the upload changes to `abort`.
			 * The default behavior is to remove the widget and it can be canceled if this function returns `false`.
			 *
			 * @property {Function} [onAbort]
			 * @param {CKEDITOR.fileTools.fileLoader} loader Loader instance.
			 * @returns {Boolean} If `false`, the default behavior (remove widget) will be canceled.
			 */
		} );

		editor.widgets.add( name, def );
	}

	/**
	 * Marks an element which should be transformed into an upload widget.
	 *
	 * @see CKEDITOR.fileTools.addUploadWidget
	 *
	 * @member CKEDITOR.fileTools
	 * @param {CKEDITOR.dom.element} element Element to be marked.
	 * @param {String} widgetName The name of the upload widget.
	 * @param {Number} loaderId The ID of a related {@link CKEDITOR.fileTools.fileLoader}.
	 */
	function markElement( element, widgetName, loaderId  ) {
		element.setAttributes( {
			'data-cke-upload-id': loaderId,
			'data-widget': widgetName
		} );
	}

	/**
	 * Binds a notification to the {@link CKEDITOR.fileTools.fileLoader file loader} so the upload widget will use
	 * the notification to show the status and progress.
	 * This function uses {@link CKEDITOR.plugins.notificationAggregator}, so even if multiple files are uploading
	 * only one notification is shown. Warnings are an exception, because they are shown in separate notifications.
	 * This notification shows only the progress of the upload, so this method should not be used if
	 * the {@link CKEDITOR.fileTools.fileLoader#load loader.load} method was called. It works with
	 * {@link CKEDITOR.fileTools.fileLoader#upload upload} and {@link CKEDITOR.fileTools.fileLoader#loadAndUpload loadAndUpload}.
	 *
	 * @member CKEDITOR.fileTools
	 * @param {CKEDITOR.editor} editor The editor instance.
	 * @param {CKEDITOR.fileTools.fileLoader} loader The file loader instance.
	 */
	function bindNotifications( editor, loader ) {
		var aggregator,
			task = null;

		loader.on( 'update', function() {
			// Value of uploadTotal is known after upload start. Task will be created when uploadTotal is present.
			if ( !task && loader.uploadTotal ) {
				createAggregator();
				task = aggregator.createTask( { weight: loader.uploadTotal } );
			}

			if ( task && loader.status == 'uploading' ) {
				task.update( loader.uploaded );
			}
		} );

		loader.on( 'uploaded', function() {
			task && task.done();
		} );

		loader.on( 'error', function() {
			task && task.cancel();
			editor.showNotification( loader.message, 'warning' );
		} );

		loader.on( 'abort', function() {
			task && task.cancel();
			editor.showNotification( editor.lang.uploadwidget.abort, 'info' );
		} );

		function createAggregator() {
			aggregator = editor._.uploadWidgetNotificaionAggregator;

			// Create one notification aggregator for all types of upload widgets for the editor.
			if ( !aggregator || aggregator.isFinished() ) {
				aggregator = editor._.uploadWidgetNotificaionAggregator = new CKEDITOR.plugins.notificationAggregator(
					editor, editor.lang.uploadwidget.uploadMany, editor.lang.uploadwidget.uploadOne );

				aggregator.once( 'finished', function() {
					var tasks = aggregator.getTaskCount();

					if ( tasks === 0 ) {
						aggregator.notification.hide();
					} else {
						aggregator.notification.update( {
							message: tasks == 1 ?
								editor.lang.uploadwidget.doneOne :
								editor.lang.uploadwidget.doneMany.replace( '%1', tasks ),
							type: 'success',
							important: 1
						} );
					}
				} );
			}
		}
	}

	// Two plugins extend this object.
	if ( !CKEDITOR.fileTools ) {
		CKEDITOR.fileTools = {};
	}

	CKEDITOR.tools.extend( CKEDITOR.fileTools, {
		addUploadWidget: addUploadWidget,
		markElement: markElement,
		bindNotifications: bindNotifications
	} );
} )();