Custom Format not working in 'wysiwyg additional options' - tinymce

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.

Answer 1

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.