Hi everyone,
we have an issue with our sharepoint form:
Our engineers sometimes insert screenshots or big drawings to the rich text editors.
the issue is sometimes it overflows the frames of the RTE in EDIT and DISPLAY mode and we had to fit it inside in EDIT mode via javascript. now when we want to save the file as pdf, it shows the same RTE contents as blank.
I hope someone in this forum has an idea about how to resolve this issue 
Hi @Alireza_Kiaee,
Could you share the JavaScript code you used to fit the images?
Hi Ilia,
below is the code.
fd.spRendered(function() {
console.log('=== Image Container Fix Started ===');
function fixImageContainers() {
console.log('Fixing image containers...');
// Add global styles
const styleEl = document.createElement('style');
styleEl.textContent = `
.k-editor,
.k-widget,
.k-editor-widget,
.k-editor-readonly {
width: 100% !important;
max-width: 100% !important;
}
.k-editor iframe.k-content,
.k-editor .k-editor-content {
width: 100% !important;
max-width: 100% !important;
}
/* Force image container width */
.k-editor img,
.k-editor-readonly img,
[contenteditable="true"] img {
max-width: 95% !important;
height: auto !important;
display: block !important;
margin: 10px auto !important;
}
/* Handle table containers */
td[class*="border-shadow"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Fix editor containers */
.fd-form-field {
width: 100% !important;
max-width: 100% !important;
}
`;
document.head.appendChild(styleEl);
// Handle iframes in edit mode
const editors = document.querySelectorAll('.k-editor');
editors.forEach(editor => {
const iframe = editor.querySelector('iframe.k-content');
if (iframe) {
try {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const iframeStyle = iframeDoc.createElement('style');
iframeStyle.textContent = `
body {
width: 100% !important;
max-width: 100% !important;
margin: 8px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
img {
max-width: 95% !important;
height: auto !important;
display: block !important;
margin: 10px auto !important;
box-sizing: border-box !important;
}
`;
iframeDoc.head.appendChild(iframeStyle);
// Force resize any existing images
const images = iframeDoc.getElementsByTagName('img');
Array.from(images).forEach(img => {
img.style.cssText = `
max-width: 95% !important;
height: auto !important;
display: block !important;
margin: 10px auto !important;
`;
});
} catch (e) {
console.error('Error handling iframe:', e);
}
}
});
// Force resize all images in view mode
const readonlyEditors = document.querySelectorAll('.k-editor-readonly');
readonlyEditors.forEach(editor => {
console.log('Fixing images in readonly editor:', editor);
const images = editor.getElementsByTagName('img');
Array.from(images).forEach(img => {
console.log('Fixing image:', img);
img.style.cssText = `
max-width: 95% !important;
height: auto !important;
display: block !important;
margin: 10px auto !important;
`;
});
});
}
// Run fix initially and after delays
[0, 500, 1000, 2000].forEach(delay => {
setTimeout(fixImageContainers, delay);
});
// Handle window resize
let resizeTimeout;
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(fixImageContainers, 100);
});
// Watch for DOM changes
const observer = new MutationObserver(() => {
fixImageContainers();
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['style', 'class']
});
// Handle image paste events
document.addEventListener('paste', () => {
setTimeout(fixImageContainers, 100);
});
// Ensure the script runs in View mode
if (document.readyState === 'complete' || document.readyState === 'interactive') {
fixImageContainers();
} else {
document.addEventListener('DOMContentLoaded', fixImageContainers);
}
});
Hello @Alireza_Kiaee,
The Rich Text field can't be exported to PDF in Edit/New form using the export to PDF functionality.
You can try one of the alternative approaches:
- Export the Display Form
- Use Power Automate to generate PDF from template
- Copy value from Rich Text field to HTML control, hide Rich Text field, and only show the control in PDF export