Import custom code into rich text field

Design help CMS
1

I have lots of custom HTML in my blog. I’m having to separate it to get around the 10,000 character limit on custom code elements.

image 1
image 11122×325 22.6 KB

Is there any way around this?

Secondly, is it possible to import custom code into a rich text field?

Here is my public share link: LINK
(how to access public share link)

2

Custom CSS and JS can be hosted somewhere and referenced.
Custom HTML would need to be embedded in an IFRAME or AJAX-included depending on your use case.

3

Are there any resources available you can point me towards?

I would need Custom HTML for the ‘Post Body’ part of my blog only.

I would be happy to host that elsewhere, but not really fond of using an iframe to embed it.

Thanks

4

I can’t think of any Webflow-specific AJAX references.
Read up on the fetch api;

fetch('https://example.com/otherpage.html')
  .then(response => response.text())
  .then(html => {
    document.querySelector('#container').innerHTML = html;
  })
  .catch(error => console.warn(error));

I’ll add though, it’s very unusual to pull external HTML into a Webflow site. There is probably a better way to achieve whatever it is that you’re trying to do. You might consult with a dev first before you go too far down this path.

5

Yes I was hoping for a simpler solution :grinning:

6

That’s about as simple as it gets.
Both IFRAMEs and fetch() are part of the browser’s security model too, to make sure e,g. you’re not embedding someone else’s login form in your page.

Man, the hacking opportunities that would afford…

I’m still perplexed though on why you’d want to pull in static chunks dynamically. The whole point of Webflow is design and delivery. You should be able to accomplish what you’re wanting to do using basic page design and the CMS.

7

That HTML route is the ideal solution for my old blog posts imported from Squarespace, but I’m open to utilising a different approach going forward.

As far as I know, within the CMS, I can only use the following select elements (in the Post Body rich text field):

image

Nowhere near enough editing capabilities with that method.

If you’re saying I could somehow create the blog post body as an actual page using the main page builder, and then reference that page from within the CMS - that would be interesting. Is that possible?

8

The HTML Embed option there lets you place anything, and the typical approach is to use extension libraries like Finsweet’s powerful rich text, Refokus rich text enhancer, and Sygnal’s nested lists to build out the feature set you want.

Up to you what you do, but if it were my site, I’d want some consistency in formatting and presentation, and that will be difficult to achieve with big chunks of external HTML tossed in.

Well, sure you could, using JS fetch() or an IFRAME, but again you’ll have downsides when you’re hacking in workarounds like this.

9

Thank you for these.

I have looked through the documentation - it seems as though they allow you to add classes and ids more easily to simple elements like headings, paragraphs and images.

Perhaps they can do more - I will install them shortly to test.

What I’d like to do is create my own HTML element, for example a call to action banner:

<div class="cta-section">
	<div class="cta-container">
		<h3 class="cta-heading">ADD YOUR OWN HEADING HERE</h3>
	</div>
</div>

Then if there was some way to add that snippet to the Post Body field (using the add element menu in my screenshot above), and it also allowed you to change just the text part - to add your own heading.

Alternatively, I could create this section in the main page builder, and save it as a Component. Then from within the Post Body, I could add the call to action banner component, but again, allow the text part only to be changed.

Do you know if either of these are possible?

Thank you again for this help I really appreciate it.

10

FS PRT has a concept of “components” which refers to a chunk of elements that can be cloned and pulled into the rich text content where you write e.g. {{ CTA }}.

I don’t know what it supports in terms of variables, but if your heading text is coming from the CMS item then absolutely. You’d put your element block at the bottom and CMS-bind it, then reference it in your PRT-enabled rich text as much as you want.

I used this for CTAs as well, perfect application. Product references is another good one.