Streaming live at 10am (PST)

Workaround for CMS Embeds


#1

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


#2

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


#3

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?


#4

thanks for the tip! :+1:


#5

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?


Embed a tweet in rich text
#6

Thanks @samliew! That’s a nice update!


Embed a tweet in rich text
#7

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


#8

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