GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.38k stars 4.06k forks source link

[QUESTIONS] Custom Code block and JS #1472

Closed detectedstealth closed 6 years ago

detectedstealth commented 6 years ago

Wondering if there is a limitation or is it actually possible to create a block that allows the user of the editor to write custom javascript code as they are building the template? For example drag and drop a custom code block and write the javascript in it?

Example: I created a link and wanted to capture the click event to make an Ajax request etc... I know it is possible to update the editors initialization code to include an external javascript file but ideally we would like this to be handled dynamically in a single place without having to edit settings every time we add a new javascript function.

cjpollard commented 6 years ago

https://github.com/artf/grapesjs-custom-code

detectedstealth commented 6 years ago

@cjpollard that block doesn't work with JavaScript.

https://github.com/artf/grapesjs-custom-code/blob/master/src/index.js#L30

cjpollard commented 6 years ago

That just means you won't see the code, but you get something to see and click on to edit it. The JavaScript itself is there and works just fine.

detectedstealth commented 6 years ago

@cjpollard I really wish that were true as I assumed the same thing but it doesn't work that way unless there is a bug with the plugin...

https://cl.ly/23c165b58e76 https://cl.ly/e9633b822f30 https://cl.ly/36a3196ee8a1 https://cl.ly/82afe4abf0e3

So unless it is saved somewhere completely different in the data that is stored remotely I have no idea what is going on. It completely wipes out the code.

The code written is never even sent to the server to be saved either. Which could be related to this: https://github.com/artf/grapesjs-custom-code/blob/master/src/components.js#L83

But by the sounds of it you have used this before and have it working? Care to share an example maybe I'm missing a setting somewhere? I used the web site demo as an starting point. You can even try it in the live demo: https://grapesjs.com/demo.html add the custom code it shows the placeholder text, refresh the browser and it shows "Insert here your custom code" and what you typed before is gone.

cjpollard commented 6 years ago

Try grapesjs.init({ allowScripts: 1, ... });

detectedstealth commented 6 years ago

@cjpollard thanks that is the missing setting the code block is working as I hopped it would now.

artf commented 6 years ago

@cjpollard 👏👏👏

lock[bot] commented 5 years ago

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.