#2388November 7, 2019by asieraduriz3 answers
My situation: I'm slowly importing some of my custom made UI components in ReactJS to GrapesJS. Now, I am able to render the component properly by integrating it with Backbone. But my question is, can I use <link tags to download my own custom styles, so that I can see them properly within the canvas? I have tried doi...
asieraduriz
Hello @pouyamiralayi Thanks for the quick answer. However, this would seem that won't be sufficient, since what I'm looking for is a way to see my rendered component with the styles that I want, but also, if I export the project, to includ...
artf
Just init the editor with your <link> inside the template, it will be loaded in the canvas and you will be able to see it in your export code
pouyamiralayi
Hi @fasaas you can inject your global styles this way: the same goes for your custom scripts. more on this here cheers!
#2387November 7, 2019by rlopzc3 answers
I'm trying to use defaultCommand: 'open-blocks' but the style manager is the default selected one Thanks!
pouyamiralayi
thanks @naveen-15697 your solution works pretty awesome! well done. @romariolopezc does this suit your situation? as suggested by @naveen-15697 you have to go like this: and the button ids for `views` panel are:open-smopen-tmopen-layersope...
naveen-15697
@pouyamiralayi it doesn't behave as expected.If I use editor.runCommand('open-blocks') on load, the components icon is not selected. Is appended to the bottom of the style manager Here the screenshots @romariolopezc , Instead for running t...
rlopzc
@pouyamiralayi @naveen-15697 it works!! I use it outside of the load, after initializing grapesjs. If I use it on load then I see a small delay when changing from the style manager to open-blocks. If its after the .init({..}) then when it...
#2386November 7, 2019by navewi1 answer
I can't figure how to add line height to ckeditor. I read the documentation from ckeditor and did all the steps they're providing to add the ckeditor-plugin, but the icon ist not showing in toolbar and I am not even sure if the line-height plugin ist loaded. Can somebody help me or added a plugin to ckeditor within gr...
navewi
Okay Nevermind. I had an character mistake "=" instead of ":" in the config. For everyone with the same problem: To add a ckeditor plugin in grapesjs add the extraPlugins Command in the plugin options in the init function: [....] 'grapesjs...
#2384November 6, 2019by rodenp3 answers
I would like to be able to add extra functionality to the drag and drop of components, so as to allow for easy resizing and repositioning without having to manually go through the panels on the right side of the screen. Can you please provide some guidance on where in the code base to focus on? Has anyone else done an...
pouyamiralayi
allow for easy resizing you can add `resizable: true` to your component type definitionfunctionality to the drag and drop of components you can apply this on either the editor or an specific component: cheers!
rodenp
thanks @pouyamiralayi for your guidance. Will this also work for things like columns?
pouyamiralayi
@rodenp yes! every component type can use this property.
#2383November 6, 2019by smik33 answers
Fiddle replicating the issue: https://jsfiddle.net/gd8mo3e4/1/ I have a custom component for creating a gallery of pdf documents. There's a custom asset manager that opens when the block is dropped into the editor, to allow you to choose the pdf which then changes the thumbnail. The issue that i'm having is that on a...
smik3
The thumbnail/image which it puts into the editor should be scaling to fit the container. I'm seeing it at original size on first-load, all subsequent block adds correctly fit whichever column they are dropped into. If you look at the expo...
smik3
A couple of screenshots demonstrating the behaviour I'm seeing... <img width="1021" alt="Screen Shot 2019-11-06 at 11 32 16" src="https://user-images.githubusercontent.com/19346508/68294968-394ba600-0089-11ea-941a-e441d3469c6f.png"> <img w...
artf
i guess this is related to this one and probably this one @artf mmm not really Changing modelThumbElement.setAttributes({"data-gallery":fileName}); to use addAttributes seems to fix it, but I'm not sure what is really happening (I'd expect...
#2382November 6, 2019by adityaMurarka3 answers
Hi guys, I am building a project using grapesjs editor and I want to enable user to build his website easily using the editor. To do so I want as much as blocks avaiilable by deafult to help him do so. Whatever I'll is not there I am planning to build them by myself. So there are basically Presets for the grapesjs and...
adityaMurarka
Hi there! you can specify the list of plugins you want: cheers! Hi pouyamiralayi, I tried your approach but it didn't worked. When i try to import GrapesJS Newsletter Preset I am getting 14 of the blocks and on importing GrapesJS Preset We...
pouyamiralayi
@adityaMurarka i see the problem, i guess there are some conflicts when they all gather together! leaving aside `mjml here is what i did (it only drops a few items): please notice the order of the items, also i tried to include mjml` but i...
adityaMurarka
@adityaMurarka i see the problem, i guess there are some conflicts when they all gather together!leaving aside mjml here is what i did (it only drops a few items): please notice the order of the items, also i tried to include mjml but it s...
#2381November 6, 2019by ColinTenaguillo3 answers
Hi, I would like to add on the grapejs editor a clickable questionmark we can click so we could give information on what does this specific spec to the user. It would open a modal with all the information that we could give when we add the property to a sector. Like you do in the webpage demo.
artf
Currently, there is no documentation about extending/updating style manager properties (I've just realized few plugins like grapesjs-style-filter and grapesjs-style-gradient but is not enough) and in all honesty, what I've done so far (as...
ColinTenaguillo
Here what i made today with a bit of modifications : It's look i wanted now i juste need to find a way to put in the content i want in the modal
ColinTenaguillo
Hey, how can i publish my branch with my modification for a pull request ? This is PropetyView changes i've done I've also add css for these specific modal based on the css of the modal you use
#2380November 6, 2019by varadero3 answers
What we need is to create a page once but translate the text content in multiple languages. Imagine a very simple sample of a single text block saying "Hello" - we don't want to force the users to create another page with that same text block saying the same in different language. Imagine the page must be translated i...
varadero
Closing s duplicate of https://github.com/artf/grapesjs/issues/2342
pouyamiralayi
@varadero i18n module is on the roadmap cheers!
varadero
@pouyamiralayi But isn't that i18n mentioned there just a module that will allow you to translate GrapesJS itself, not the content that the user created ?
#2379November 5, 2019by gentritabazi2 answers
I have build one CMS in Laravel and i used GrapesJS to make Page Builder its perfect, i just created one component for "Posts" so users can select category where wants to select posts also limit. After select or change limit or category a request is made to a request to backend to show me data in JSON and i append to...
artf
@gentritabazi01 here you can use component.components(data.html) this will replace the content with a new one returned from the server
pouyamiralayi
@gentritabazi01 as far as i know, relying on editor storage for your custom data layer logic is not a good idea.I save all page content to database via command of GrapesJS: editor.store().html you can use: above code can be inside init hoo...
#2378November 5, 2019by varadero3 answers
We want to achieve the following:Mark our block HTML elements with some classes like:Add some styles that define CSS classes like:Using GrapesJS style manager we want to change the above CSS classes so we can have a "Container background color" setting which can change the "background-color" of the ".my-container" rul...
artf
we want to remove almost everything from the Style Manager You can change what to show in the Style Manager: https://grapesjs.com/docs/getting-started.html#style-manager and it works based on what is selected in the canvasLet's say we will...
amenk
This is very interesting! @varadero Did you succeed with this and maybe have some code to share?
varadero
This is very interesting! @varadero Did you succeed with this and maybe have some code to share? We ended up providing CSS when we initialize grapesjs. The CSS is created elsewhere, not inside grapesjs builder.