I've been looking around for some way of changing background colours of the body and various divs. It needs to happen in-page with inline styles as I can't use external style sheets.
The foreground and background tools are no help as they only affect text within the selection, not the div that contains them. For example if I have this structure:
<div> <p>Hello</p> </div>
There appears to be no way of setting the colour of the div, like this:
<div style="background-color:red;"> <p>Hello</p> </div>
When I select the text and set its background colour, it doesn't even set it in the p tag, but on some internal inline element, as if it's doing this:
<div> <p><span style="color:red;">Hello</span></p> </div>
This results in colour being applied in thin strips with gaps between lines and irregular right margins.
I can't make it happen on any of the demos, and I can't find any plugins for it either. The "Show blocks" plugin looks like it could do something, but it only shows the borders, it doesn't allow me to select blocks or set any kind of properties on them. This is such a basic thing I must be missing something, right?!
Found something...
If I enable 'Show blocks', I can then right-click on a div outline and see a contextual menu containing 'edit div'. Selecting that opens a dialog. In there I can select the 'Advanced' tab, and there's a style field where I can enter CSS. It's not exactly smooth, but at least it's possible. It would be preferable to have some simple controls on the 'General' tab, such as padding, margins, foreground and background colour. It would also be better to have the dialog open on double click as at present that does nothing.
What I was really looking for is the ability to select blocks just by clicking on them and set their properties just like you can for text selections.
In researching this I tried about 10 other WYSIWYG editors, and none of them had this ability either. Seems like a basic omission to me!