Hello everybody How do i open a selector like general as i select the element. I am new to javascript, but i tried something out like this. what iam doing wrong? Thx for help
artf
@ikenderham you were almost there
simplecommerce
I think you can see a working example here in the source code. https://github.com/artf/grapesjs-preset-webpage/blob/6306f45d9de77b5b60f72679717e10e6081e81be/src/panels/index.js At the bottom.
ikenderham
Can you show me a example, if i click on a DIV then i need general to be opened, or when i click on a h1, then i need to open the "typography"? Thanks alot im new to this.
I would like to create a custom assets-manager modal to open in bootstrap modal. I'd like to keep the original assets manager functionality (like drop image zone, input to fetch image from remove, and I'd like to use datatable for the images/assets). In addition, I would like to integrate with Pixabay API so images ca...
PriyankaPrabhu
@kickbk did you achieve the custom asset manager ? If yes please share the code
khoa-justuno
You can do this with a custom modal by overwriting the default image asset manager. When you want to set an image use this.
artf
I'd suggest the same solution proposed by @khoa-justuno If you need a new modal it will be easier to create the Asset Manager UI from scratch, reusing the DOM elements created by GrapesJS, in this case, would be just a pain to maintain
Hi! Is there a way to get general, last editor updates using editor.on('update') event? Something like this: editor.on('update', e => { // get the event // get the specific, recent updates (HTML and CSS) })
olgertpysqyli
Hello. You can declare variables for html, css and js and their value is going to get updated every time when editor change event is triggered. change() { this.html = editor.getHtml(); this.css = edito...
gabd1411
I've found another available event, editor.on('change'), but it seems difficult to read the HTML and CSS updates from this event
Hi! Thanks for the great library! I am using webpage plugin and what I am interested in is editing text. I know that this functionality is already in there and we can edit text by double clicking on it, but how can I do it separately? like having an additional dropdown on the right pane where "General", "Typography" e...
artf
You can add a custom Trait which updates the component content (component.components('<span>New content...</span>')) on input change
@artf I'm wondering if you would be interested in creating an alternative forum for question usage. Most of the issues seem to be question that would be better answered in a chat or forum, or by reading the docs... My issue is that it pollutes the issues section of the repository, when most are support or new user que...
artf
Thanks for the suggestion @verdverm IDK to be honest, we have already the Discord Chat but it's more community driven and I'm not so active there. IMHO I prefer using only one channel for the communication of questions/issues about the fra...
Hello, we'd like to render third party controls. This is a general question and we wan't to know whether we are going into the right direction. To render the controls we are required to use a third party technology (Vue, React, or similar frameworks). Both of the frameworks have one common problem: they are lagging th...
artf
Vue compiles at runtime if you use the version with compiler. Exactly like this component https://github.com/alexjoverm/v-runtime-template As second question I'd like to know whether it is possible to hook onto events from the editor from...
HakuTheWolfSpirit
Hi, thanks for the answer.Vue compiles at runtime if you use the version with compiler. Exactly like this component https://github.com/alexjoverm/v-runtime-template The problem with Vue is that there is not really a method that allows me t...
artf
The problem with Vue is that there is not really a method that allows me to put a string in as parameter and get html as an output. I have asked this question on StackOverflow and hopefully I will get an answer in near time. yeah but you c...
When I include templates inside the <div id="gjs"></div> tags. It appears that GrapesJs ignores the <script> tags, but every other tag like <link> would work pretty well. The javascript functions in the script tag would not be able to work on the editor because of this. My code is designed to readfile and locate the l...
ivanezeigbo
Figured. Sorry. For those who might benefit from this, you have to set allowScript to '1' in init.
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.
General Information I'm trying the the current demo on http://grapesjs.com/demo-newsletter-editor.html. The webpage demo works without a problem but the newsletter demo fails. I am using IE 11 on Windows 10. IE Version is 11.1088.15063.0, updateversion is 11.0.65 (KB4103768).What happens As seen in the screenshot the...
TclasenITVT
@artf thank you a lot for fixing this 👍
shareefhiasat
@TclasenITVT please edit steps to reproduce and add this link Test Browser online check IE 11 online grapesjs link @artf its working on Edge IEs ( version 20 in my case ) Regards
TclasenITVT
@shareefhiasat are you satisfied with the way I edited the steps to reproduce?
I'm playing with the default init to try and remove the deviceManager and ViewCode buttons... var editor = grapesjs.init({ showOffsets: 1, noticeOnUnload: 0, container: '#gjs', height: '100%', fromElement: true, assetManager: { upload: false }, storageManager: { autoload: 0 }, styleManager: { sectors: [{ name: 'Genera...
ryandeba
Hi @PCPLTodd, Here's an example of how you can remove the device switcher and view code button: https://jsfiddle.net/fjkk8w6k/2/
hlo2109
Hi, I know it's late, but this is how I did it right now: editor.Panels.removeButton('devices-c', 'set-device-desktop'); editor.Panels.removeButton('devices-c', 'set-device-tablet'); editor.Panels.removeButton('devices-c', 'set-device-mobi...