I have tried this solution https://github.com/artf/grapesjs/issues/1819#event-2158016066 But on custom components Let's say, i have a mixture to two text input and a button, How do it specify attributes ngModel to both two text input?
artf
Create a custom abstract component with ngModel and then just use it when you need it
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.
I have two questions.Is there any way to change the built-in components name? I wanted to change the name "Box" to "Div". so the same name appears on select and on the layers/navigator panel. In simple term, if I drag and dropped a div, I need it to be named Div.Any way to add an icon in front of the text of each item...
NicoEngler
You can use data-gjs-custom-name on your components html. <h1 data-gjs-custom-name="Your Name" ...>You can use data-gjs-icon on your components html. <h1 data-gjs-icon='<i class="fa fa-arrows"></i>' ...> Please change your title to somethi...
artf
I'd add that if you rely on HTML5 drag & drop, you can use canvas:dragdata event https://grapesjs.com/docs/api/editor.html#available-events This allows you to make the editor understand "external drops", eg. by default GrapesJS can recogni...
minuwan
@NicoEngler Any other way to set default custom names for each type? If someone drag and drop content from outside, I want to display those div's names as "Divs" as well. :)
I have downloaded the grapesjs-webpage-preset and I want to customize it according to my requirements so I've added my own html and style in the index.html file to make that UI customizable. Now, how can I make a div in my html code read only. I tried adding data-gjs-editable="false" data-gjs-removable="false" to the...
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'm facing a very strange issue related to HTML5 drag & drop. When I select some mixed contents within grapesjs, including editable text contents and the surrounding components as a whole selection with the mouse, the dropped (copied) contents is sometimes "null" (a string carrying the "null" text value, no...
artf
Thanks for the report @arachnosoft BTW I'm able to reproduce it, but only once the first CKEditor instance is activated, can you confirm?
arachnosoft
Yeah @artf , seems to be the exact test case... If I refresh the page to get a clean context, empty the canvas, drop a Grid component (quite complex one), select some of its text and surrounding cells WITHOUT activating CKEditor, and drag/...
artf
I noticed that a new CKEditor instance was being created into the DOM each time a new component is edited, even though the CKEditor plugin uses CKEditor's inline() method. I don't know if this is "by-design", or if it could explain that ki...
Hi, I have a question about how to exclude HTML from editor->getHtml(). My structure is something like that. ParentChild -- Child --- Child I want to save the HTML from the last Child. How to do that?
abozhinov
This is my solution: domc.addType('layout', { model: defaultModel.extend( { defaults: Object.assign( {}, defaultModel.prototype.defaults, { removable: false, draggable: false, droppable: false, badgable: false, stylable: false, highlightab...
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 , Thank you for this great library , i am working with a newsletter system that get content from the database and generate the latest articles in the site , i created a dynamic block with dynamic type that has source setting , when the user add the source it send a request to the url and it should get the conten...
artf
You don't need to extend the model in this way you can just update the toHTML method if the current instance, eg.
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.
We are using grapejs to create webpages. We are doing some back end manipulation of the json to link each child of the html (usually a row) to a record in our database. To that end, I've added a trait to every component called custompk. Upon saving the grapejs, I loop through the first level of components and add a re...
artf
Create your own trait https://grapesjs.com/docs/modules/Traits.html
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 I created very simple skeleton of GrapesJS editor. HTML template: Javascript: Result of loading: As you see, component is not rendered. But if I drop blocks manually, everything is ok: If I change template and set data-gjs-type attribute to <test-tag data-gjs-type="test-component-type"></test-tag> value, everyth...
artf
There are 2 issues:You forgot to specify isComponent (used in the parsing process)Currently, new component types are not working for the initial template, so the only way is to add them via plugins (I didn't find time to see why it's happe...
a-bashtannik
@artf , thank you for your answer, but I alsotried also construction with isComponent defined but with the same result. whatever, I implemented this feature via plugins as you mentioned. Have no idea why new component types don't work too,...
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.
I am integrating GrapesJs in react application. I am using npm packages "ckeditor": "^4.11.2", "grapesjs-plugin-ckeditor": "0.0.9" import React from 'react'; import { connect } from "react-redux"; import GrapesJS from 'grapesjs'; import CKEDITOR from 'ckeditor'; import gjsCkEditor from 'grapesjs-plugin-ckeditor'; clas...