Streaming live at 10am (PST)

Workaround for CMS custom code embeds in rich text elements

A feature I’ve been waiting for WF’s CMS is embedding content like tables, code, etc. Some of the workarounds I’ve read about can be really time consuming and hard to keep updated.

So disclaimer…I’m relatively new to Javascript so I can’t say it’s a silver bullet, but I think I’ve created a decent workaround.

I wrote a script that scans an article for paragraphs and looks for ‘<’ and ‘>’. If it finds those, it swaps the innerText for innerHTML, thus rendering whatever is within the carats.

=====
To implement, add the following to your custom code area in the ARTICLE TEMPLATE PAGE:

<script>
/* Morphs any paragraph that is wrapped in '<' and '>' into an embed */
document.addEventListener("DOMContentLoaded", function(event) {
  var code = document.getElementsByTagName('p');
  for(i=0; i < code.length; i++) {
    if(code[i].innerHTML.substr(0,4) === '&lt;' && code[i].innerHTML.substr(code[i].innerHTML.length - 4) === '&gt;'){
    code[i].innerHTML = code[i].innerText;
    }
  }
});
</script>

Then in the CMS, add your minified HTML to paragraphs and it should render HTML!

=====
Here it is in action:
http://cms-embeds.webflow.io/

Here’s the public link:
https://preview.webflow.com/preview/cms-embeds?preview=85c9c166aefe9c10f871263cc036d71c

I hope this helps someone out!

Ohn
ohn.io

12 Likes

@ohnho That is a really neat workaround. I’m sure this will be very helpful for a lot of people!

Great! So this way it’s possible to embed code like Soundcloud or Spotify etc. through CMS? Because the collections fields available are limited. In this way I can just use plain or rich text field and code line between <> are rendered?

1 Like

thanks for the tip! :+1:

1 Like

Use this instead:

<script>
/* Morphs any paragraph that is wrapped in '<' and '>' into an embed */
var Webflow = Webflow || [];
Webflow.push(function() {
  $('.w-richtext p').each(function() {
    if(this.innerHTML.indexOf('&lt;') == 0 && this.innerHTML.match(/&gt;$/) != null) {
      this.innerHTML = this.innerText;
    }
  });
});
</script>

Or even this:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('.w-richtext p').html(function() {
    return $(this).html().indexOf('&lt;') == 0 && $(this).html().match(/&gt;$/) != null ? $(this).text() : $(this).html();
  });
});
</script>

Hint: You can omit the line var Webflow = Webflow || []; if you place custom JavaScript code in the Page Footer or Site Footer.


Looking for code highlighting in CMS richtext field?

9 Likes

Thanks @samliew! That’s a nice update!

I put it into the site footer but it doesn’t seem to work… Has anyone else had any problems?

I just tried the second one and that’s working… not sure the difference but that’s great. Thank you!

Thank you so much! It works great!

Man I cannot believe tables are not in the rich text editor yet. This is a fantastic workaround, best I have seen thus far!

Hey! Thanks for this. This really helped with an issue I was having on my site: https://avocadamama.com — I think I had a pretty specific issue. I am using the collections to have headings that reveal on specific days, and with jQuery have them appear on that particular day. Main reason I have to use HTML is because I needed the <h1>'s to contain links and breaks without breaking the heading class. The issue I was having was that when any of the items were hid on that specific day, the empty default collection p class was creating this extra space. So if you didn’t want the extra p classes and simply wanted the code from the collection, I would put this $('.classname').unwrap(); after @samliew’s code block.

Updated code, just replace .classname with whatever class you assigned to the div in your collection entry:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('.w-richtext p').html(function() {
    return $(this).html().indexOf('&lt;') == 0 && $(this).html().match(/&gt;$/) != null ? $(this).text() : $(this).html();
 });
$('.classname').unWrap();
});
</script>

That’s a fantastic workaround @samliew !!!
Now I can have autoplaying and looping video in the rich text element of my blog.
Been struggling with this for ages.
Brilliant. Thanks so much.