TinyMCE : 형식 드롭 다운에 CSS 추가

TinyMCE 편집기의 본문에서 스타일을 미리 볼 수 있도록 add_editor_style ()을 사용하여 TinyMCE 스타일 시트를 성공적으로 추가했습니다.

그러나 add_editor_style () 함수가 편집기 본문의 스타일에만 액세스 할 수 있다고 가정합니까?

그렇다면 TinyMCE 형식 드롭 다운의 스타일에 액세스하는 데 사용할 수있는 다른 방법이나 기능이 있습니까?

드롭 다운 목록을 향상시킬 수 없습니다 formatselect. 그러나 tiny_mce_before_init두 번째 드롭 다운 훅 styleselect으로 기본 WordPress 설치에 숨겨져 있습니다. 문서는 모든 기본값과 가능성을 나열합니다.

• inline – 생성 할 인라인 요소의 이름입니다 (예 : "span"). 현재 텍스트 선택이이 인라인 요소로 줄 바꿈됩니다.
• block – 예를 들어 "h1"을 생성 할 블록 요소의 이름입니다. 선택 내의 기존 블록 요소가 새 블록 요소로 바뀝니다.
• 선택기 – 선택 기준 내에서 요소를 찾기위한 CSS 3 선택기 패턴입니다. 이것은 클래스를 특정 요소 또는 테이블의 홀수 행과 같은 복잡한 것에 적용하는 데 사용할 수 있습니다.
• classes – 선택된 요소 또는 새로운 인라인 / 블록 요소를 적용하기 위해 공백으로 구분 된 클래스 목록.
• 스타일 – 색상 등의 적용 할 CSS 타일 항목이있는 이름 / 값 객체
• attributes – 선택한 요소 또는 새 인라인 / 블록 요소에 적용 할 속성이있는 이름 / 값 객체입니다.
• exact – 사용시 유사한 스타일 병합 기능을 비활성화합니다. 밑줄 / 취소를위한 텍스트 장식과 같은 일부 CSS 상속 문제에 필요합니다.
• 래퍼 – 현재 형식이 블록 요소의 컨테이너 형식임을 나타내는 상태입니다. 예를 들어 div 래퍼 또는 인용 부호입니다.

스타일 버튼

기본적으로 스타일 드롭 다운은 WordPress에 숨겨져 있습니다. 먼저 사용자 지정 형식의 단추를 TinyMCE의 메뉴 표시 줄에 추가하십시오 (예 : hook 2 행) mce_buttons_2.

add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

커스텀 스타일

그런 다음이 버튼의 드롭 다운을 강화하십시오. 배열에서 추가 값을 통해 적용을 유용하게 사용하려면 이 예제 의 코덱 을 참조하십시오 .

/**
 * Add styles/classes to the "Styles" drop-down
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'My Test',
            'selector' => 'p',
            'classes' => 'mytest',
        ),
        array(
            'title' => 'AlertBox',
            'block' => 'div',
            'classes' => 'alert_box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color'         => 'red', // or hex value #ff0000
                'fontWeight'    => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

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

    return $settings;

}

결과

향상된 드롭 다운 메뉴

트리 메뉴를 사용하여 드롭 다운을 향상시킬 수도 있습니다. 다음 소스와 같이 배열의 구조가 더 많은 위의 예제 소스에서 var를 만듭니다.

    $style_formats = array(
        array(
            'title' => 'Headers',
                'items' => array(
                array(
                    'title' => 'Header 1',
                    'format' => 'h1',
                    'icon' => 'bold'
                ),
                array(
                    'title' => 'Header 2',
                    'format' => 'h2',
                    'icon' => 'bold'
                )
            )
        ),
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
        )
    );

더 많은 가능성과 매개 변수는 스타일 형식 드롭 다운 필드의 기본값 (자바 스크립트로 작성)을 참조하십시오.

var defaultStyleFormats = [
    {title: 'Headers', items: [
        {title: 'Header 1', format: 'h1'},
        {title: 'Header 2', format: 'h2'},
        {title: 'Header 3', format: 'h3'},
        {title: 'Header 4', format: 'h4'},
        {title: 'Header 5', format: 'h5'},
        {title: 'Header 6', format: 'h6'}
    ]},

    {title: 'Inline', items: [
        {title: 'Bold', icon: 'bold', format: 'bold'},
        {title: 'Italic', icon: 'italic', format: 'italic'},
        {title: 'Underline', icon: 'underline', format: 'underline'},
        {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
        {title: 'Superscript', icon: 'superscript', format: 'superscript'},
        {title: 'Subscript', icon: 'subscript', format: 'subscript'},
        {title: 'Code', icon: 'code', format: 'code'}
    ]},

    {title: 'Blocks', items: [
        {title: 'Paragraph', format: 'p'},
        {title: 'Blockquote', format: 'blockquote'},
        {title: 'Div', format: 'div'},
        {title: 'Pre', format: 'pre'}
    ]},

    {title: 'Alignment', items: [
        {title: 'Left', icon: 'alignleft', format: 'alignleft'},
        {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
        {title: 'Right', icon: 'alignright', format: 'alignright'},
        {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
    ]}
];

편집기에 사용자 정의 스타일 시트 추가

이제 마지막 형식으로 hook을 통해이 형식에 대한 사용자 정의 CSS를 포함시킵니다 mce_css.

/**
 * Apply styles to the visual editor
 */  
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {

    if ( ! empty( $url ) )
        $url .= ',';

    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';

    return $url;
}

