How do I customise the WYSIWYG (TinyMCE) field for Admin UI in KeystoneJS 5 -- adding plugins, changing CSS?

0
votes

KeystoneJS offers the option of a WYSIWYG field type

This field inserts a string path into your schema based on the Text field type implementation, and renders a WYSIWYG editor in the Admin UI using TinyMCE

How do I edit the TinyMCE-based WYSIWYG editor plugins and appearance? On this page in the KeystoneJS docs it says we can pass in an object, which I assume is named editorConfig

editorConfig

Default: {}

Accepts any TinyMCE config options. These will be passed to tinymce.init and can be used to override Keystone.js' default editor appearance and functionality.

but it's not working for me.

const editorConfig = {
 selector: 'textarea',
 menu: {
  format: { title: "Format", items: "forecolor backcolor" }
 },
 toolbar: "forecolor backcolor"
};


text: { type: Wysiwyg, editorConfig},

And when I try to load in CSS

const editorConfig = {
    selector: 'textarea',
    content_css: '/tinymce.css',

};

that CSS is never loaded.

I tried using config in place of editorConfig but that doesn't work either.

1
tinymcekeystonejs

1 Answers

0
votes

Although it's in the docs, it's not yet in the version released to the public. It should be in a few days, they say: https://github.com/keystonejs/keystone/issues/2486#issuecomment-595178710