QuestionsHow can I make a part of my template a component ?How can I set draggableComponents on such a component?If so, then can I stop setting selectable: false, highlightable: false, hoverable: false on the child nodes inside said component?Is it possible to supply a different external link to the component? More ex...
pouyamiralayi
if you want to initialize the editor with some components already placed into the canvas, you need this: cheers.
artf
for the moment grapes has some issue on storing custom components defined outside plugins. Actually, are stored correctly, it's just about loading components that are not recognized because the custom type doesn't exist yet, so this is the...
Jogai
Thanks for the answer and the links. They are really helpful. For this question however I was looking for a way to do this within a template. Currently we dont use the blockmanager, our users only drag stuff around. They never add anything.
Hi guys, I added the custom CKEditor blocks and its working fine. but the actual issues is I can't able to delete, move or add the traits in the CKEditor blocks. I tried all the possible but nothing is work. I really stuck. can anyone please help me. my custom blocks: as you can see the above image that I only able to...
artf
Well, the textarea can't be selected because it's a static element generated from you component's script so it's not part of the editor, it's all correct. If your point is to change internal CKEditor configurations you have to rely on your...
artf
BTW don't do this ClassicEditor.create(document.querySelector('#ckeditor')) in this way your integration will break with multiple components of the same time. I think it would be better for you to update your stuff in this way
Hi, I have a custom component which content can be changed by switching trait select options, but also can be edited similar to the text component type when it is already rendered inside the canvas. Is there an easy way to reset the traits related attribute on edit of a component?
inaLar
@artf, regarding the "Select" I couldn't manage to connect the change in the content and make it work on change of the trait in one flow and also to change it manually by editing it's text/content. The manual change wasn't syncing the trai...
zgover
You could attach an event listener to the content prop of the component, then in the callback fetch the trait or change the value prop of the trait, see example below taken from docs
inaLar
Thank you Zachary1748, but I can't use that in my case. Maybe I didn't explained it right. I have a custom made component. The components content can be changed in 3 ways:When dragged and droped into the canvas (you have a popup with optio...
I'm trying to create slider component which has trait like 'number of slides' and I want to have that trait different for all devices. For example: User can choose 5 slides for desktop and 2 for mobile.
artf
You should update component traits on device change https://jsfiddle.net/artur_arseniev/Lma0pu5v/
hi, Grapesjs is a fantastic bit of software and I've been playing with it for a week or so now. Im struggling a little with the urlLoad. Im using an end point which is returning json as you can see here: How I've read the documentation, is this supposed to load the layout into the canvas? What I'm trying to do, is use...
artf
The result of your endpoint is totally wrong. Read carefully this part please: https://grapesjs.com/docs/modules/Storage.html#setup-the-server You should return something like this: Now, you're returning only components:
Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled with html when the editor is initialized, like below: Prefilled Editor: Create Ordered List: If, however, I drop a new block into the canvas, and then press the ordered list button, I...
thomas1204
From the above comments, I can now add ordered and unordered list. Is there any way to update existing ordered and unordered List ? @artf @rahuloftheramaneffect
artf
Can you create a reproducible demo, please? That error without a stack trace is useless(Optionally) we can use the tab key to indent the lists? You should definitely do it by yourself or rely on something like CKEditor for more advanced te...
rahuloftheramaneffect
Hey! Thanks for responding so quickly.Can you create a reproducible demo, please? That error without a stack trace is useless Here is a zip file containing a stripped down version of my editor page. Demo.zip It includes a bunch of css and...
Hello, I want to achieve this: When user clicks on a heading tag H1, H2, H3 ... I want a trait to appear (of a select / dropdown type) which can allow the tagName of the heading to be changed
TheComputerM
I solved it after scanning the internet a bit. Add this trait
Buddhilive
@hosseinghs try this out. This is same as how @TheComputerM implemented the code before. And it works fine.
hosseinghs
hi, I'm trying to do the same! my problem is when I click one of the options from traits, my heading element won't be updated to new heading! can you help me?
Hi. I have a predefined json of a template which contains a set of html elements and styles which are parsed into the set of components upon grapesjs load. The css contains some of the default media query rules which I'd like to keep for the template. Commands editor.getHTML() and editor.getCSS() return correct values...
artf
Provide a reproducible demo, please
no-response[bot]
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...
abozhinov
I have the same problem. This is my issue -> https://github.com/artf/grapesjs/issues/2843
editor.BlockManager.add('testBlock' + i, { label: 'Box' + i, attributes: { MyAttribute: 'hi'}, content: html }) Can i do something like that ? or i need to use standard html attributes? I tried, but didn't work Thank you.
artf
It works as expected https://jsfiddle.net/90y7wuo8/ Next time create a reproducible demo
@artf hello, I've customized just a little bit your great grapes. Example: I've a background with repeat-x like here: But on custom CSS the result is splitted into repeat-x and repeat-y How I can avoid this? tnx
artf
This is due to your browser's CSS parser (here we explain what is happening). The only solution is to use a custom CSS parser. For now, we provide grapesjs-parser-postcss
pouyamiralayi
hi! when you specify repeat-x only, what result do you expect?
miky9585
If I change into CUSTOM CSS the two rows of background repeat erasing them and replacing with background-repeat: repeat-x, css composer change it for me replacing and splitting into these two lines. So I don't think that issue is on trait...