CODEWITHSUNDEEP
javascripttinymce
latca
latca

Reputation: 133

How to customize TinyMCE button output

I would like to change the default behavior of the indent button. By default the indent button adds a css style padding-left: 30px; to the paragraph tag. I would like to change that to margin-left: 20px or whatever number amount.

Upvotes: 2

Views: 1295

Answers (2)

LouD
LouD

Reputation: 3844

The setting 'indentation' lets you configure the amount. The option 'indent_use_margin' was added in January 2014 to let you switch the css attribute: https://github.com/tinymce/tinymce/pull/290

I needed this because we use TinyMCE to let users edit HTML emails and email clients (esp Outlook) are notorious about spotty CSS support.

Example:

    tinymce.init({
        indent_use_margin: true,
        indentation: 20,

Upvotes: 3

Ilia Frenkel
Ilia Frenkel

Reputation: 1977

I'm not sure it is possible without hacking into tinyMCE code. One option might be using custom style as shown here: http://www.tinymce.com/wiki.php/Configuration:style_formats

tinyMCE.init({
    ...
    style_formats : [
        {title : 'Indented text', inline : 'p', styles : {marginLeft : '20px'}}
    ]
});

And then apply the style instead of pressing indent button.

Upvotes: 2

Related Questions