5

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:

  1. It also removes italics and bold formatting within selection (although I suppose I can live with that)
  2. 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 spans 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:

  1. When I want to do some block formatting I modify selection to include whole paragraphs/text lines
  2. Do formatting
  3. Remove formatting in selection
  4. 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.

Community
  • 1
  • 1
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
  • Maybe something character-based, like http://stackoverflow.com/questions/13949059/persisting-the-changes-of-range-objects-after-selection-in-html/13950376#13950376? – Tim Down Mar 26 '14 at 09:15

0 Answers0