Script tag not rendering in HTML page

[hrdkzala]

I created the component as below.

const script = function() {
        const script = document.createElement('script');
        script.src = 'http://localhost:8888/builder/sites/site1/assets/js/jquery-1.12.4.min.js';
        document.body.appendChild(script);
});

editor.Components.addType('comp-with-js', {
      model: {
        defaults: {
          script
        }
      }
    });

editor.BlockManager.add('site_1', {
      label: 'Template 1',
      category: 'Template',
      content: '<div> HERE is my content </div>'
});

site_1 - is my readymade template and it has CSS and javascript.

CSS loads properly with the "content" but javascript doesn't so I created component for javascript.

On the HTML page, It shows the jquery file is added but doesn't work. I checked in view source.

If I made any external javascript file which simply alert("test"), but it doesn't work on html page.

I am using NuxtJS + Grapesjs.

Please advise me about this issue.

[artf]

Sorry but I don't understand where is your issue. You have created comp-with-js component but then you don't show where you are using it... Please, provide a reproducible demo.

[mingxin-yang]

script function don't work after drag the block @artf

[mingxin-yang]

https://grapesjs.com/docs/modules/Components-js.html#basic-scripts

[hrdkzala]

I have already followed it. but my question is that on the frontend where we display the page which is made by grapesjs editor, script/Js not loading.

My page is in NuxtJS.

[mingxin-yang]

I face same problem

[mingxin-yang]

https://grapesjs.com/docs/modules/Components-js.html#basic-scripts

this don't work for me

[artf]

@hrdkzala please create a proper bug issue with a reproducible demo, at the moment, I don't have enough information to help you, and from what I see, components with js are working properly.

[ronaldohoch]

Hello! I'm doing this right now and, by your code, you forgot to set the type of your block, check the way it work:

editor.BlockManager.add('site_1', {
      label: 'Template 1',
      category: 'Template',
      content: '<div> HERE is my content </div>',
      content: {
          type: 'comp-with-js'
      }
});