RTE Overlapping text In Basic Text Component when Width & Height are 100% of Canvas
I didn't noticed that you had closed my previous issue -- with the weird use case. Do you have any suggestions for a work around here? I've been using the updateRte event listener, putting the RTE inside the canvas dynamically is proving a challenge
Read full answer below βQuestion
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 93.0.4577.82 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?... In the official demo, delete everything / start with Body Only in the layers panel ... Add a basic Text Component, so the layers are Body > Text 3 ... Set the basic text component's dimensions to 100% Width and 100% Height 4 ... When you start typing, the RTE has no place to go outside of that element on the canvas, so the editor overlaps the text itsel...
Answers (3)
I didn't noticed that you had closed my previous issue -- with the weird use case. Do you have any suggestions for a work around here? I've been using the updateRte event listener, putting the RTE inside the canvas dynamically is proving a challenge
@mattnoth I already replied to your discussion here, please avoid opening the same issue again.
Thanks for reporting this, @mattnoth. Great question about RTE Overlapping text In Basic Text Component when Width & Height are 100% of Canvas. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for th...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5922
Unable to use UI controls for the video component when
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? v125.0.6422.113 (Official Build) (64-bit)...
Issue #5378
Uncaught TypeError: Cannot read properties of undefined (reading 'Canvas') while dragging a component in Layer Manager Panel
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v116.0.5845.97 Reproducible demo li...
Issue #4848
Component content is set to empty string after inline editing
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox v91.4.1 Reproducible demo link htt...
Issue #4837
HTML elements ids are incremented on different pages loaded in projectData
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 109 Reproducible demo link https:/...
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
UnStudio for GrapesJS: 4 Plugins to Build Better Visual Editors
Meet UnStudio, a new GrapesJS plugin studio with four tools, safer and better editor: Command Palette, Responsive Pack, Autosave & Restore, and Autofill
Tutorial
Messaging on gjs.market: talk to a studio before you buy, not after
We've launched private messaging between buyers and studios. One thread per buyerβstudio pair, the whole history in one place.
Tutorial
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners β this post is for you.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.