I realize it's not a hard requirement and can be customized, but the main demo and some cloned apps carry this idea forward in restricting certain elements (input, textarea, etc) from being dropped anywhere but a form tag. Was this introduced to show that it can be done or is there something else I'm missing?
pouyamiralayi
once i had a use case that was working with a third party component library. in that library the input and form components was available, but the rendering logic was implemented in a way that if input was not placed in the form tag, styles...
artf
@timsim00 technically you're totally free to reset this logic. I've set this up just because in HTML and CSS world (no JS) having input without a form wrapper it doesn't make sense. So, for example, let's take the input component. In grape...
I am trying to make sure every component drag into the canvas to be wrapped with a column component. To achieve that I use canvas event. First I disabled window event to prevent default html 5 drag and drop event to be fired. canvas:drop event Let's say that my column component is so simple, only a single div. canvas:...
afdallah
@pouyamiralayi I managed to solve the problem by making component as an object. Like so. Anyway thanks for trying to help.
pouyamiralayi
Hello there! the event you are looking for is this editor.on('block:drag:stop', function (element) { element.replaceWith({ tagName:'div', style:{'border': '1px solid red'}, components: [element] }) }) Notice here I am using a red bordered...
Hi Not sure if this is the correct place to ask. trying to load the content of a textarea into this framework. But allot of the links have placeholders within the default html such a <a href="{{placeholder for default url }}" is there a way to render this link within the canvas but leave the original html unmodified?
zgover
Your question isn't completely clear are what you're trying to achieve, but take a look at creating components.
pouyamiralayi
hi! for the select model you may use editor.Modal and as it's content, inject your desired logic for choosing and configuring your widgets. then you can inject the result widget using yourComponent.components(yourWidget) to fill the conten...
danrcoull
Sorry Let me explain take a cms widget such as {{widget name="test" type="\Php\Class"}} Concenpt is to drag a block which opens a widget select model to choose a widget set the options and hit add that generates such as above. This needs t...
WARNING READ and FOLLOW next 5 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.mdUse the GitHub Issues EXCLUSIVELY for BUGS, FEATURE REQUESTS or QUESTIONS. Prefix the title of the issue with its context, eg. [Bug]: ....Do a quick...
Hi, I've created a custom component type, but I am having some trouble making it editable. The component is a "span" with component type "tag". it will contain only text, but I want it to extend the default, not the text component. Any idea how can I make it editable, even if it is not "text".
inaLar
Thank you! I have done something similar, but yours is not so complicated. I've had other events attached to onActive, so I couldn't use it. Now I detached them and I will do as you suggest. About the data-gjs-type - I need it because the...
zgover
What would be your intention and goal of making it editable if you don't intend to extend the text component type? The text component type extends the default type and adds editing capabilities such as the rich text editor. Are you looking...
inaLar
I'd prefer not to use RTE, as I do not need any of its functionality. I only want to be able to edit the content and save it ( by edit I mean - click into the span change the text and save it again). Also the new type will have specific tr...
I just noticed, it is hard to drag blocks/component from toolbox if the placeholder (a line with yellow green color e.g see it in demo online) is just a lign. Is it possible to make the "yellow green line/placeholder" to become a box and while we are dragging the blocks, this placeholder should take up some space like...
artf
You can change the aspect of the line with your custom CSS but you can't move other components around it, the DOM of the placeholder is like a layer on top of the canvas and not between them
FawadOmerEsk
Can you explain this a little bit as to how can we update the custom CSS?
editor.DomComponents.getWrapper().getEl().insertAdjacentHTML('beforeBegin', letBlock) letBlock letblock is a variable that contains HTML. Question:How to remove this adjacent HTML?is there a function like "insertAdjacentCSS()"?
zgover
You touched on a few questions here, but to get to your first in your headline; reference the BlockManager api docs here e.g.
artf
You're mixing too much stuff in one question and without any context
froderf
@artf I just wanted to remove the new block that I added via editor.DomComponents.getWrapper().getEl().insertAdjacentHTML();
Hi @artf , We have created a custom asset manager which is working perfectly for image component. However we are not able to call custom asset manager for background image. Tried to access using this methods var stm = editor.StyleManager; var fileType = stm.getType('file'); stm.addType('file',{ model: fileType.model,...
artf
Hi @sdrebel can you show us your implementation of custom asset manager? If you have followed this you should see it also in the Style manager
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...
Hi @artf , Is there a way to modify the attribute where the classes are placed? (default: class) is there also a way to change the position and tag of the styles? (default: <style>)
artf
Is there a way to modify the attribute where the classes are placed? (default: class) Not really, the only thing you can do now is to extend methods from base components. This is where is assigned in the model (used in the final HTML code)...