samclarke / SCEditor

A lightweight HTML and BBCode WYSIWYG editor
http://www.sceditor.com/
Other
661 stars 187 forks source link

Deleting a line cause addition of many newlines in other places #625

Open abetis opened 6 years ago

abetis commented 6 years ago

Finally found an easy way to reproduce the problem: Go to the sceditor.com In the default shown text go to the empty line above the list and below the "Red text and blue text!" Press DEL or BACKSPACE, both cause the same problem

All empty newlines will be converted to empty paragraph tags <p></p>

Actually I can see that trying to delete other empty newlines will cause the same problem, so the list have nothing to do with that...

abetis commented 6 years ago

Sam, this is a very annoying bug for me. If you don't have a time to look into that, please give a hint what part of the code might be responsible for the problem so I could prepare a workaround until the problem will be solved.

Many thanks.

abetis commented 6 years ago

I'm using latest FireFox on Ubuntu Linux... Was curious to see if that happens also with Chrome and was surprised to see that the problem don't happen for the same scenario! Probably something browser related, like execCommand or similar :(

abetis commented 6 years ago

Tried on Windows7 machine. Chrome works ok, the new FireFox cause the problem...

abetis commented 6 years ago

Sam, could you please address that or give a direction where should I look in the code? That bug is very annoying!

citronbleuv commented 6 years ago

Hello, I have the same problem with bbcode. Sometime new line added.

citronbleuv commented 6 years ago

I add this code to have a tmp fix :

var instance = sceditor.instance(textarea);  
window.onload = function() {  
   instance.execCommand('source');  
};  

It's just a partial fix. No fix all case.

abetis commented 6 years ago

Strange, but in the email I got from GitHub I see different code:

var instance = sceditor.instance(textarea);  
instance.sourceMode(true);  
window.onload = function() {  
   var instance = sceditor.instance(textarea);  
   instance.sourceMode(false);  
};  

Which one is the correct fix?
citronbleuv commented 6 years ago

Yes, I changed the code. The following is better. Warning, I have again the problem but less. It's just a tmp workaround :

var instance = sceditor.instance(textarea);  
window.onload = function() {  
   instance.execCommand('source');  
};  
abetis commented 6 years ago

I can't understand what does your code do... According to this documentation there is no "source" command for execCommand: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

citronbleuv commented 6 years ago

Yes exactly. In fact instance.execCommand('trololo') (in window.onload only) work also :D. You can test with the message in https://www.sceditor.com/.

gcmartin commented 6 years ago

This bug seems to be caused by linebreaks in the WYSIWYG editor source. I added the following workaround to base.setWysiwygEditorValue function in lib/SCEditor.js and it seems to fix it:

value=value.replace(/\r?\n|\r/g, '');

I didn't look at the root cause however: why linebreaks in HTML code causes this issue.

If that may be of any help... :)

lucaslg commented 5 years ago

More detailed information about this issue: Reproduction steps: 1) Using Firefox (this is important), go to https://www.sceditor.com/ 2) Switch the editor in source, erase the demo content 3) Copy paste the following text snippet inside the editor in source mode

test 1

test 2

test 3

4) Switch to preview mode 5) Position your cursor on the second line of text (between test 1 and test 2) 6) Press suppr or backspace. You should see a two line break added between test 2 and test 3 and another line break added after test 3, producing the following result (source):

test 1

test 2

test 3

This seems to be a web browser specific issue: the issue can be reproduced on Firefox but not on Chrome (I have not tested other web browsers)

yuliu commented 5 years ago

I'm using MyBB which integrates SCEditor as its WYSIWYG editor, users using Firefox are spotting this bug 1, 2.

Visit SCEditor. Switch to source mode (this ensure the problem's existence). Type something, for example:

1
2
3

Now, switch back to visual mode and the content in the editor's body container will be like (developer tool):

<div>1<br></div>
<div>2<br></div>
<div>3</div>

Set cursor at the beginning of any line except the first line, for example line 2, and press Backspace, the content in the editor's body container will be like, in Firefox (tested with v68):

<div>1<br></div>2<br>
<div>3</div>

And in Chrome (tested with v76):

<div>1<br></div>
<div>23</div>

It seems a pretty old problem. Is there a quick fix?

lucaslg commented 5 years ago

Hello @yuliu , I ended up using the fix suggested by gcmartin above which seems to fix the issue.

yuliu commented 5 years ago

Thank you @lucaslg for letting me know. I'll ping a MyBB developer @effone to check this if it's applicable to MyBB.

effone commented 5 years ago

@yuliu apparently we don't core edit or touch third party library files that we include in MyBB. We need to wait for a fix in the library itself.

FilipQL commented 5 years ago

@effone Unfortunately, this project is no longer maintained: https://github.com/samclarke/SCEditor/issues/706