Issue #2693💬 AnsweredOpened April 1, 2020by mazuschlag1 reactions

Rich Text Editor's position is not updated on enter/return

快速解答by khurram9001

@mazuschlag if you are using ckeditor then you can try this patch. It will re-calculate and re-position the ckeditor to the correct position. CKEDITOR.on('instanceReady', function (e) { editor.RichTextEditor.updatePosition(); });

Read full answer below ↓

Question

Once again thanks for all the hard work on the project!

This is reproducible on the current release 0.16.3 - you can check it out in the newsletter demo: https://grapesjs.com/demo-newsletter-editor.html

Normally the RTE appears above the element so this is not an issue. However, when a RTE-enabled element is placed close to the top of the editor, there is no room for the RTE above the element, so it is placed below. When pressing "enter" or "carriage return", the RTE stays in place, blocking much of the element that is now below it.

To reproduce:

  1. Open GrapesJS
  2. Place a text field at the top of the editor
  3. Type some text and press enter.

When the user removes a row in the text element via backspace, the RTE's position is updated correctly and moves to the new edge of the element. But for enter, it does not move at all.

Answers (3)

khurram900February 3, 2022

@mazuschlag if you are using ckeditor then you can try this patch. It will re-calculate and re-position the ckeditor to the correct position.

CKEDITOR.on('instanceReady', function (e) { editor.RichTextEditor.updatePosition(); });

artfApril 2, 2020

Canvas tools should be updated on input event of the text component, in the current version there is an issue even with the built-in RTE but it will be fixed in the next release. Somehow, this issue doesn't affect the CKEditor plugin but, from what I've seen, the "enter" never triggered the input event so I think there should be attached some other event to the CKEditor instance. I'd be glad to receive a PR on the plugin

mazuschlagApril 3, 2020

@artf Thanks for the response but I'm a little confused. This is happening with the CKEditor plugin - are you saying the fix will be separate from the fix to the built in CKEditor? I wouldn't mind fixing it but do you have some pointers on where to start?

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.