Question

I am using the following code block to format text:

    'formats': {
        'format_code': {
            'block': 'pre',
            'styles': {
                'color': '#000000',
                'backgroundColor': '#f0f0f0',
                'fontFamily': 'monaco,consolas,courier new,monospace',
                'fontSize': '1.0em',
                'width': '80%',
                'minHeight': '5.0em',
                'maxHeight': '15.0em',
                'overflow': 'auto',
                'border': '1px solid #999999',
                'padding': '1.0em'
            }
        }

This code block was given to me. Now I would like to change it to use a CSS class.

Can anyone advise me how to do this. I am not familiar with tinyMCE.

Answer 1

The CSS is almost identical. The camelCase properties are dash seperated in CSS and the font containing a space must be quoted.

.myClassSelector {
    color:#000000;
    backgroundColor:#f0f0f0;
    font-family:monaco,consolas,"courier new",monospace;
    font-size:1em;
    width:80%;
    min-height:5em;
    max-height:15em;
    overflow:auto;
    border:1px solid #999999;
    padding:1em;
}

I assume you want to add it to the drop down Styles in TinyMCE. If you want to add it to the Format drop-down then that requires a different configuration option.

If you want a new Style in the drop-down then you need to put the CSS class rule above in a .css file and configure TinyMCE as follows:

tinyMCE.init({
    theme:'advanced',
    content_css:'path/to/css/file',
    style_formats : [
        {title : 'My Style', block : 'div', classes : 'myClassSelector'}
    ]
});