3,464 parsed GitHub issues — 370 solved · 90 open. Search, filter and explore battle-tested answers.
644 issues found
🔍 componentsHello, I'm trying to get TinyMCE to work as an editor in a modal instead of inline. I am able to get the selected components html with target.getEl().innerHTML but this doesn't include any styling. When setting the content back with replaceWith(html) all styling is lost on the component. Is there a way to update/repla...
Ju99ernaut
You can use this to get a component and it's style;
Text imported directly to the wrapper is not removed from the canvas with the component. To verify one can import simple texts multiple times to the demo and watch how they combine instead of replacing the previous one. Adding this seems to help: editor.DomComponents.addType('textnode', { model: { removed() { var el =...
artf
I don't follow your example, can you illustrate exact steps to reproduce, please?
neon12345
Go to the newsletter demo at https://grapesjs.com/demo-newsletter-editor.html and use the "Import template" function with simple text like "hello" but no html (or combine it with html and text on the root level). Repeat this and the text o...
artf
Thanks @neon12345, I was able to find the issue and it should be fixed in the next release
The output of "JSON.stringify(editor.getComponents())" shows that the src of an image is stored twice. { "type": "image", "void": true, "status": "selected", "content": "", "attributes": { "id": "iy3c7", "src": "data:image/png;base64,..." <--- 1. }, "src": "data:image/png;base64,...", <--- 2. "activeOnRender": 0, "ope...
artf
@longdoan7421 I think we can delete it in toJSON method when the src is equal to attribute.src and ensure is loaded back correctly on load
longdoan7421
Hi @artf, I just took a quick look through ComponentImage. I think it is possible to drop the src property in image model and replace the code which use src in ComponentImage and ComponentImageView with the attribute.src. But I am not sure...
Hi. First of all, awesome work with grapesjs. Had a feature request which may greatly improve usability for users. While grapesjs does allow to categorize components like these: It will be great if there is support for searching components to import and import them (a normal filter from the sidebar would also do). Thi...
artf
Hi @tvvignesh for sure it makes sense but as you know UIs related stuff are highly arguable so it requires a lot of code to make it as much customizable as possible. So far, I've stopped adding UI stuff in the core and started making it mo...
tvvignesh
@artf Thanks for your inputs on this. Will try implementing using Blocks API. Just one question though. Since I would like to add blocks in the location where the cursor is by searching for the block as in the screenshot, may I know the re...
We can reproduce the bug from the demo Current Behavior: Expected Behavior: We should not be able to drag/move components when in preview mode.
artf
Will be fixed in the next release. For now, you can patch it on your own, in this way:
Hi,I'm beginner in grapesjs. I want to make a question number by for loop when I dropped components, ↓I want final like this image. the div can show for loop number. ↓my component's code In render, I divided the my default html questionCom from {{i}} into front and back. then,put them in render. {{i}} can perfect to s...
artf
Use the questionCom you're passing to the model (use model to update model related logic) and I'd suggest using API from the Components documentation (eg. textType.view.extend is the old one)
Hi, I've noticed that some form components (like checkbox, radio and select) are not working when gjs is initialized with the Preset Webpage Plugin like in the example below: You can confirm this issue with the online Webpage Demo too https://grapesjs.com/demo.html Expected Behavior: can select all of them normally (o...
artf
Ah ok, now I got it. Yeah, forms plugin avoids some default input behavior, so it's intended. I agree that in the preview mode those behaviors could be re-enabled but I think that part might be integrated as a plugin (eg. by using event li...
RJCAM
Hum...ok, I'll try to do that, thanks for the help :+1:
artf
After rebuild the plugin the behavior works as expected, so problem resolved. Maybe there is a reason why I've done that?! 😅 Via plugin, you can simply extend those components and override handleClick function with your logic, where you p...
I have encountered an error, when I drag and drop the mouse out of the component. The component is selected locked like the rest of the components. i have a video with the bug: https://recordit.co/rY5U9TmR7b
Hi, We are using some Twig template features in our grapesjs implementation. like: {% if variable == "value" %}<b>text</b>{% endif %} But due to the toHtml() function in src/dom_components/model/ComponentTextNode.js this gets converted into {% if variable == "e;value"e; %}<b>text</b>{% endif %} Is there an eas...
artf
Yeah sure, you can extend the textnode component and use your toHTML function
Hello @artf , For free dragging, we are using dragMode: 'translate'. When we're moving all components from bottom to top position, it remains some blank space at end of the page and browser shows scroll, although we don't have any content at end of the page. See screenshot - For better understanding, you can watch the...
artf
This is how translate mode works, the absolute mode doesn't leave any empty space