3

If you click "Increase indent" in the visual editor it adds the following code into the text editor:

<p style="padding-left:30px;">

How to change it to text-indent: 30px; not affecting the core files?

I searched in a lot of files and didn't found any piece of code that would be responsible for that.

Thanks.

2 Answers 2

1

You need to modify the TinyMCE settings object on instantiation:

Reference: TinyMCE documentation - content formatting

WordPress provides a filter for this very purpose called tiny_mce_before_init which you can use as follows:

function modify_tinymce_settings($settings) {

    $settings['indentation'] = '10px';

    return $settings;
}

add_filter('tiny_mce_before_init', 'modify_tinymce_settings');

If that does not work precisely, then dump the output of $settings in the hook above to see where values for indentation are held, they may be nested as part of a multi-dimensional array.

2
  • This gives an idea for a fun day at work, first of April, with: if( '4-1' === date( 'n-j' ) ) $settings['indentation'] = rand( 50, 300 ) . 'px'; ;-)
    – birgire
    Mar 14, 2016 at 9:10
  • 1
    @birgire hahaha... you have planted the seed, boy am I going to have some pissed clients.
    – Adam
    Mar 14, 2016 at 9:41
0

This might guide you in the right direction:

http://codex.wordpress.org/TinyMCE_Custom_Buttons

Specifically the part of adding your own buttons. Since there should be hooks you can probably get away with just modifying the filters tinymce already has.

Adding Custom CSS Styles to MCE Editor

A common use-case for custom TinyMCE plugins is the need for buttons that generate custom styles used in a site's theme, beyond the default HTML tags like Blockquote and Strong. This need is accounted for by the built-in (but hidden in WordPress) 'styleselect' button in TinyMCE and the ability to register custom formats that users can insert using it.

See TinyMCE Custom Styles for information about adding a pulldown menu with custom styles to TinyMCE.

Also see add_editor_style() which is used to register a custom CSS file for TinyMCE that will make the Visual editor display post content the way it will be shown on the frontend of the site.

1
  • Yeah I read that already, but still can't find a file and the piece of code that actually pushes the "padding-left:30px;" to the text editor after selecting a text in visual editor and clicking in TinyMCE Toolbar "Increase/decrease indent".
    – SLH
    Dec 5, 2014 at 19:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.