Custom Format not working in 'wysiwyg additional options'

user_3032118 0
Viewed 483

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.

keystonejs tinymce
1 Answers

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.

user_30321180
Related