clipboardInput event not fired for image paste, how do I listen to it ?

[Joshuajrodrigues]

📝 Ask a question

 <RichTextEditor
                  placeholder="Type Description here..."
                  data={resourceDescription}
                  onChange={debounceDesp}
                  onReady={(editor) => {
                    editor.editing.view.document.on('clipboardInput', (evt, data) => {
                      let htmlToSantize = santizeRichText(data.dataTransfer.getData("text/html"))
                      data.content = editor.data.htmlProcessor.toView(htmlToSantize);
                    });
                    editor.editing.view.document.on('drop', (evt, data) => {
                      evt.stop();
                      data.preventDefault();
                    }, { priority: 'high' });
                    editor.editing.view.document.on('dragover', (evt, data) => {
                      evt.stop();
                      data.preventDefault();
                    }, { priority: 'high' });
                  }}
....
...

Im trying to get rid of image paste and this was the best way I found for our use case, but currently if I go to my file explorer and right click copy and then right click paste into the editor it still allows image upload. including ctrl+v

I want to optionally remove image upload feature so other instance of the editor can have while this one shouldnt

PS: this is just a wrapper around the Ckeditor. all props are passed down to Ckeditor as it expects them

[Witoso]

Hi, thanks for the question. Could you explain a bit more? Do you want to block image adding completely or just on paste / drag from OS file manager?

I want to optionally remove image upload feature so other instance of the editor can have while this one shouldnt

This got me thinking about the solution of simply not initializing some plugins in this editor's instance.

[Joshuajrodrigues]

Yes so earlier in our projects we used to pass removePlugins: ['ImageUploadEditing', 'ImageUpload', 'ImageInsert',], This would disable image upload in cases where you drag and drop images and also when you copy paste from your system. This doesnt block rich text images when you copy paste from sites like wikipedia.

In the new version of ckeditor 5, v45

removePlugins: ['ImageUploadEditing', 'ImageUpload', 'ImageInsert',],

Breaks the editor,

I dont think I can not initializing some plugins in this editor's instance. As I do need image upload in some cases on the same project.

Earlier I would pass removePlugins: ['ImageUploadEditing', 'ImageUpload', 'ImageInsert',], in places where I disable images and not pass it where I do require it.

 <RichTextEditor
                  placeholder="Type Description here..."
                  data={resourceDescription}
                  onChange={debounceDesp}
                  onReady={(editor) => {
                    editor.editing.view.document.on('clipboardInput', (evt, data) => {
                      let htmlToSantize = santizeRichText(data.dataTransfer.getData("text/html"))
                      data.content = editor.data.htmlProcessor.toView(htmlToSantize);
                    });
                    editor.editing.view.document.on('drop', (evt, data) => {
                      evt.stop();
                      data.preventDefault();
                    }, { priority: 'high' });
                    editor.editing.view.document.on('dragover', (evt, data) => {
                      evt.stop();
                      data.preventDefault();
                    }, { priority: 'high' });
                  }}
...
Lets me sanitize the images from websites like Wikipedia too which is helpful.

[Witoso]

Could you please elaborate what you mean by Breaks the editor, and from which version do you update? I assume it could be connected to InsertImageViaUrl and some internal deps.

[CKEditorBot]

The issue lacks the feedback we asked for two weeks. Hence, we've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).