Prevent Images to be copy and pasted into RTE - This will avoid performance issues when huge size images pasted directly.
In Pega Application, Rich Text Editors (RTE) such as CKEditor are used to capture user input. I have observed a problem arises when users directly paste screenshots or images into the editor, which can lead to unintended uploads or storage bloat. And cause performance issues.
At the same time, developers often copy and paste code snippets from sources like StackOverflow. These snippets must be allowed, but should paste as plain text only — not as image content.This article explains how to block image pasting in CKEditor while ensuring that code snippets and formatted text paste cleanly as a text. And also this will block the
Ideally you can place the below snippet in UserWorkForm.
pega.u.d.customRTEPlugins = pega.u.d.customRTEPlugins || {};
pega.u.d.customRTEPlugins["DisableDirectImagePaste"] = {
init: function(editor) {
function showBlockAlert() {
alert("Direct image paste is not allowed.\nPlease use the Image uploader in the toolbar.");
}
function blockImagePaste(evt) {
showBlockAlert();
evt.cancel();
evt.data.dataValue = '';
editor.undoManager.reset();
}
editor.on('paste', function(evt) {
var html = evt.data && evt.data.dataValue;
// Block inline base64 images
if (html && /]+src=["']data:image\/[^"']+;base64,/i.test(html)) {
blockImagePaste(evt);
return;
}
// Force plain text from clipboard instead of HTML
if (evt.data && evt.data.dataTransfer) {
var textData = evt.data.dataTransfer.getData('text/plain');
if (textData) {
evt.data.dataValue = textData;
}
}
}, null, null, 1); // priority = 1 → run before CKEditor filtering
editor.on('beforePaste', function(evt) {
var dataTransfer = evt.data && evt.data.dataTransfer;
if (!dataTransfer) return;
var files = dataTransfer.getFiles();
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
if (files[i].type && files[i].type.indexOf('image/') === 0) {
blockImagePaste(evt);
return false;
}
}
}
});
editor.on('contentDom', function() {
function cleanImages() {
setTimeout(function() {
var imgs = editor.document.$.body.querySelectorAll("img[src^='data:image/']");
if (imgs.length > 0) {
showBlockAlert();
imgs.forEach(function(img) {
img.remove();
});
editor.undoManager.reset();
}
}, 50);
}
editor.document.on('drop', cleanImages);
editor.document.getBody().on('drop', cleanImages);
editor.document.on('paste', cleanImages);
editor.document.getBody().on('paste', cleanImages);
});
}
};