Adding <aside> to the WYSIWYG

Question

I'm trying to add the <aside> tag to the WYSIWYG, just like you can add a blockquote. (Basically have a button to wrap the element in an <aside> tag)

I can't seem to find out how to add it by programming means, and things like the plugin Advanced TinyMCE doesn't seem to contain the option.

So how can I add a custom tag to the WYSIWYG?

Answer 1

TinyMCE has a 'formats' dropdown that you can add options to:

This option enables you to add more advanced style formats for text and other elements to the editor. The value of this option will be rendered as styles in the styleselect dropdown toolbar item.

https://www.tinymce.com/docs/configure/content-formatting/#style_formats

The first thing you need to do is add this dropdown to the editor. WordPress does not enable it by default:

function wpse_307115_mce_buttons( $buttons ) {
    if ( ! in_array( 'styleselect', $buttons ) ) {
        array_splice( $buttons, 1, 0, 'styleselect' );
    }

    return $buttons;
}
add_filter( 'mce_buttons_2', 'wpse_307115_mce_buttons' );

Then you can use the tiny_mce_before_init hook to add the necessary configuration options to the editor:

function wpse_307115_tiny_mce_init( $init_array ) {
    $init_array['style_formats'] = json_encode( array(
        array(
            'title' => 'Aside',
            'block' => 'aside',
        ),
    ) );

    return $init_array;
}
add_filter( 'tiny_mce_before_init', 'wpse_307115_tiny_mce_init' );