Hi all! I'm trying to initiate several editors in the same window. I think almost everything is working great (edition, saving, adding components, etc), but when I open "view code" modal, I see css duplicated. Doing a little research, I noted that inside method loadModule, there's a line "if (Mod.onLoad) this.get('toL...
artf
Thanks @kevinalvarez probably I got where the issue is, I'm gonna push a fix soon.
kevinalvarez
Thanks @artf ! I made the change and now it's working as expected. We will wait for the release.
lock[bot]
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.
Hi @artf, I have updated the image src using below code: editor.getSelected().set('attributes', {'src': image_Url}); but when i set all the html using below code: editor.setComponents(templateHTML); then image src not updating in HTMLcomponent. Please let us know about the same.
ryandeba
Hi @Deepak813, I'm not sure where templateHTML is coming from in your example...is the src on your image set correctly in that variable? In any case, selecting an image and running this code seems to work fine for me in the demo: editor.ge...
artf
@Deepak813 as already mentioned by Ryan you have to use editor.getSelected().set('src',image_Url)
AkibDeraiya123
@ryandeba @artf Is there any possibilities to change other attributes of image like class, id etc? I had tried with like, But this seems not working in my case. Can you guys please help me how can i change other attributes of this image ta...
Hi. I wish a text component that do not create new components every time I press "Enter" key to create new paragraphs (this is a bad usability). In addition, the actual text component from the core of grapes has a problem (described in the screencast below). Thanks in advance for your attention!
Moikapy
Not sure if I found this code in an Issue on here or on Stack Overflow, but this code here replaces the Divs with a <br/> when you press the enter key. I placed this code in the same file as my grapes-config
ryandeba
I looked into this myself a few days ago...apparently there's an insertBrOnReturn option for execCommand, but the browser support is terrible. A solution like this is probably better. @artf How would you want this to change? Should hitting...
gabrigcl
I've found a solution to my needs using CKEditor and overriding the native "text" component creating my own. My text component now is a div with a css class that identifies the component: Now, typing ENTER does not create a new component....
I would like to use ES6 classes in the components script attribute. When I drop the component onto the canvas the error message "_classCallCheck is not defined" appears. Component code: Error message:
punkt2
I solved the problem. It turns out babel is transforming the javascript class and calls the helper function classCallCheck which is not passed to grapesjs. In the latest version (7) of babel, you can enable the loose mode for the transform...
lock[bot]
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.
Hello, editor.getComponents().add('<div class="grid-stack" style="height:800px;"></div>'); adds multiple times when refreshed, how stop this. it should add only once.
artf
well if you add, the editor stores the template (local/remote), after refresh editor loads it and you still use add... well, it's a correct behavior.
I have question about injecting script js into GrapesJs. Can I adding <script> into grapesJS using function editor.getComponents().add() and not injecting using javascript. document.createElement('script')
artf
@wvaymen sure, but you have to enable script importing before
lock[bot]
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.
Hello , As per the document , // Change background of the wrapper and set some attribute var wrapper = domComponents.getWrapper(); wrapper.set('style', {'background-color': 'red'}); wrapper.set('attributes', {'title': 'Hello!'}); Can we set a class to wrapper. Please let us know how to set a class to the root componen...
@artf , Thanks for the reply. Can we do editor.DomComponents.getWrapper().addClass('wrapper') in the release 0.10.7 Thanks.
suchithmahadi
Sorry to bother you, Because when i tried in version 0.10.7 it is giving a error [Error] TypeError: wrapper.addClass is not a function. (In 'wrapper.addClass('wrapper')', 'wrapper.addClass' is undefined) Global Code (index.html:4474) And o...
So the wording of this may seem confusing, but essentially I'm trying to use gjs-droppable="" the same way one would use gjs-draggable="". So if gjs-droppable="li.feature" was set on <ul>, then only items matching the selector could be dropped within the <ul>.
austinbiggs
This already works as detailed above, I just had an error in my code originally preventing it from working correctly!
lock[bot]
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.
What I'm trying to achieve: I have special "data-" attributes on some of the components I pull into the editor. When one of these is modified, I want to get the value of the "data-" attribute and the new content. I have code listening to when a component is modified. When this event fires, I'm checking the content (wo...
artf
Hi Austin, the reason behind your issue it's just because the built-in RTE works differently from a custom one (eg. CKEditor plugin) which just writes all changes inside content. https://github.com/artf/grapesjs/blob/dev/src/dom_components...
austinbiggs
I’ve been digging through more code and from what I can tell, this doesn’t happen in when using the CKEditor plugin (tested using the newsletter demo). However, when using the default RTE it does occur (tested on my own code and the websit...
lock[bot]
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.
After update the component attributes using editor.on('component:add',function(){}); The blue box item(it mean the action icon) is not correct. The copy icon should not show. Javascript var hasClass = function(model, className){ return model.get('classes').where({name: className}).length; } var updateProperty = functi...
artf
@tommywulove ok I close this then @ryandeba As you already mentioned the toolbar is created when the component is initialized so, honestly, I don't see it as a bug and overall, your snippet should work well. BTW thanks for your willingness...
ryandeba
Hi @tommywulove, I believe the "blue box item" that you're referring to is the component toolbar. All of the toolbar buttons are created for each component as that component is initialized; changing a property (like copyable) does not auto...
TWCM
Hi @ryandeba , Thanks for your reply. I found that the component:add event is not suitable for my case, so i used component type to solve my problem. I updated the component type and added some new component type to control which action ca...