Allow built-in image paste handling to be disabled (ckeditor#4874).

This will allow 3rd party plugins to handle images being pasted.

Author: FlowIT-JIT

plugins/clipboard/plugin.js

@@ -149,7 +149,7 @@
 			// Convert image file (if present) to base64 string for modern browsers except IE<10, as it does not support
 			// custom MIME types in clipboard (#4612).
 			// Do it as the first step as the conversion is asynchronous and should hold all further paste processing.
-			if ( CKEDITOR.plugins.clipboard.isCustomDataTypesSupported || CKEDITOR.plugins.clipboard.isFileApiSupported ) {
+			if ( ( CKEDITOR.plugins.clipboard.isCustomDataTypesSupported || CKEDITOR.plugins.clipboard.isFileApiSupported ) && editor.config.clipboard_handleImagePasting !== false ) {
 				var supportedImageTypes = [ 'image/png', 'image/jpeg', 'image/gif' ],
 					unsupportedTypeMsg = createNotificationMessage( supportedImageTypes ),
 					latestId;
@@ -3471,3 +3471,13 @@
  * @member CKEDITOR.config
  */
 CKEDITOR.config.clipboard_notificationDuration = 10000;
+
+/**
+ * Whether to use clipboard plugin to handle image pasting, turning
+ * images into base64 strings on browsers supporting the File API.
+ *
+ * @since 4.7.0
+ * @cfg {Number} [clipboard_handleImagePasting=true]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.clipboard_handleImagePasting = true;

tests/plugins/clipboard/manual/pasteimagedisable.html

@@ -0,0 +1,42 @@
+<div id="editor">
+	<p>Paste image here</p>
+	<p></p>
+</div>
+
+<br><br>
+
+<button id="button"> Disable built-in image paste handling </button>
+
+<br><br>
+
+<div id="log">Log output:</div>
+
+<script>
+	( function() {
+		if ( !window.FileReader ) {
+			return bender.ignore();
+		}
+
+		CKEDITOR.plugins.add( 'customImagePasteHandlerPlugin', {
+			init: function( editor ) {
+				editor.on( 'paste', function( event ) {
+					var log = document.querySelector( '#log' );
+					var msg = '<br>Custom image paste handling: image data received';
+					log.innerHTML += msg;
+				} );
+			}
+		} );
+
+		CKEDITOR.replace( 'editor' );
+
+		var button = document.querySelector( '#button' );
+		button.onclick = function() {
+			CKEDITOR.instances.editor.destroy();
+			CKEDITOR.replace( 'editor', {
+				// Allow 3rd party plugins to handle image pasting
+				clipboard_handleImagePasting: false,
+				extraPlugins: "customImagePasteHandlerPlugin"
+			} );
+		}
+	} )();
+</script>

tests/plugins/clipboard/manual/pasteimagedisable.md

@@ -0,0 +1,17 @@
+@bender-ui: collapsed
+@bender-tags: 4.17.0, clipboard, 4874
+@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, basicstyles, image, clipboard, sourcearea
+
+ 1. Paste an image into the editor.
+
+    Observe that the image is inserted and that no "Custom image paste handling" entry is written to "log output" on the page.
+
+ 2. Click the "Disable built-in image paste handling" button.
+
+ 3. Paste an image into the editor.
+
+    Observe that the image is not inserted, and that "log output" now shows "Custom image paste handling: image data received".
+
+**Expected** No image is inserted in step 3 but instead produces log output as described.
+
+**Unexpected** Image pasting is not suppressed in step 3 and/or no log output is produced.