Closed machineghost closed 2 years ago
This very much seems like the contenteditable bug which Chrome has (and possibly other Chromium based browsers). I encountered this issue while using the Summernote WYSIWIG editor.
Some issues about it in the Summernote repository:
In my project it is very easy to reproduce by just adding 2 paragraphs and than deleting the latter one. Also see this comment. Sometimes when pasting text from another website (using CTRL + shift + v so no style will be pasted) also creates span or font tags with styles. However for some reason I can't reproduce it on the official Summernote website.
Maybe you can play around with those things to reproduce the problem. I have yet to encounter the problem in SunEditor (though I haven't used it very much yet).
More info and a possible workaround: https://www.neotericdesign.com/articles/working-around-chrome-s-contenteditable-span-bug/
The workaround is specifically for Redactor, but it gives an idea.
When pasting, editor is remove the styles of all tags except the "span" tag. In some cases, all text related styles are copied to that "span" tag. I can remove span tags, but this will also remove styles copied from within the editor.
In version 3.0.0, I'll add a style filter of the "span" tag to leave only the styles used to the editor.
It has been fixed in the latest version. Thank you.
@JiHong88 Is the style filter added ? i am still facing the same problem while copying all new styles added to SPAN, STRONG tags. If it is fixed already is there any configuration i should pass ?
@Prithviraj-kf Delete all but the styles currently used in the "span" tag. Other tags are styled by default. What's the problem?
@JiHong88 any way to remove span tag while pasting copied content into editor.
Describe the bug When I use Sun Editor for a bit, I inevitably end up with chunks of my text being "messed up". It isn't consistent (it seems like it happens more when I add text "in the middle", eg. when copy/pasting text in), but every so often I'll have the following
span
added around chunks of my text.<span style="color: rgb(51, 51, 51); font-family: "Helvetica Neue", sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">My Test</span>
To be clear, these are not styles I'm "accidentally pasting in", and it's the same styles no matter where the text come from. For some reason these spans just get added, and what's worse: they don't appear inside the RTE! I only see them afterwards in the rendered text, at which point they are a giant PITA to remove.
Do you have any idea where these spans are coming from ... and more importantly, how I can make Sun Editor not add them?
P.S. I used to have CKEditor4 in Sun Editor's place, and it never had this problem.
To Reproduce The problem is intermittent.
Expected behavior No random styles get added.
Desktop (please complete the following information):
Additional context
This issue was originally filed here (for the Sun Editor React project ... but I was told to file it here): https://github.com/mkhstar/suneditor-react/issues/214
These styles seem to match ones in
node_modules/suneditor/dist/css/suneditor.min.css
. For instance, the styles for.sun-editor-editable
match most (but not all) of the styles in my mysteryspan
(matching styles bolded):.sun-editor-editable{ font-family:Helvetica Neue,sans-serif;font-size:13px;color:#333; line-height:1.5; background-color:#fff; word-break:normal;word-wrap:break-word;padding:16px;margin:0
BTW my entire component file is the following (as you can see there's nothing that could possibly be causing these
span
s to be added):