CKEditor is omitting spaces in IE and FF

Question

i have configured CKEditor inside jQueryUI dialogue box text area

In Firefox and IE :

• case 1: when i enter "sometext+space" it returns only "sometext" . space is omitted .

• case 2: "sometext+space+space" it returns only "sometext+space" . here more than one spaces are converted to single . like wise if i enter 3 spaces , 4 spaces .only one space is returning .

in Google Chrome it is working fine.

Answer 1

This is a behaviour controlled by browser and CKEditor has nothing to do with it.

Fact is: how can be a space at the end of block represented in HTML? There's only one way when we are not using pre formatted block:

<p>Hello&nbsp;</p>

So when you press space at the end of a block you expect this HTML to be created underneath. And this is what Chrome and Safari do.

However, next you start typing another word. If browsers would just insert these next characters you would end up with:

<p>Hello&nbsp;World!</p>

But wait a minute... you wanted a normal, breakable space between these words, right? Therefore Chrome and Safari replace these   with a normal space when you continue typing... unless they lose a context. And then you may end up with lots of  s which is a problem.

Therefore, IE and FF do this differently. When you press a space they cheat and insert a normal space (or perhaps even nothing – I didn't check) and render it. This is kind of a cheat, because this normal space would not be visible if you would render this content outside of contentEditable. This is what you encountered and I'm afraid there's no easy solution to that problem. You just have to live with it.

There's one trick, though, which you could try, but it'd be pretty hard to implement. First, style your content as explained in How to preserve white spaces in content editable div. Then, change CKEditor's parser, so it does not drop whitespaces at block boundaries. The second step is the toughest, because it will require CKEditor's code modification.