Styling the Rich Text Editor

[Niels_EMP]

Hi,

I've noticed the Rich Text Editor's toolstrip doesn't fit the style of the standard ISC ToolStrip object. Is there a way to style the background of the Rich Text Editor toolstrip?

Also, how can the buttons in the toolstrip be styled e.g. giving them another class than the standard button?

See attached screenshot for clarification.

There's a similar question posted here without any answer:
http://forums.smartclient.com/showthread.php?t=21207

Thanks!

[Isomorphic]

What skin, what browser and what mode (CSS3 on or off) is this from?

[Isomorphic]

Please also be sure to post your *full* version, and indicate whether you can see this with the default skin or only once you've added customizations (which we'll need to see if you can't reproduce this with the default skin).

[Niels_EMP]

SmartClient Version: SNAPSHOT_v9.1d_2014-01-26/Pro Deployment (built 2014-01-26)

It's a question, there is nothing to reproduce. I am using a custom skin based on the Enterprise skin.

[Isomorphic]

Ah those are your purple colors. We thought you were reporting purple buttons mysteriously appearing.

Each of the built-in controls in the ControlName enum is an AutoChild, but in camel case like normal AutoChildren (so BOLDSELECTION -> "boldSelection").

There is also an AutoChild "toolbar" which is what holds the controls.

We'll get this cleared up in the docs as well.

[Niels_EMP]

Hi, thank you for the clarification, but I'm still not quite able to get it to work. It is unclear to me if the controls are autochildren of the richTextEditor or of the toolbar you mentioned.

I managed to style the toolbar via:

isc.RichTextEditor.changeDefaults("toolbarDefaults", {
       styleName:"richTextToolbar"
});

but I cant figure out how to style the buttons.
I tried this but it didnt work:

isc.RichTextEditor.changeDefaults("boldSelectionDefaults", {
       styleName:"testboldedit3"
});

Can you post some example code of how I would change the stylename of the controls in the toolbar of the richTextEditor?

[Isomorphic]

The "boldSelection" control is a Button, so setting icon or baseStyle would be expected; styleName would be ignored in favor of the existing baseStyle setting.

[Niels_EMP]

Thank you, now all my buttons are styled.

My last problem is changing the background color of the toolarea/toolbar. I tried to give it a new style but the background-color of the element.style overwrites it.
Then I tried to set the background color to null and transparent, neither of which worked. (See attached screenshot

isc.RichTextEditor.changeDefaults("toolAreaDefaults", {
     styleName:"richTextToolbar",
     backgroundColor:"transparent"
});

So my question is this. How do I set the background color of the toolbar/toolarea?

[Isomorphic]

Ah, this is controlled by RichTextEditor.toolbarBackgroundColor, so set that to "transparent" (or whatever value you want). We'll make sure this gets properly documented.

[Isomorphic]

RichTextEditor.toolbarBackgroundColor is now exposed and documented.

[Niels_EMP]

Thank you very much for your help.