I have a content editable element on my page and while it works somehow I'm having some problems in Google Chrome browser because it seems to sometimes wrap element into span
elements with inline styles which is particularly irritating.
If I call
document.execCommand("removeFormat", false, null);
after block/paragraph conversion it does remove those spans. But there are two major problems:
- It also removes italics and bold formatting within selection (although I suppose I can live with that)
- It only removes formatting within selection, but if you run some block formatting (like (un)ordered list), more than just the selection gets formatted and everything outside selection still retains
span
s with inline styles.
You can observe this behaviour in this JSFiddle (open with Google Chrome).
What I thought I could do
So I thought I could do the following:
- When I want to do some block formatting I modify selection to include whole paragraphs/text lines
- Do formatting
- Remove formatting in selection
- Restore original selection
But I've been having problems with #4, as original selection nodes have been within those span
elements that don't exist any more so I can't restore my selection.
How should I solve this one?
Problem TLDR
When you select partial line and make it as an (un)ordered list, Google Chrome inserts span
elements with inline styles.
I would like to remove those irritating spans with inline styles while preserving original selection.