Modify color, background color, and font from wysiwyg

[acalvino4]

As far as I can tell, the vizy editor has no ability to modify the color, background color, or font of text, yet this is a need in a number of cases.

Obviously to do this well, vizy would need some insight into your theme options, i.e. what colors and fonts your site uses. The way I handled this with Redactor was to use Redactor custom styles to add dropdowns with the options I wanted, and then edit the redactor config so that choosing those options would add a class to the selection. So the most straightforward approach I can think of is to build something like this into the vizy config. Depending on how common of a use case color and font are, we may further try to streamline the configuration for those as a special case.

Is anything like this possible in Vizy now, and if not, is there any chance it could be added? I saw the documentation about modifying nodes, but I think this is different, as it's more about adding a new custom node type.

An important part of this feature would be the ability for those styles/classes to permeate the control panel, so that content editors can get real-time feedback on the effect of their changes. I have managed this by manually loading a css bundle into the cp that is scoped to elements with ".redactor-styles", but anything that could be done to streamline this in vizy would ideal!

[engram-design]

You currently can't add your own buttons and dropdowns to the editor, but you will be soon (#93, #137).

But being able to modify the color, background color, or font of text is totally possible if I were to add those buttons to do that, but it is a little different to Redactor in that we don't actually store the generated HTML. We would need to determine how to save these values as well, as we wouldn't want to use inline CSS, so that would likely be classes.

That begs the question of how to style those classes in the control panel. If you have a text-green-500 class, you'll need to have that available for the control panel to understand that.

• Text Color
• Text Background Color

Are reasonably straightforward, so long as we figure out a way to store that on a node (likely a class of your choosing, but we might allow your definitions of custom style to define attributes), and also define how that looks in the control panel.

Font is a tricky one. Do we go with loading in Google fonts (and others), or allow defining your own self-hosted ones? How do we store the value of that - the font-family or an arbitrary class like font-body. We would also need to load those fonts into the control panel as well.