Skip to content

Commit

Permalink
Allow built-in image paste handling to be disabled (ckeditor#4874).
Browse files Browse the repository at this point in the history
This will allow 3rd party plugins to handle images being pasted.
  • Loading branch information
FlowIT-JIT committed Sep 20, 2021
1 parent b6de89c commit 927f9ac
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 1 deletion.
12 changes: 11 additions & 1 deletion plugins/clipboard/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
42 changes: 42 additions & 0 deletions tests/plugins/clipboard/manual/pasteimagedisable.html
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 17 additions & 0 deletions tests/plugins/clipboard/manual/pasteimagedisable.md
Original file line number Diff line number Diff line change
@@ -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.

0 comments on commit 927f9ac

Please sign in to comment.