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

14 Likes

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

1 Like

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?

10 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.

1 Like

Hey everyone,

I recently needed to use spans in my rich text and unfortunately this code wasn’t satisfactory. This snippet works great when you want to use the embedded code only on new lines. My use case was to use it inline as well. And achieve something like this (demo picture):

I ended up hiring a professional and I would like to share the code snippet with the community, so you can have it for free.

This code is more modern, but is not supported in IE:

// Place the snippet in the footer
(function() {
  // w-richtext is used in your html, feel free to replace to your correct one
  document.querySelectorAll('.w-richtext p').forEach(function(n) {
    // Grab the html content of p tag
    var html = n.innerHTML;
    // Replace the entity number globally
    var decodedHtml = html.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
    // Parse the content back
    n.innerHTML = decodedHtml;
  });
})();

If you want to support IE as well use this code snippet:

// Place the snippet in the footer
(function() {
  // w-richtext is used in your html, feel free to replace to your correct one
  var allP = document.querySelectorAll('.w-richtext p');
  for (var i = 0; i < allP.length; i++) {
    var n = allP[i];
    // Grab the html content of p tag
    var html = n.innerHTML;
    // Replace the entity number globally
    var decodedHtml = html.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
    // Parse the content back
    n.innerHTML = decodedHtml;
  };
})();

Cheers!

2 Likes

Thanks a lot @Rosta_Plachy !

Could you please give me the name of the professional you hired? I’ve got some issues with the letters containing accents in French.

Thanks !