RSS Feed
Hi Shaun, I think it should not be that complex to implement if you read how Components and Traits work. It should be something like this (take it as a pseudo-code): then add a block to let users drag it in the canvas
Read full answer below ↓Question
Hi!
I have a question, I searched but couldn't find an answer, is there a component that pulls in an RSS feed and formats it on the page. MailChimp and Campaign Monitor do this, here is an example feed: http://www.homecaredaily.com/feed/ I realize some of this is done server side, but just looking to see if anyone has tackled this before or some guidance on this feature. Thanks!
Answers (2)
Hi Shaun, I think it should not be that complex to implement if you read how Components and Traits work. It should be something like this (take it as a pseudo-code):
editor.DomComponents.addType('rss-feed', {
model: {
defaults: {
total: 10, // eg. how many feeds to render
feed: 'https://.../feed1', // default feeds to render
traits: [
{
type: 'select',
name: 'feed',
changeProp: 1,
options: [ 'https://.../feed1', 'https://.../feed2' ],
}, {
type: 'number',
name: 'total',
changeProp: 1,
}
]
},
init() {
this.listenTo(this, 'change:feed change:total', this.refreshContent);
this.refreshContent();
},
async refreshContent() {
const { feed, total } = this.attributes;
const parser = new RSSParser(); // eg. using https://www.npmjs.com/package/rss-parser
const feeds = await parser.parseURL(feed);
const result = feeds.items.slice(0, total).map(item => `<div>
<h1>${item.title}</h1>
<p>${item.text}</p>
<div>`);
this.components(result.join(''));
}
}
});
then add a block to let users drag it in the canvas
This is amazing, thank you so much!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1135
[Question] Two html tags as one (link/button)
Is it possible to have two elements (div and lnik) and consider as a single? For example: there is the my following link block: <div class=...
Issue #3285
[Question]: Doctype in the canvas iframe
Hi. This question has already been asked twice (here and here) but has never got an answer. Is there a way to add <!DOCTYPE html> as the be...
Issue #3541
[QUESTION] What is the idiomatic way to append and remove classes from components?
Hey there 👋 Love the editor! We're using traits to modify what classes a component has, but that feels a bit hacky as you have to redeclar...
Issue #3188
Custom Block for component - your opinion?
Hello, my team developed this custom block for GrapesJS. <img src="https://devfuture.pro/wp-content/uploads/2020/12/GrapesJS-Preset-Webpage...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Tutorial
Preset DevFuture 2.0 — New Update Released
Preset continues evolving as a clean, production-ready starting point for building visual editors powered by GrapesJS
Tutorial
AutographJS - Signature Solution for Modern Web Editors
The Problem: Signature Capture Is Still Harder Than It Should Be
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.