CSS Styling (styleWithCss)

Mar 8, 2010 at 9:24 PM

I love this plugin for a use I'm planning, however, it currently lacks one thing.  It generates all HTML code as spans w/ styles in Firefox.   From all that I've read, you need to do the following to change this behaviour on the editor:

.execCommand('styleWithCss', false, false);

However, every way in which I've attempted that, has been futile.  I've tried snagging the .jhtmlareaObject and setting it after the fact.  I've hacked the code and inserted it immediately after the .designMode="on" command, etc.   Yet it always does '<span>'

Any idea on how to accomplish this?   and/or if it could be added an a feature/option?

Mar 8, 2010 at 9:53 PM

A quick update.  I have found a workaround/hack.  But, well, it doesn't seem right ;)

Basically for some reason I have to set the styleWithCss before EACH AND EVERY execCommand that I want to happen that way.

Therefore my 'fix' has been to put this piece of code inside of jHtmlArea's execCommand function.

At the very least, would be nice to see jHtmlArea offer this functionality as an option, and do it for you.   But it seems that there has to be a more 'clean' way to accomplish this as well instead of doing it EVERY time.


Jun 18, 2010 at 8:30 PM

3 Months later ... I have another update here.

So my code-fix here had been working great ... until about to launch product and doing a final run of tests.

Ended up finding that in IE8 it was throwing an error on that line of code I added.   It didn't like it one bit.

So I had to wrap it in a if (!($.browser.msie)) and everything seems to work fine, especially since IE seems by default to not use 'CSS' mode.

On an 'odd' point:  I found that on SOME Firefox browsers, not having that line at all still worked fine, generating B's and I's.  On other Firefox though, spans would appear.  Odd.