GrapesJS integration with Alpine JS / Custom HTML tags #5272
Unanswered
daniel23ad-pulse
asked this question in
Q&A
Replies: 3 comments
-
interested in a solution for integrating alpinejs as well |
Beta Was this translation helpful? Give feedback.
0 replies
-
There is a change which should add the proper support to |
Beta Was this translation helpful? Give feedback.
0 replies
-
met the same issue, have you solved this? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
While working on a certain project the idea ocurred of using both GrapesJS and Alpine JS.
So, using GrapesJS's Block Manager I added a component type and its HTML to GrapesJS's editor and it works if I use any other HTML that does not use the template HTML tag.
So here, both the first and second components work, as they have fairly simple HTML associated with them. In the third component, as I wanted to pass something more complex and dynamic by using AlpineJS's functionalities, it does not work so well. Apart from that specific HTML template tag, everything seems to be working fine. The only thing is that when I try to render a tag like this in GrapesJS, the only thing i get inside of it is: '#document-fragment'... here is an example:
What I am getting:
![Screenshot 2023-08-03 at 10 30 43](https://private-user-images.githubusercontent.com/141316746/258068273-eed97499-8249-4e02-b369-a055faa4d35e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExODUzNzMsIm5iZiI6MTcyMTE4NTA3MywicGF0aCI6Ii8xNDEzMTY3NDYvMjU4MDY4MjczLWVlZDk3NDk5LTgyNDktNGUwMi1iMzY5LWEwNTVmYWE0ZDM1ZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxN1QwMjU3NTNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zYWNmMWYyYjYyMzIyZDU2YWFiYmMyMzI5OWNlNTM1NGU3NTRhYjZiNzI0M2ZkYzA3OTZiOTFkNjY5NjEyNzY3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.A2Bgnt8gdS9gWTNaoi04FBv_bFRnRFM_Cm0SRFysi90)
What I am passing to GrapesJS (which should render 2 spans inside the template tag):
![Screenshot 2023-08-03 at 10 32 45](https://private-user-images.githubusercontent.com/141316746/258068729-6c513550-fdd3-4fd7-9fa7-dacc8ccada3b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExODUzNzMsIm5iZiI6MTcyMTE4NTA3MywicGF0aCI6Ii8xNDEzMTY3NDYvMjU4MDY4NzI5LTZjNTEzNTUwLWZkZDMtNGZkNy05ZmE3LWRhY2M4Y2NhZGEzYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxN1QwMjU3NTNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jOWM3ZjE5ZDgzZDA4ZWUyNDM4YzNhZDNiM2U2YzY1NDc1ZTI1MDA1MTUyYzM0NzBkYTM4NjQwNjkxNTE4MDBkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.z2vYkJW9V1ei5y_26JTKLYHDanM8byJf-JeDI2vSlr0)
I already tried this adapted to the tag I am having problems with but that way I get an AlpineJS error as it does not allow the development of 'x-for' cycles outside of template tags. Is this something that's possible to solve within GrapesJS or should I complain also to the Alpine JS developers?
Thanks in advance!
Beta Was this translation helpful? Give feedback.
All reactions