WP 4.6의 TinyMCE에 자체 폐쇄 단축 코드 버튼 추가

다음과 같은 자체 폐쇄 단축 코드를 작성하는 데 익숙합니다.

// shortcode
function wpse_shortcode_example( $wpse_atts ) {

    // Attributes
    $wpse_atts = shortcode_atts(
        array(
            'foo' => 'bar',
            'width' => '100%',
            'height' => 'auto',
        ),
        $wpse_atts,
        'wpse'
    );

    // Return
    return '<embed 
             src="' . $wpse_atts['src'] . '"
             width="' . $wpse_atts['width'] . '"
             height="' . $wpse_atts['height'] . '";

}
add_shortcode( 'wpse', 'wpse_shortcode_example' );

하지만 TinyMCE에 추가하고 싶습니다. 여러 번 검색했지만 모든 검색 결과는 날짜가 있거나 더 이상 권장되지 않는 방법을 사용합니다.

• TinyMCE 편집기에 단축 코드 버튼을 추가하는 방법은 무엇입니까? : 훌륭한 출발점이지만 질문은 2012 년에 만들어졌습니다.
• WordPress Shortcodes : A Complete Guide : 좋은 기사지만 2012 년부터 사용 query_posts()되었지만 조정될 수 있음
• 나만의 WordPress 편집기 단추 만들기 가이드 : 좋은 기사이지만 2013 년 이전의 기사이지만 TinyMCE를 사용하기위한 기본 사항이나 기초는 다루지 않습니다.

나는 개발자는 여전히이 초기 단계지만 약 플러그인 핸드북 간략 회담의 알고있는 TinyMCE에 향상된 단축 코드 와 단축 코드 API를 하고 add_shortcode()TinyMCE를 언급하지 않습니다.

그래서 이것은 내 질문으로 이어집니다. TinyMCE 편집기에서 자체 폐쇄 단축 코드를 클릭 가능한 버튼으로 전환하는 기본 절차는 무엇입니까?

우리는 사용자 정의 TinyMCE 버튼을 추가하여 시작합니다 :

function add_mce_button_custom_em() {
    // check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'add_tinymce_plugin_custom_em' );
        add_filter( 'mce_buttons', 'register_mce_button_custom_em' );
    }
}
add_action('admin_head', 'add_mce_button_custom_em');

그런 다음 새 버튼을 선언하고 등록하십시오.

// Declare script for new button
function add_tinymce_plugin_custom_em( $plugin_array ) {
    $plugin_array['custom_em'] = get_template_directory_uri() .'/plug/custom-em/custom-em.js';
    return $plugin_array;
}

// Register new button in the editor
function register_mce_button_custom_em( $buttons ) {
    array_push( $buttons, 'custom_em' );
    return $buttons;
}

마지막으로, 표시하려는 버튼 ( 콘텐츠 포맷 에서 더 많은 버튼을 찾을 수 있음 )을 결정합니다. 분명히 UX를 염두에두면 몇 가지 예만 표시 할 수 있습니다.

// TinyMCE: TinyMCE choose which buttons you want to display
function myformatTinyMCE( $in ) {
    $in['toolbar1'] = 'styleselect,bold,custom_em,blockquote,hr,aligncenter,link,unlink,spellchecker,undo,removeformat';
    return $in;
}
add_filter( 'tiny_mce_before_init', 'myformatTinyMCE' );

add_tinymce_plugin_custom_em함수 에서 볼 수 있듯이 내부에 자바 스크립트 파일을 선언하고 있습니다.get_template_directory_uri() .'/plug/custom-em/custom-em.js'

그래서 만들 custom-em.js파일을, 그리고 당신은 이것에 대해 이동하는 방법은 두 가지가 있습니다.

다음 단축 코드 형식을 사용 [shortcode foo="" bar=""]하거나 [shortcode][/shortcode].

[shortcode foo="" bar=""]형식으로 시작합시다 .

(function() {
    tinymce.create('tinymce.plugins.custom_em', {
        init : function(ed, url) {
            ed.addButton('custom_em', {
                title : 'Custom EM',
                image : url+'/images/btn_custom_em.png',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "[shortcode foo=\"\" bar=\"\"]"
                    );
                }
            });
        }
    });
    tinymce.PluginManager.add('custom_em', tinymce.plugins.custom_em);
})(); 

보시다시피 이미지를 버튼 아이콘으로 사용합니다. 아래 예에 설명 된대로 텍스트로 변경할 수 있습니다.

다음은 우리 자신의 플랫폼에서 사용하는 것입니다 <em class="whatever">hello world</em>.

(function() {
    tinymce.PluginManager.add('custom_em', function( editor, url ) {

        editor.on('init', function(e) {
            this.formatter.register('thetarget', {
                inline : 'em',
                classes : 'whatever'
            });
        });

        editor.addButton('custom_em', {
            text: 'Custom EM',
            icon: false,
            onclick : function() {
                var contents = editor.selection.getContent(),
                tags = jQuery(jQuery.parseHTML(contents)).find('em.whatever').andSelf();
                editor.formatter.toggle('thetarget');
            }
        });
    });
})(jQuery);

결과를 게시하고 편집을 수행하십시오. TinyMCE는 전염병이며 두통이 필요하지만 협업 방식으로 해결할 수 있습니다.