TinyMCE Format Fonts are removed from menu

TinyMCE Format Fonts are removed from menu

by Rainer Schaufelberger -
Number of replies: 9
Hi 

I wonder why the ability of changing fonts in TinyMCE has been removed in Moodle.

I noticed the following in the file editor.js:

if (instanceConfig.menu.format) {
        instanceConfig.menu.format.items = instanceConfig.menu.format.items
            // Remove forecolor and backcolor.
            .replace(/forecolor ?/, '')
            .replace(/backcolor ?/, '')
            // Remove fontfamily for now.
            //.replace(/fontfamily ?/, '') Achtung geändert Rainer,Franz
            // Remove fontsize for now.
            .replace(/fontsize ?/, '')

Can anyone explain that to me? What reason could it be?

Thanks, Rainer
Average of ratings: -
In reply to Rainer Schaufelberger

Re: TinyMCE Format Fonts are removed from menu

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Hi Rainer,

This was removed because of accessibility concerns with changes to the standard font, font colour, background colour, and text size.

Moodle strives to provide accessible content wherever possible, and to discourage content creators from making inaccessible content.

Please note that this is not possible in Atto either for the same reason.
Average of ratings:Useful (3)
In reply to Andrew Lyons

Re: TinyMCE Format Fonts are removed from menu

by Rainer Schaufelberger -
Hi Andrew,

Ok, - In Atto we provided this function. So, - I have to think how to tell this story to our users.

Thanks.
Average of ratings: -
In reply to Rainer Schaufelberger

Re: TinyMCE Format Fonts are removed from menu

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Rainer,

TinyMCE plugins are actually relatively simple to create. In this case especially so because you can just add back the funcionality we have removed by creating a simple plugin.js which reconfigures the config. Something like this will add styles, fontfamily, fontsize, forecolor, and backcolor back to the format menu:

const configureMenu = (menu) => {
    window.console.log(`Starting menu management for ${menu.format.items}`);
    if (menu.format.items.match(/\bblocks\b/)) {
        menu.format.items = menu.format.items.replace(
            /(\bblocks\b)/,
            ' styles $1 fontfamily fontsize',
        );
    } else {
        menu.format.items = `${menu.format.items} | fontfamily fontsize`;
    }

    if (menu.format.items.match(/\blanguage\b/)) {
        menu.format.items = menu.format.items.replace(
            /(\blanguage\b)/,
            ' forecolor backcolor | $1',
        );
    } else {
        menu.format.items = `${menu.format.items} | forecolor backcolor`;
    }
    window.console.log(`Finished menu management for ${menu.format.items}`);
    return menu;
};

// eslint-disable-next-line no-async-promise-executor
export default new Promise(async(resolve) => {
    resolve([`tiny_mypluginname/plugin`, {
        configure: (instanceConfig) => ({
            menu: configureMenu(instanceConfig.menu),
        }),
    }]);
});

If you create a plugin called mypluginname with this as its plugin.js then it will add those items back.

Edit: I've just created an example plugin which does the above: https://github.com/andrewnicols/moodle-tiny_formatting

Average of ratings:Useful (5)
In reply to Andrew Lyons

Re: TinyMCE Format Fonts are removed from menu

by Anton Tremetzberger -
Picture of Particularly helpful Moodlers
Hi,

many thanks Andrew for this solution.

We would also like to offer this function in the Tiny Editor. Is there a possibility that your plugin will also become an "official" Moodle plugin? There is already a similar plugin here, which is currently submitted for aproval. Maybe you can combine it: https://moodle.org/mod/forum/discuss.php?d=445893

thanks & br, Anton
Average of ratings: -
In reply to Anton Tremetzberger

Re: TinyMCE Format Fonts are removed from menu

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I'm not sure at this stage because I'd prefer to see a more complete solution make it into core, and I think that some of those standard features are lacking in key areas.

To give a specific example of this, when using the standard TinyMCE colour buttons (foreground/background) TinyMCE applies a hex colour to the selected element. This is absolutely great for the current user in the current theme, but does not account for the future where you may change your brands colours, or a course/user may use a different theme. You now have content which doesn't work well for your organisation and may be in breach of accessibility guidelines through no fault of the author or anyone else.

What I'd ideally like to do is to have that plugin make use of a CSS or HTML data- attribute, but that's not possible with the current TinyMCE plugin, and the standard TinyMCE plugins don't use standard APIs available to other plugins so we'd have to provide a different solution here.

Likewise a number of people have requested a template-type integration for Bootstrap, but that fixes you to a specific version of Bootstrap which may break in the future. It's one thing for a theme change to break a plugin because that can be fixed more easily, but if the theme change breaks your content then that has much worse consequences and makes it harder for your organisation to upgrade to a newer theme, or a newer version of Moodle.

So, from both a professional (as the person who made the decision not to include those features), and a personal perspective (as someone who cares about both accessibility and making your life easier in the long run) I don't really want to make it too easy to do the 'wrong' thing unless you clearly understand the consequences.

I hope that clarifies my position on this,

Andrew

Average of ratings:Useful (6)
In reply to Andrew Lyons

Re: TinyMCE Format Fonts are removed from menu

by Anton Tremetzberger -
Picture of Particularly helpful Moodlers
Hi Andrew,
thank you for the detailed information. All right, now I also understand the reason why it is not so easy to implement.
br, Anton
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE Format Fonts are removed from menu

by Dr. Nellie Deutsch -
Thank you. This works perfectly with Moodle 4.4.1. Where can I recommend it?
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE Format Fonts are removed from menu

by Philipp Memmel -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
Just wanted to share: I only could manage to make this work by also adding
    const [
        tinyMCE,
        pluginMetadata,
    ] = await Promise.all([
        getTinyMCE(),
        getPluginMetadata(component, pluginName),
    ]);

    // Reminder: Any asynchronous code must be run before this point.
    tinyMCE.PluginManager.add(pluginName, () => {
        // Return the pluginMetadata object. This is used by TinyMCE to display a help link for your plugin.
        return pluginMetadata;
    });
before the resolve statement in the default export statement as well as the corresponding imports
import {component, pluginName} from 'tiny_formatting/common';
import {getTinyMCE} from 'editor_tiny/loader';
import {getPluginMetadata} from 'editor_tiny/utils';
at the beginning of the common.js file. Otherwise I have errors in the browser console about not being able to load some JS.
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE Format Fonts are removed from menu

by Dominic Feldmann -
Hi Andrew / Rainer,
sorry to ask again, but did I understand correctly that there will be no add-on for the TinyMCE to customize fonts in the future? The reason for this is that the TinyMCE has barrier-related display problems, right?
Average of ratings: -