CODEWITHSUNDEEP
jquerywysiwygjwysiwyg
Geoff Maddock
Geoff Maddock

Reputation: 1802

jWYSIWYG turns newlines into <P> in IE9, but into <BR> in other browsers

I'm using jWYSIWYG jquery plugin to add controls to textareas in an application.

I found that the same code in IE turns newlines into <P> tags, but <BR> in other browsers (Firefox, Chrome, so far). Ideally I'd like them all to be <BR>, or barring that, make them all <P>. I at least want it to be consistant.

Is there a work around? I see that there is a config setting:

brIE A boolean. If true, a <br/> will be inserted for a newline in IE.

Unfortunately, it doesn't seem to do anything when set.

Upvotes: 1

Views: 162

Answers (1)

Spudley
Spudley

Reputation: 168655

The root of the issue here is that browser-based WYSIWYG editors use the browser to do the editing.

The base component of a WYSIWYG editor is just a standard element (eg a <div>) with the contentEditable flag set. That's it. The browser takes control of actually doing the editing; the javascript code is not in control of this, the browser is. And different browsers implement it differently.

That's why you get different results from different browsers. There's not a lot you can do about it really within the editor. You'll even find that if you load content that was created in browser into a different browser, it will be reformatted to how the new browser wants it to be, often without you even doing any actual editing.

This will happen with all browser-based WYSIWYG editors. Some of them may attempt to normalise the browser differences, but with limited success as you've seen. And the user does have some control; eg browsers will often react differently to shift+return compared with just return for new-lines. But that leaves it in the hands of the user, who may not be aware of the need to do so (after all, you use a wysiwyg editor to make things easier for the user, not more complicated).

So overall, the best you can really hope for is to normalise it after it's been edited, in your server-side code.

Upvotes: 1

Related Questions