Draggable property added in the final HTML text components
Question
This bug is also on the online demo : https://grapesjs.com/demo.htmlAdd a Text Block to the page, start typing and hiting enter to make several break lines.Unselect the block.Double click on the block to start editing again. Now if you click on the "view code" button, you will see that the HTML nodes inside the Text Block have some draggable="true attributes. This always occure at step three. The first time you edit the text and add break lines, everything is fine, as long as you do not want to edit the block again later. The problem is, in the final HTML displayed on a website, these attribu...
Answers (3)
Ok I'll try to check this out
@alexiswbr using the below snippet, the `div's will become br`'s as the expected behaviour:
I use such way to prevent transformation to component and keep original html. Just override component that you need, for example text or create new. Maybe it's not good solution, but it works :)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3579
RTE misplaced when opened right after dropping `activeOnRender` component
Version: 0.17.4 Are you able to reproduce the bug from the demo?[x] Yes[ ] No Steps to reproduce:Go to the demoDrop a "Text" block inside t...
Issue #6152
CSS added via custom code persists after custom code component is removed
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? any Reproducible demo link https://grapesj...
Issue #5888
Cannot edit component content even with editable property set to true
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome V124 Reproducible demo link https:/...
Issue #4383
A "." character is injected when inserting two whitespaces when editing any text component in grapesjs
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://grap...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.