TinyMCE追加用のスタイルを初期化

TinyMCE追加用のスタイルを初期化

概要

TinyMCE追加用のスタイルを初期化

施策

php

/*--------------------------------------------------------
//TinyMCE追加用のスタイルを初期化
--------------------------------------------------------*/
if ( !function_exists( 'initialize_tinymce_styles' ) ):
    function initialize_tinymce_styles($init_array) {
        //追加するスタイルの配列を作成
        $style_formats = array(
            array(
                'title' => 'テキスト青色',
                'inline' => 'span',
                'classes' => 'txt_blue'
            )
        );
        //JSONに変換
        $init_array['style_formats'] = json_encode($style_formats);
        return $init_array;
    }
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

//TinyMCEにスタイルセレクトボックスを追加
if ( !function_exists( 'add_styles_to_tinymce_buttons' ) ):
    function add_styles_to_tinymce_buttons($buttons) {
        //見出しなどが入っているセレクトボックスを取り出す
        $temp = array_shift($buttons);
        //先頭にスタイルセレクトボックスを追加
        array_unshift($buttons, 'styleselect');
        //先頭に見出しのセレクトボックスを追加
        array_unshift($buttons, $temp);

        return $buttons;
    }
endif;
add_filter('mce_buttons_2','add_styles_to_tinymce_buttons');

ビジュアルエディタにHTMLを直挿入するためのボタンを追加

概要

ビジュアルエディタにHTMLを直挿入するためのボタンを追加

施策

php

/*--------------------------------------------------------
// ビジュアルエディタにHTMLを直挿入するためのボタンを追加
--------------------------------------------------------*/
function add_insert_html_button( $buttons ) {
    $buttons[] = 'button_insert_html';
    $buttons[] = 'button_insert_html2';
    $buttons[] = 'button_insert_html3';
    $buttons[] = 'button_insert_html4';
    $buttons[] = 'button_insert_html5';
    $buttons[] = 'button_insert_html6';
    $buttons[] = 'button_insert_html7';
    return $buttons;
}
add_filter( 'mce_buttons', 'add_insert_html_button' );

function add_insert_html_button_plugin( $plugin_array ) {
    $plugin_array['custom_button_script'] =  get_stylesheet_directory_uri() . "/assets/js/editor.js";
    return $plugin_array;
}
add_filter( 'mce_external_plugins', 'add_insert_html_button_plugin' );

editor.js

(function() {
    tinymce.create('tinymce.plugins.MyButtons', {
        init : function(ed, url) {
            ////ボタン設定/////////////////////////
            ed.addButton( 'button_insert_html', {
                title : '大ボタン',
                image : url + '/ico_btn_l.svg',
                cmd: 'button_insert_html_cmd'
            });
            // ボタンの動作
            ed.addCommand( 'button_insert_html_cmd', function() {
                var selected_text = ed.selection.getContent();
                var return_text = '<a href="" class="btn_sty01 big_btn">' + selected_text + '</a>';
                ed.execCommand('mceInsertContent', 0, return_text);
            });
        },
        createControl : function(n, cm) {
            return null;
        }
    });
    /// Start the buttons
    tinymce.PluginManager.add( 'custom_button_script', tinymce.plugins.MyButtons );
})();

TinyMCE Templates をAdvance Custom Fieldに適用

概要

TinyMCE Templates をAdvance Custom Fieldに適用

施策

/*-------------------------------------------------------
TinyMCE Templates をAdvance Custom Fieldに適用
--------------------------------------------------------*/
add_filter( 'tinymce_templates_enable_media_buttons', function(){ return true;
// Displays insert template button on all visual editors
} );