[Question] What is the way to generate component with external javascript?
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...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.