Gutenberg が 来るっていうのに tinyMCE の カスタマイズ の 備忘録

今更感ですが…

忘れないように…

ねっ??

Block Formats

見出しをつける時に h1 じゃなくて コンテンツ部は h3 から 始めてほしい 等 あると思うのですが

そういう時に カスタマイズしてあげます

内容はこちらと一緒です

ビジュアルエディタ の フォーマット の 中身 を 書き換える
https://tekuaru.jack-russell.jp/2015/08/29/302/

add_filter( 'tiny_mce_before_init', function( $initArray ) {

  $block_formats = array(
                     __( 'Paragraph', 'tekuaru' ) . '=p;',
                     __( 'Heading 1', 'tekuaru' ) . '=h3;',
                     __( 'Heading 2', 'tekuaru' ) . '=h4;',
                     __( 'Heading 3', 'tekuaru' ) . '=h5;',
                     __( 'Heading 4', 'tekuaru' ) . '=h6;',
                     __( 'Preformatted', 'tekuaru' ) . '=pre;',
                   );

  $initArray['block_formats'] = implode( ' ', $block_formats );

  return $initArray;

} );

Style Formats

こちらは class名 が 付けらるのです

なので Bootstrap の CSS を 使っている この テーマ では 重宝します

ちなみに サンプルは Alerts の スタイルサンプル ですね

add_filter( 'mce_buttons', function( $buttons ) {
  array_unshift( $buttons, 'styleselect' );
  return $buttons;
} );

add_filter( 'tiny_mce_before_init', function( $initArray ) {

  $style_formats = array(
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Primary', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-primary',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Secondary', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-secondary',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Success', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-success',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Danger', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-danger',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Warning', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-warning',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Info', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-info',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Light', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-light',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Dark', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-dark',
      'wrapper' => false,
    ),
  );

  $initArray['style_formats'] = json_encode( $style_formats );

  return $initArray;
} );

ホント 今更ですね…