moodle-tiny_fontcolor

Installation

• Unzip the contents of the zip archive into the Moodle <moodle_base>/lib/editor/tiny/plugins/fontcolor directory, (<moodle_base>/public/lib/editor/tiny/plugins/fontcolor as of Moodle 5.1)
• As a Moodle Admin go to Site Administration -> Plugins -> Text Editors -> TinyMCE editor -> Tiny text color/text background color settings and add a view color names and color codes for at least on of the setting "Available text colors" or "Available text background colors".
• You may also enable the color picker for text color or background color.

If no colors are available and the color picker is disabled then the menu item and button in the TinyMCE editor will not appear. This is valid for both, the text color setting and the background color setting.

The color name can be an arbitrary string e.g. Red or Dark Green or whatever you name your color. The name can be also the "corporate name" e.g. that is used in any style guides of the corporate identity at your institution.

Colorscheme

If you want a predefined color scheme, then you may add the json from the file colorscheme.json into the settings textcolors and/or backgroundcolors in the plugin settings. This can be done by e.g.

UPDATE config_plugins
SET value = '<json_string>'
WHERE plugin = 'tiny_fontcolor' AND name = 'textcolors';

Multilanguage support

Color names may also use language tags for the color names. Text filters are applied. For example setting black and white with German and English labels would look like this:

[
    {
        "name": "<span class=\"multilang\" lang=\"de\">Schwarz</span><span class=\"multilang\" lang=\"en\">Black</span>",
        "value": "#000000"
    },
    {
        "name": "<span class=\"multilang\" lang=\"de\">Weiss</span><span class=\"multilang\" lang=\"en\">White</span>",
        "value": "#ffffff"
    }
]

The value of the name property can be copied as it is, in the admin settings area.

The name of the color is used as a tooltip in the editor when hovering over the appropriate color square.

Use CSS classes

Since version 1.0 there is a mode to use css classes for defining colors, instead of having the color code defined directly in the style attribute. This feature addresses the issue CSS Rules rather than style attribute #18.

There are a few things to mention when using css classes over the color codes:

• Export and import courses/activities across Moodle sites will loose the color information because the css classes with the colors may not exist on the target site. In most use cases you will probably duplicate activities or courses within the same instance (course copy, sharing cart). In these cases the colors will also work on the copied item.
• Deinstalling the plugin will leave the colors because the css is stored in the theme settings.
• The class names are derived from the descriptive color names. Invalid characters will be filtered, html is stripped (in case you use multilanguage annotation from Moodle).
• CSS classes with the appropriate styles are stored in the custom scss settings of all installed themes. Whenever these settings are changed manually, be careful not to remove the fontcolor styles. They can be applied again when saving the color settings of the plugin in the site administration.
• The color picker in the editor is not available when the css classes are in use. With the color picker you may use an arbitrary color that is not defined in the css classes, and so no corresponding class name can be found.

There is no easy switch between the use of css classes and the use of the style attributes. Whenever you change the setting, remember that existing content is not changed. When editing the content, the plugin will only change the colors in the specified mode.

Version History

See Changes