php - How to add style formats to WordPress wp_editor()

I am trying to apply styles to all images that are inserted into my wp_editor() textarea using PHP. I have tried the following but had no success:

<?php
    $settings = array(
        'style_formats' => array(
            array( 
                'block' => 'img', 
                'styles' => array(
                    'width' => '100%'
                )
            )
        )
    );
    
    echo wp_editor('', 'email-content', $settings); 
?>

What is the correct syntax to do this?

I have used the following docs to try complete this task:

https://developer.wordpress.org/reference/functions/wp_editor/

https://www.tiny.cloud/docs/configure/content-formatting/

Solution:

I'm unsure about your request but if you're trying to inject css into the admin panel this is the way:

<?php function theme_admin_css() {
echo '
<style media="screen">
/* ... Your custom css goes here ... */
</style>
'; }
add_action( 'admin_head', 'theme_admin_css' ); ?>

Solution:

If you only want to make all images 100%, then it might be more appropriate to just do it in your CSS stylesheet.

If you need to customise the WP Editor (which uses the TinyMCE editor), there are a few ways to do it, depending on what you want. The description and the code in your question don't match so I've given both options below:

1. Add a "Custom Styles" dropdown to the editor toolbar

The code in your question is what you would use to add a custom styles dropdown, similar to the default styles (Paragraph, Heading 1 etc). You can do this using the following code to your functions.php.

This adds a dropdown called "Formats" with 2 options - one to add the style directly on the image and one that adds a custom class to the image (which is preferable because it gives you more flexibility):

1. Set up the custom styles in the TinyMCE Editor settings
function my_mce_insert_custom_styles( $settings) {  
    // Create your array of custom styles to add
    $style_formats = array(  
        // 1. OPTION TO ADD STYLE DIRECTLY TO THE IMAGE
        array( 
            'title' => '100% Width Image Style',
            'selector' => 'img',  
            'styles' => array( 'width' => '100%' )
        ),
        // 2. OPTION TO ADD A CLASS TO THE IMAGE
        array( 
            'title' => 'Add My Class to Image',
            'selector' => 'img',  
            'classes' => 'my_image_class',
        )
    );  
    // Add the array the 'style_formats' setting
    $init_array['style_formats'] = json_encode( $style_formats );   
    return $init_array;   
} 
add_filter( 'tiny_mce_before_init', 'my_mce_insert_custom_styles' ); 


// 2. Add custom styles to the 2nd toolbar of your Wordpress editor
function my_mce_buttons_2($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

Now will have an extra "Formats" drop down in the 2nd toolbar on the editor. When you select an image, you can choose either of the formats above to apply to the image.

2. Automatically add a style / class to the inserted image

Even though you were using the code above, your description sounds like you want to automatically apply styling.

You can do this by adding the the following to your functions.php. Again, I have given options for adding the style directly to the image, or adding a class - you can remove the option you don't need:

function my_custom_image_styling($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $doc = new DOMDocument();
    $doc->loadHTML($html);
    $imgs = $doc->getElementsByTagName('img');

    foreach($imgs as $img){
        // 1. ADD THE STYLE ATTRIBUTE DIRECTLY TO THE IMAGE
        $styles = $img->getAttribute("style");
        $img->setAttribute("style", $styles."width:100%;");

        // OR 2. ADD A CLASS TO THE IMAGE
        $classes = $img->getAttribute("class");
        $img->setAttribute("class", $classes." my_image_class");
    }
    $html = $doc->saveHTML();
    return $html;
}
add_filter('image_send_to_editor', 'my_custom_image_styling', 1, 8);

Now, depending on which lines you use, the style or class will automatically be added to the image when it is being inserted into the editor.

References