Hi All, More of a general question of if anyone has managed to make the whole canvas (or in fact the wrapper) a Vue element, meaning that you could drag some a custom div like '<timer></timer>' and it renders correctly? I've attempted this, I made the wrapper the vue element (el), and it did work when 'importing' HTML...
adamwpe
Thanks @noogen for your detailed reply. Yh, think you are right and stick with components - I'm not too sure if the ToHtml if the right solution is for me or not, because I don't want to manage two types of system, on rending correctly wit...
noogen
My answer is to best stick with custom scripts. I've done custom components using lodash template here: https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/index.js#L2. A string is expected from thetoHtml method - https:/...
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...
In advance, thank you very much for this powerful tool, I want to comment that I have a website with several html views and access each one from the navbar, can I open several tabs of Webpage Builder to edit each one of these views separately ? Thank you very much for your attention.
dilancastillo
Hello @pouyamiralayi , your explanation is very helpful and I thank you very much for the support
pouyamiralayi
Hi @dilancastillo here is how to implement a multi page scenario: #1331 comment Cheers!
I'm new with Grapejs. Firts time i use, it look awesome. So, how can i replace cdn fontawesome with css/js file from my own computer without need to use internet ? I live in country where internet is a big problem for me to use something. Sorry for my english.
noogen
@adeguntoro Take a look at this: https://github.com/artf/grapesjs/blob/8b315e4ba053043889456fcc4048c4f504257551/src/editor/config/config.js#L152 Pass in your config with cssIcons property of '/localpath/css/font-awesome.min.css` to overrid...
Hello! I'm trying to add custom component type: And also I'm adding new block: But when I drop this block on the canvas the <td> tag doesn't appear on canvas and DOM. If I remove isComponent function from component definition, it works as expected. Could I get help with this?
artf
@kuhelbeher your code is correct (except is extend: 'cell', and not extends: 'cell',), unfortunately, there is a bug (or a bad logic) applied on the row component, so, for now, I'd suggest adding this as a patch: and now it should work: ht...
noogen
@kuhelbeher because your component is a table per your content definition above and not a td as defined in your addType of tagName property?
kuhelbeher
@noogen I don't think the problem is with this. I tried to define component and block like this: But the problem remains - td tag (and all what is inside of it) doesn't appear on canvas, Maybe I'm doing something wrong? I am trying to crea...
Hello, I'm trying to create block with background image (similar to Grapedrop Image Box). I added new component like this: And also I added block: But unfortunatelly I cannot drop any block inside of it: Grapedrop Image Box has the same issue. Is it possible to drop elements inside of such compoent?
kuhelbeher
@noogen Thanks for advise, implemented it like this:
noogen
@kuhelbeher because, ultimately, it is still an image. It's not for use/override the way you want because in the back-end code (look at both image component model and view) https://github.com/artf/grapesjs/blob/dev/src/domcomponents/view/C...
I have integrated the code edit option in the Web builder.Using editor.getHtml() to get the current HTML content and populate in the code editorWhile saving the code from the code editor, I am using editor.setComponents() to set the edited content to the builder canvas. IssuesOn Saving the html from the code editor, i...
pouyamiralayi
@jenter #1331 comment and #2644 comment are good examples. Also checkout #2664 comment which is a pitfall to avoid! Cheers!
noogen
@sathyanarayananaCES First, to echo others that it is best to use get/setComponents and get/setStyle to save the content of the editor. If I understand your usage correctly, that you want HTML for htmlCodeEditor and be able to import back...
pouyamiralayi
Hi @sathyanarayananaCES you must call `editor.getComponents and editor.getStyle in order to retrieve the components details; then you can return to the stored state by calling editor.setComponents and editor.setStyle` with the result of ab...
Hi All, I'm trying to test adding some custom Vue.js components to the block manager, and at first appearance, all is well - it renders correctly and vue components are responsive. But if I save the template, and reload my page, and supply the storageManager with 'gjs-style', 'gjs-components', 'gjs-html', 'gjs-css'. T...
adamwpe
@pouyamiralayi Thanks for that, pointed me in the right direction - so he is an example that works for me for rending a Vue Component and it will load back in :), but sure may be useful for someone else: Thanks for the help everyone!
mcottret
Hi @adamwpe ! Script tag importing is disabled by the default editor configuration, which explains why your scripts tags are stripped out by the HTML Parser, setting the allowScripts editor configuration option to true should solve the iss...
pouyamiralayi
@adamwpe we had something like this in the past i apologize for not seeing it through! go like this: there is no need to extend from dView & dModel in the latest versions. and for the vue js integration please notice that the internal stru...
I would like to append the whole style manager module to a panel? I have been digging up the docs for the past 2 days and couldn't find a proper example for this one. I have initialized the GrapeJS Editor panel as empty array to remove all the panels and have a custom panel that is provided in the example as well For...
christianbalderrama
Is there a proper way via grapesjs that I just don't know or it have to be overriden via css
christianbalderrama
pouyamiralayi
Hi @christianbalderrama Inside your initialization config: for the sectors, here is the sectors used inside demo. Cheers!
[Question:] Hi, I have used this builder plugin in angular 7. This is very well structured and extendable. But I have some issue in define custom components this plugin. The Question is How to add Classes to custom DomComponent. I have created new video wrapper dom component. This contains iframe inside of them. I wan...
artf
Can you create a live demo with the complete code of your custom component, 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...