[CKEditor.Reactive] CK editor registers an ENTER twice
ckeditor-reactive
Reactive icon
Forge component by Fábio Fantato
Application Type
Reactive

Hi,

I've implemented the CKEditor.Reactive component in my application succesfully and it works pretty neat.

There is only one thing; every time I press enter, a double paragraph is entered. See GIF.

So I type "hello", then press enter once, then type "hello2". In the source I see:

<p>hello</p>
<p> </p>
<p>hello2</p>

Where I expect to see:

<p>hello</p>
<p>hello2</p>

This is really annoying. I've tried some different approaches to fix / bypass this. 

  1. Playing around with the configuration of the enterMode and shiftEnterMode. If I choose another mode, it just inserts a <BR> (enterMode=2) or a <DIV> (enterMode=3) twice for each ENTER press.
  2. Use an OnChange handler to catch the HTML via client action GetDataFromEditor, replace the empty paragraph by an empty string ( replace(HTML,"<P> </P>","") ) and set the new HTML in the editor again via client action SetEditorData. This causes the cursor to initialize on the first line, first character again, losing the position in the editor where you were typing.
  3. Comparison of the CKEditor instances of the CKEditor Docs and the CKEditor instance in my app. I did not find any differences in configuration that could relate with this issue.

I guess it has to do with the setup of the component, as I can not reproduce this in the CKEditor instances in the Docs, like over here https://ckeditor.com/docs/ckeditor4/latest/examples/enterkey.html.

Did anyone experience this before and found a solution to fix it (elegantly)?

Thanks in advance,

Rob

Hi Rob, did you already found a solution? Here the same problem, or almost. This is the config json I've used:

autoParagraph: false,
allowedContent: true,
fillEmptyBlocks: false,
basicEntities: false,
enterMode: 2,
shiftEnterMode: 1,

luuk<br />

 <div></div>

But I've a extra div and also an unwanted break....

Br Luuk


Hi Luuk,

No solution yet. I tried with config that is working well on the editors on the DEV pages of the CKEditor. Works on those pages, does not resolve the issue when I put that config in the component in my project.

Saw some topics on the issue on other non OS forums mentioning the enterMode setting, but like I said in my original post it always puts in a form of an empty line in between my typed lines.

Since I haven't seen this issue mentioned before on this component, it's either not occurring at other people's PCs, or people don't find it annoying enough.


Will definitely post something if I've found a way to make it less annoying.

Cheers,

Rob

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.