It is solved now. Created a custom plugin for CKEditor and working as expected. Thanks to @utkarsh.shrivastava@areteanstech.com for the tips to post the image data on the Clipboard and working with me.
I am posting the process and script here so that it helps someone who faces a challenge like me.
Step 1
Create a javascript file e.g. RTEditorBase64.js and include it on the Harness where you have the RTE. Copy and paste the below script in the js file. It will attach an image in the Editor toolbar which on click adds up an image with base64 string on the RTE content iframe and posts the value in the clipboard.
Please remember to add your custom icon png/svg image in the webwb folder, for me it is RTEImageIcon.svg.
pega.u.d.customRTEPlugins = pega.u.d.customRTEPlugins || {};
pega.u.d.customRTEPlugins["RTEbase64Plugin"] = {
init: function(editor) {
editor.ui.addButton("ImageB64Upload", { label: "Upload your Image ", command: "base64image", icon: "webwb/RTEImageIcon.svg" });
editor.addCommand("base64image", {
exec: function(editor) {
var hiddenUploadElement = CKEDITOR.dom.element.createFromHtml( '<input type="file" accept="image/*">' );
hiddenUploadElement.once( 'change', function( evt ) {
var targetElement = evt.data.getTarget();
if ( targetElement.$.files.length ) {
var file = targetElement.$.files.item(0);
doUpload(evt, file.name, file);
}
} );
hiddenUploadElement.$.click();
}
});
// Main function for Upload
var doUpload = function(e, name, file, callbackObj) {
var doc = editor.document.$.parentWindow || editor.document.$.defaultView;
if(! doc.FormData) { showUnsupportedException(); return;} //XMLHTTP Level 2 formdata (Chrome, Ff, IE 10+)
var formData = new doc.FormData();
formData.append(name, file, name);
formData.append("operation","addimg");
formData.append("pzCTkn", pega.ctx.activeCSRFToken);
formData.append("pzBFP", pega.d.browserFingerprint);
var xhr = new XMLHttpRequest();
xhr.open('POST', CKEDITOR.config.filebrowserImageUploadUrl, true);
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var respObj = JSON.parse(xhr.responseText);
if (respObj.error == "") {
var $img_path = CKEDITOR.tools.encodeCKEFileName(respObj.url);
// Initialize function for Base64
imageToBase64($img_path);
}
else {
if(callbackObj && callbackObj.failure && callbackObj.failure instanceof Function) { // Custom failure handler
callbackObj.failure.call(undefined, callbackObj.args);
} else {
alert(respObj.error);
}
}
}
}
};
xhr.send(formData);
pega.util.Event.preventDefault(e);
};
var showUnsupportedException = function() {
alert(gStrFeatureNotSupportedInBrowser);
};
var setImageDimensions = function() {
if(this.style.height == "") {
this.style.height = pega.util.Dom.getStyle(this, "height");
}
if(this.style.width == "") {
this.style.width = pega.util.Dom.getStyle(this, "width");
}
};
/***********************************************************
* Script for converting image src to base64 path
* xhr to be implied
***********************************************************/
function imageToBase64(imgpath){
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataUrl(imgpath, function(myBase64) {
var element = CKEDITOR.dom.element.createFromHtml( "<img src='"+ myBase64 + "'/>" );
editor.insertElement( element );
$(element.$).on("load", setImageDimensions);
/*********************************************************************************************
Added Logic to post and update the image src in clipboard
* Acheived the parent IFRAME
* Achived the Dynamic Section name
**********************************************************************************************/
var editorIframe = $(editor.container.$).find('iframe');
var Section = editorIframe.closest('div[objclass="Rule-HTML-Section"]');
var sectionName = Section.attr("node_name");
var options = {
section: sectionName,
event: window.event,
submitOnRefresh: true
};
pega.api.ui.actions.refreshSection(options);
});
}//imageToBase64 ends
} ,// END of init
buttons: ["ImageB64Upload"] };