TinyMCE의 사용자 지정 형식 div가 이전 div와 병합

TinyMCE의 사용자 지정 형식 div가 이전 div와 병합

편집기에서 다음을 사용하여 사용자 지정 형식을 만들었습니다.

array(
    'title' => 'Tab',
    'block' => 'div',
    'classes' => 'tab',
    'wrapper' => true,
    'exact' => true,
),

그런 다음 텍스트를 선택하고 형식을 선택하여 다음을 얻을 수 있습니다.

<div class="tab">
   <h3>My Content heading 1</h3>
   <p>My first bit of content here...</p>
</div>

지금까지, 좋아요.그러나 다음 텍스트를 선택하고 내 형식을 선택하면 새 div를 삽입하는 대신 기존 div를 확장하므로 다음과 같은 결과를 얻을 수 있습니다.

<div class="tab">
  <h3>My Content heading 1</h3>
  <p>My first bit of content here...</p>
  <h3>My Content heading 2</h3>
  <p>My second bit of content here...</p>
</div>

내가 원하는 것이 이것일 때:

<div class="tab">
  <h3>My Content heading 1</h3>
  <p>My first bit of content here...</p>
</div>
<div class="tab">
  <h3>My Content heading 2</h3>
  <p>My second bit of content here...</p>
</div>

형식을 만들 때 "정확한" 매개 변수를 설정해도 이 동작이 변경되지 않을 것 같습니다.살려주세요.

테마의 '기능'에 이러한 기능을 추가합니다.TinyMCE에 새 버튼을 등록하기 위한 'php'.

// init scripts
add_action( 'after_setup_theme', 'custom_tinymce_theme_setup' );

if ( ! function_exists( 'custom_tinymce_theme_setup' ) ) {
    function custom_tinymce_theme_setup(){
        add_action( 'admin_init', 'custom_tinymce_theme_add_editor_styles' );
        add_action( 'init', 'custom_tinymce_buttons' );
    }
}

// add editor custom css
if ( ! function_exists( 'custom_tinymce_theme_add_editor_styles' ) ) {
    function custom_tinymce_theme_add_editor_styles() {
        add_editor_style( 'custom-editor-style.css' );
    }
}

// add editor button filter
if ( ! function_exists( 'custom_tinymce_buttons' ) ) {
    function custom_tinymce_buttons() {
        if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
            return;
        }
        if ( get_user_option( 'rich_editing' ) !== 'true' ) {
            return;
        }

        add_filter( 'mce_external_plugins', 'custom_tinymce_add_buttons' );
        add_filter( 'mce_buttons', 'custom_tinymce_register_buttons' );
    }
}

// call editor custom js
if ( ! function_exists( 'custom_tinymce_add_buttons' ) ) {
    function custom_tinymce_add_buttons( $plugin_array ) {
        $plugin_array['wrap_tab'] = get_template_directory_uri().'/js/tinymce_buttons.js';
        return $plugin_array;
    }
}

// add button to editor
if ( ! function_exists( 'custom_tinymce_register_buttons' ) ) {
    function custom_tinymce_register_buttons( $buttons ) {
        array_push( $buttons, 'wrap_tab' );
        return $buttons;
    }
}

그런 다음 '[테마]/js' 디렉터리 아래에 'tinymce_buttons.js'라는 이름의 새 JS 파일을 만들고 다음 코드를 추가합니다.

(function() {
    tinymce.PluginManager.add( 'wrap_tab', function( editor, url ) {
        editor.addButton('wrap_tab', {
            title: 'Insert Tab',
            cmd: 'wrap_tab',
            text: 'Tab',
        });

        editor.addCommand('wrap_tab', function() {
            var selected_text = editor.selection.getContent({
                'format': 'html'
            });
            if ( selected_text.length === 0 ) {
                alert( 'Please select text that needs to be wrapped.' );
                return;
            }
            var return_content = '<div class="tab">' + selected_text + '</div>';
            editor.execCommand('mceReplaceContent', false, return_content);
            return;
        });
    });
})();

그런 다음 CSS 스타일을 포함할 수 있습니다. DIV 요소에 대한 스타일 정의가 있는 테마 폴더 아래에 'custom-editor-style.css'라는 이름의 새 CSS 파일을 만들 수 있습니다.

#tinymce .tab{ padding:10px; border: 1px #666 solid; }

이것이 도움이 되고 크레딧이 https://madebydenis.com/adding-custom-buttons-in-tinymce-editor-in-wordpress/ 에 전달되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/46019046/custom-format-div-in-tinymce-merges-with-previous-div