1

Topic: Clean inline styles when applying a format

Hi there,

I have a configuration of tinymce where I define some formats with some inline styles, and I facing the problem that after applying a format, when change to another one it keeps the inline style of the previous one that are not defined in the new one. I mean, if the first format has a color style property and the second one has this property too, the property takes the value of the second style, but if the first style has a property line-height and the second one doesn't have it, the property remains intact after applying the second format.

Is there a way of forcing the editor cleaning the inline styles when applying a new format?

Here are my formats definition:

formats: {
                p: { block: 'p', remove: 'all', styles: { padding: '0 0 1em 0', 'font-size': '13px', 'line-height': '1.5em' } },
                h1: { block: 'h1', remove: 'all', styles: { 'font-size': '16px', 'font-weight': '600', width: '100%' } },
                h2: { block: 'h2', remove: 'all', styles: { padding: '0 0 1em 0', 'line-height': '1.5em', color: '#1E96FA', 'font-size': '16px',
                    'font-weight': '600', width: '100%' } },
                h3: { block: 'h3', remove: 'all', exact: true, styles: { 'font-size': '16px', 'font-weight': '300', width: '100%', padding: '40px 0 10px 0',
                    'vertical-align': 'middle' } }
            }

Thanks beforehand!

2

Re: Clean inline styles when applying a format

I've finally come up with a solution consisting in a kind of "configuration hack". I just set the styles via the attributes options instead of the styles one, and so, each time you set a format, the full style html attribute is replaced by the new one.

The code is just as follows:

            formats: {
                p: { block: 'p', remove: 'all', attributes: { style: "padding: 0 0 1em 0; font-size: 13px; line-height: 1.5em" } },
                h1: { block: 'h1', remove: 'all', attributes: { style: "font-size: 16px; font-weight: 600; width: 100%" } },
                h2: { block: 'h2', remove: 'all', attributes: { style: "padding: 0 0 1em 0; line-height: 1.5em; color: #1E96FA; font-size: 16px; font-weight: 600; width: 100%"} },
                h3: { block: 'h3', remove: 'all', exact: true, attributes: { style: "font-size: 16px; font-weight: 300; width: 100%; padding: 40px 0 10px 0; vertical-align: middle"} }
            }