Add default buttons of the TinyMCE WSYWIG

[djigoio]

Summary

In https://directus.io/docs/guides/data-model/interfaces#wysiwyg

It would be great that the user had information of what options are currently being displayed by default in said field, in case there's any specific they want to remove, and also to give an idea of how to add extra fields, as it's a bit confusing because the TinyMCE docs and how Directus handles said info is different:

Example

TinyMCE example:

<script>
   tinymce.init({
   selector: '#editor',
   toolbar: 'bold italic underlined | h1 h2 h3 | numlist bullist removeformat blockquote | link  image media code | fullscreen',
   height: '100px'
       });
</script>

How Directus handles it:

{
    "toolbar": "bold italic underlined | h1 h2 h3 | numlist bullist removeformat blockquote | link  image media code | fullscreen"
}

And, for some reason, also the template given by Directus inside the field configuration is:

{
    "font_size_formats": "8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt",
    "font_family_formats": "Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace;"
}

Result

Under Options override

The one that Directus currently has by default, and the one that should be shown in the docs is something like:

This is the group of buttons offered by Directus:
"toolbar": "bold italic underlined h1 h2 h3 numlist bullist removeformat blockquote link image media code fullscreen"

Ideally it would also mention other options like font_size_formats, or at least give some information on how to use those fields in Directus.

For example:

[linear]

DX-815 Add default buttons of the TinyMCE WSYWIG