Adding <aside> to the WYSIWYG

Question

Adding <aside> to the WYSIWYG

Fredy31

2018年6月27日 22:07

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?

Topic wysiwyg html html5 Wordpress

Category Web

Jacob Peattie · Accepted Answer · 2018年6月27日 16:49

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' );

Adding <aside> to the WYSIWYG

About