What is the way to generate component with external javascript?
Creating a Component (check also how to create them with js) will give you more control (eg. adding your traits), but in your case, if you just need a draggable element you can wrap it inside such a div
Read full answer below ↓Question
It seems I should not ask such question, but I did spend a lot time to search, could not get a good guide on this.
I want to create a FB block, it contains a few DIV tags, and a script that load FB sdk, and render the content into the DIV tags.
<div id="fb-root"></div>
<div class="fb-page" data-href="" data-tabs="timeline"
data-width="425" data-height="525" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="{??}" class="fb-xfbml-parse-ignore">
<a href="{??}">{??}</a>
</blockquote></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));
</script>
I first create it as a block in my plugin, but found out traits is on component level, so I had to create a component for it. Am I wrong here?
When I create a component, I am not sure where to put the script?
thanks
Answers (2)
Creating a Component (check also how to create them with js) will give you more control (eg. adding your traits), but in your case, if you just need a draggable element you can wrap it inside such a div
<div class="fb-wrapper" data-gjs-droppable="false">
<div style="pointer-events: none;">
... fb stuff
</div>
</div>
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1895
[QUESTION] Drag component over canvas with script, script appended multiple times.
Hi, not sure if this is a bug or not. But I noticed a weird behavior, when I drag a block that has a component that contains a script funct...
Issue #1545
[Question] How I Get ID From Block?
Hi, i have my block and I get print in Div id results from my javascript class component... How i get ID from my block ??? editor.BlockMana...
Issue #1043
[Question] Should I always save the CSS? (and other questions)
First, thanks a lot for this! It's an amazing piece of software. I've been playing around with grapesjs, and few questions popped up, would...
Issue #2061
[QUESTION] How to place a component at the end of the canvas.
How can I put my footer at the end of the canvas? I want the editor to not allow placing a block/widget below the footer. example
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.