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) === '<' && code[i].innerHTML.substr(code[i].innerHTML.length - 4) === '>'){
code[i].innerHTML = code[i].innerText;
}
}
});
</script>
Then in the CMS, add your minified HTML to paragraphs and it should render HTML!
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?
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:
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.
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(/</g, '<').replace(/>/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(/</g, '<').replace(/>/g, '>');
// Parse the content back
n.innerHTML = decodedHtml;
};
})();
