Custom Format not working in 'wysiwyg additional options'

Question

I am using the latest Keystone.js and following is my Keystone.init

var keystone = require('keystone');

keystone.init({
    'name': 'Dashboard',
    'user model': 'User',
    'auto update': true,
    'auth': true,
    'cookie secret': 'secure string goes here',
     views: 'templates/views',
    'view engine': 'pug',
    'wysiwyg cloudinary images': true,
    'wysiwyg additional plugins': 'example, autosave, charmap, table, '
    + 'advlist, anchor, wordcount, preview, fullscreen, importcss,  '
    + 'paste',
    'wysiwyg additional buttons' : 'undo redo charmap blockquote formatselect styleselect removeformat  |'
    + 'example preview fullscreen bodytext',
    'wysiwyg additional options': { 
            default_link_target: '_blank',
            paste_as_text: true,
            menubar: true, // added to test formats
            'style_formats': [ 
                { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } }
                ],
            formats: {
                    bodytext: {block : 'p', attributes : {title : 'bodyText'}, styles : {color : 'grey'}}
                }
        }, });

keystone.set('routes', require('./routes'));

keystone.import('models');

keystone.set('nav', {
    'projects': ['Projects', 'Keywords'],
    });

keystone.start();

What I get in the TinyMCE editor is Formats dropdown without any custom format inside it.

Does anyone has any idea how to solve it? I need to add a custom format to add a class to text, eg. image caption, body text etc.

After going to Keystone.js files I found out that it is using TinyMCE ver 4.4.3 and Keystone ver is 4.0 RC.

do note that if I am customising the existing formats, like h1, then it is working and I am able to add classes or specify styles. But I am not able to create new custom formats. — viCky, Sep 05 '18 at 07:04
You might be being tripped up on this: "It's important to note that the style_formats option, while similar in syntax, is entirely separate from the formats option. This option will only add items to the Formats dropdown in the toolbar, not the Format dropdown in the menu bar." from https://www.tiny.cloud/docs/configure/content-formatting/ — Geoff, Sep 13 '18 at 02:04
Maybe you are missing the toolbar option: `toolbar: "styleselect", style_formats: [ ... ]` ? — Mr. Goferito, Sep 13 '18 at 21:47

score 0 · Accepted Answer · answered Sep 19 '18 at 12:05

So, I found the solution, it was a silly mistake, the style_formats: is supposed to appear with the quote:

'wysiwyg additional options': { 
            default_link_target: '_blank',
            paste_as_text: true,
            menubar: true, // added to test formats
            style_formats: [ 
                { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } }
                ],
            formats: {
                    bodytext: {block : 'p', attributes : {title : 'bodyText'}, styles : {color : 'grey'}}
                }
        }, });

I hope if anyone else is also facing this issue, you can check if this solves it for you.

Custom Format not working in 'wysiwyg additional options'

1 Answers1