이 스타일 시트 규칙을 프런트 엔드 스타일 시트에도 추가하는 것을 잊지 마십시오.

포맷 버튼 제거

향상된 기능으로 formatselect버튼 배열의 값을 확인 하여 드롭 다운 버튼을 제거 할 수 있습니다 . fb_mce_editor_buttons후크 의 함수 에 다음 소스를 추가하십시오 mce_buttons_2.

$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
    foreach ( $buttons as $key => $value ) {
        if ( 'formatselect' === $value )
            unset( $buttons[$key] );
    }
}

당 이 답변 , 스타일을 얻는 데 키가 드롭 다운은이다에 표시unset($settings['preview_styles']);

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    // customize as desired

    // unset the preview styles
    unset($settings['preview_styles']);`

    return $settings;
}

매우 도움이되고 defaultstyles포인터 주셔서 감사합니다 . 기본 옵션을 유효한 JSON (유효한 JavaScript가 아님)으로 변환 할 때까지 배열 병합이 작동하지 않는 것을 발견했습니다. 아래는 WordPress tinymce의 드롭 다운을 교체하는 대신 추가 할 수 있습니다

기본 옵션 (JSON) :

$defaults = '[{ "title": "Headers", "items": [
        { "title": "Header 1", "format": "h1" },
        { "title": "Header 2", "format": "h2" },
        { "title": "Header 3", "format": "h3" },
        { "title": "Header 4", "format": "h4" },
        { "title": "Header 5", "format": "h5" },
        { "title": "Header 6", "format": "h6" }
    ] },

    { "title": "Inline", "items": [
        { "title": "Bold", "icon": "bold", "format": "bold" },
        { "title": "Italic", "icon": "italic", "format": "italic" },
        { "title": "Underline", "icon": "underline", "format": "underline" },
        { "title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough" },
        { "title": "Superscript", "icon": "superscript", "format": "superscript" },
        { "title": "Subscript", "icon": "subscript", "format": "subscript" },
        { "title": "Code", "icon": "code", "format": "code" }
    ] },

    { "title": "Blocks", "items": [
        { "title": "Paragraph", "format": "p" },
        { "title": "Blockquote", "format": "blockquote" },
        { "title": "Div", "format": "div" },
        { "title": "Pre", "format": "pre" }
    ] },

    { "title": "Alignment", "items": [
        { "title": "Left", "icon": "alignleft", "format": "alignleft" },
        { "title": "Center", "icon": "aligncenter", "format": "aligncenter" },
        { "title": "Right", "icon": "alignright", "format": "alignright" },
        { "title": "Justify", "icon": "alignjustify", "format": "alignjustify" }
        ] }
 ]'; 

functions.php에서 더 큰 옵션 해시를 반환합니다.

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    $style_formats = array(
    //....

    $settings['style_formats'] = json_encode( array_merge( json_decode($defaults), $style_formats ) );
    return $settings;
}