-2

I have one form URL which I rendering using Iframe in Sitecore Rich Text Editor in 'src' attribute as below:

enter image description here

There is one CTA button form that overlapping some of the form text. So to come out that issue I am to update a class attribute in Iframe. example: add Padding-bottom:25px attribute to Class name : Form-Disclaimer.

As we can do it in HTML file using JSS as below:

https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe

Can I do it in Rich Text Editor or how can I achieve this?

  • 1
    Just modify the html via the rich text editor? or am I missing something here? – Richard Seal Mar 25 at 15:33
  • @RichardSeal Yes, I want to modify the Iframe HTML tag class via Sitecore RTE. Any hacks can we do ? – Himmat Singh Dulawat Mar 25 at 15:47
  • The HTML tag inside the iframe? That is not possible, the iframe is a linked document, you need to modify the original page that is linked, you can't set that from the iframe element itself. – jammykam Mar 25 at 16:51
2

The Below Answer, while answering the main question, is NOT recommended!

The short answer here is that OOTB no, you cannot and should not do this via the RichTextEditor. To be able to modify html/css in the target of an IFrame, first the page inside the IFrame must be on the same domain as your current page, and then you would need JavaScript to modify it. If the target page is from a different domain, then you have no options, you just can't change it.

For security reasons, the RichTextEditor strips out any JavaScript entered. You can disable that by changing this setting:

<!-- HTML EDITOR REMOVE SCRIPTS
If true, the rich text editor removes script tags and inline scripts from RTE field     
values before saving. Setting the value to true reduces the potential for cross-site 
scripting and other script-related issues.
Default value: true
-->
<setting name="HtmlEditor.RemoveScripts" value="true" />

But I would not recommend that, as it would disable it for all RichTextEditors in your site.

If you do it, then you could use JavaScript similar to this to modify the target html/css:

var iframe = document.getElementsByTagName('iframe')[0];
iframe.addEventListener("load", function() {
    window.frames[0].document.body.style.backgroundColor = "#ccc";
});

Do this at your own risk!

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.