directus / directus/docs

Add default buttons of the TinyMCE WSYWIG

Open
#216 1 comment 0 reactions 0 assignees View on GitHub
content-improvement
Dominant language
TypeScript
Stars
22
Forks
82
Avg merge
18h 49m
Merged PRs (30d)
4

Description

## 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:

```

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

```

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:

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.