TinyMCE에 사용자 정의 CSS (테마 옵션)를 추가하는 방법?

14

WordPress의 TinyMCE 비주얼 편집기에 사용자 정의 CSS (테마 옵션을 통해 설정)를 추가하려고합니다. 프론트 엔드에서 테마는이 CSS를 생성하여 wp_head후크 에 출력합니다 . 내가 겪고있는 문제는 CSS 출력을 편집기에 추가 할 수 있다는 것입니다.

add_editor_style( 'editor-style.css' )테마 옵션에 액세스하려면 PHP를 사용해야하므로이 작업을 수행 할 수 없습니다 .

프런트 엔드에서 작동하는 방법의 예 :

add_action( 'wp_head', 'my_custom_colors' );

function my_custom_colors() {
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "<style type='text/css'>a { color: #{$color_1}; }";
}

해당 사용자 정의 스타일을 비주얼 편집기로 가져 오는 방법이 필요합니다. 도움을 주시면 감사하겠습니다.

tinymce 
— 저스틴 태 들락
소스
1
참고 : 사용자 정의 포스트 컨텐츠 CSS는 플러그인 영역 이므로 테마에 넣지 않아야합니다. 그렇지 않으면 다른 테마로 전환 할 때 사용자 정의 CSS가 손실됩니다.
— Chip Bennett
@ ChipBennett 나는 부분적으로 동의합니다. 이것은 매우에 따라 무엇을 당신이 스타일링하고 있습니다. 그 외에도, 그 질문의 위치는 중요하지 않습니다.
— kaiser
@ChipBennett 이것은 사용자 정의 게시물 컨텐츠 CSS가 아닌 테마 스타일과 관련이 있습니다. 이것은 테마 사용자 정의 프로그램으로 할 수있는 매우 표준적인 것입니다. 그것은 나를 막힌 이러한 스타일을 적용하고 있습니다. editor-style.css테마 영역 인 칭찬을 의미합니다 .
— Justin Tadlock
잠깐만 : 동적 사용자 정의 편집기 스타일 에 대해 이야기하고 있습니까? 에서와 같이 : 비주얼 편집기 (TinyMCE)가 테마 옵션 정의 스타일을 인식하게합니까? 그렇다면 내 원래 의견을 무시 하고 질문에 +1 하십시오.
— Chip Bennett
편집 을 제출 하고 테마 스타일에 대한 전체 세트의 예를 보여줄 수 있습니까? 그렇다면 테스트하기가 더 쉬울 것입니다.
— kaiser

답변:

7

해결책 1

이것은 자바 스크립트 솔루션으로 작동합니다.

예:

tinyMCE.activeEditor.dom.addStyle('p {color:red; font-size:28px;}');

js 콘솔을 열고 빠른 테스트를 위해 붙여 넣기 만하면됩니다. 특정 편집기를 대상으로하려면 다음을 사용해야합니다.

tinyMCE.getInstanceById('##editorID##').dom.addStyle('p {color:red; font-size:28px;}');

제공된 문자열을 편집기 iframe에 삽입합니다. <head><style id="mceDefaultStyles"></style> ...

해결책 2

필터를 사용하여 편집기 초기화에 동적 스타일을 추가하려면 콜백 핸들러로 wp_ajax를 사용하십시오.

add_filter('tiny_mce_before_init', 'dynamic_editor_styles', 10);

function dynamic_editor_styles($settings){
    // you could use a custom php file as well, I'm using wp_ajax as
    // callback handler for demonstration
    // content_css is a string with several files seperated by a comma
    // e.g. file1, file2, ... extend the string

    $settings['content_css'] .= ",".admin_url('admin-ajax.php') ."/?action=dynamic_styles";

    return $settings;
}

// add wp_ajax callback
add_action('wp_ajax_dynamic_styles', 'dynamic_styles_callback');
function dynamic_styles_callback(){
    echo "p {color:red} h1{font-size:48px;}";
}
— Ungestaltbar
소스
2
나는 그것으로 무엇을 해야할지 확실하지 않습니다.
— Justin Tadlock
솔루션 # 2는 실제로 제게 의미가 있습니다. 테스트 실행을하겠습니다.
— Justin Tadlock
나는 해결책 # 2와 함께 갔다. 차이점은 첫 번째 기능을 삭제하고 add_editor_style( add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) )테마가 편집기 스타일을 추가하는 표준 방법이기 때문에 사용했다는 것 입니다.
— Justin Tadlock
내 자신의 교화를 위해서, 나는 mce_css당신을 위해 일했는지 (당신이 그것을 시도한 경우) 알고 싶어합니다 .
— Chip Bennett
CSS가 아닌 파일을에 전달할 수 있다는 것을 알고 있었기 때문에 실제로 시도 add_editor_style()하지는 않았지만 코드를 보면 잘 작동합니다. 를 mce_css통해 스타일을 추가 한 후 연결해야하는 경우 실제로 사용 하는 것이 더 나은 솔루션입니다 add_editor_style(). 테마에서 이러한 이유 중 하나 add_editor_style()는 추가 된 순서에도 불구하고 통해 추가 된 전체 URL 이 먼저 출력 되기 때문 입니다.
— Justin Tadlock
10

WordPress 는mce_css 사용자 정의 스타일 시트를 Visual Editor에 추가하는 데 사용할 수 있는 필터를 제공합니다 . 코덱스에 따르면 :

파일은 .php 파일 일 수 있으며 컨텐츠 편집기에 대해 CSS 규칙을 동적으로 생성 할 수 있습니다.

테마에 맞게 수정 된 코덱 필터 콜백 예 :

function wpse120831_mce_css( $mce_css ) {
    if ( ! empty( $mce_css ) )
        $mce_css .= ',';

    $mce_css .= get_template_directory_uri() . '/dynamic-css.php';

    return $mce_css;
}

add_filter( 'mce_css', 'wpse120831_mce_css' );
— 칩 베넷
소스
Mr.Bennett는 더 빠르며 아래 답변에도 추가했습니다. :), 약간 다릅니다.
— ungestaltbar
@ungestaltbar 우리는 실제로 완전히 다른 두 개의 필터를 사용하고 있습니다. :)
— Chip Bennett
같은 결과 :)
— ungestaltbar
4

@ungestaltbar에 의해 위의 솔루션을 수락했습니다. 그러나 다른 사람들이 어떻게 작동하는지 볼 수 있도록 사용중인 전체 솔루션 으로이 답변을 조금 확장하고 싶었습니다.

add_action( 'after_setup_theme', 'my_theme_setup' );

function my_theme_setup() {

    add_editor_style(
        array(
            'editor-style.css',
            add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) ),
        )
    );
}

add_action( 'wp_ajax_my_editor_styles', 'my_editor_styles_callback' );
add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );

function my_editor_styles_callback() {

    // @todo sanitize
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "a { color: #{$color_1}; }";

    die();
}

여기에 다른 답변을 게시해도 괜찮습니다. 수락 된 솔루션에 직접 회신하여 게시 할 수있는 방법을 보지 못했습니다. 여전히 WPSE 사용법을 배우고 있습니다.

— 저스틴 태 들락
소스
add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );프론트 엔드에서 편집기가 사용 된 경우 (로그인되지 않은 사용자의 경우) 추가해야 할 수 있습니다 .
— OriginalEXE
예, 중대한 변경 / 조정을 통한 답변은 완벽합니다. :) 참고로 원래 답변으로 수정해야 할 문제가 있으면 수정 사항을 제출하는 것이 좋습니다.
— Rarst
@OriginalEXE-p. 업데이트하겠습니다.
— Justin Tadlock
나중에 이것을 발견 한 다른 사람들을위한 팁, 나는 그것이 제시 된대로 올바르게 작동하도록 할 수 없었습니다. 마지막으로 콜백에 헤더 정보를 포함시켜야한다는 것을 알았으므로 CSS로 표시됩니다. header ( "콘텐츠 유형 : text / css; 문자셋 : UTF-8"); 이것이 내 .htaccess 또는 다른 점인지 확실하지 않습니다.
— SkyShab
4

아마이 파티에 늦었을 수도 있지만 위의 솔루션을 사용한 후 곧 에디터의 페이지로드 속도가 심각하게 손상되었다는 것을 깨달았습니다! 코드를 예리하게 살펴보면 tinyMCE.activeEditor가 초기화 된 후에도 코드가 계속 실행된다는 것을 깨달았습니다. 코드는 지정된 간격으로 표현식을 평가하는 setInterval () 메소드를 사용합니다. 코드 실행 중 "activeEditor"를 사용할 수있는 시점을 결정할 수 없기 때문입니다. 이것이 페이지 속도를 무릎으로 낮추는 것입니다.

플러그인을 빌드하는 데 사용하는 훨씬 더 나은 솔루션은 다음과 같습니다.

   /**
     * Extend TinyMCE config with a setup function.
     * See http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onInit

     */
    function custom_tinymce_css($init) {

      $css = get_option('some_css'); 

     ?>

        <script type="text/javascript">            

            function addTempCSS( ed ) {
                ed.onInit.add( function() {
                    tinyMCE.activeEditor.dom.addStyle(<?php echo json_encode($css) ?>);
                } );
            };
        </script>

        <?php
        if (wp_default_editor() == 'tinymce')
            $init['setup'] = 'addTempCSS';

        return $init;
    }
    add_filter('tiny_mce_before_init', 'custom_tinymce_css');

여기에서 기본 TinyMCE 리스너는 활성 편집기가 초기화 된 후 코드를 실행하는 데 사용됩니다. 나는 이것이 누군가를 도울 수 있기를 바랍니다. 친절합니다.

— 아이에 바레 M
소스
1
그것은 단지 나를 위해이 작업은 TinyMCE에 당신이 ed.onInit.add (함수 () {... ed.on ( '초기화'기능 (에) {... 변경해야 4.0에서 사용되지 않는 API 호출이
— 모하메드
1

이 질문에 대한 WordPress.org 포럼에 게시 된 수정 된 솔루션입니다. http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

이것은 확실히 작동합니다. 나는 JS 전문가가 아니므로 이것이 최선의 해결책인지 확실하지 않습니다.

add_action( 'before_wp_tiny_mce', 'my_tinymce_callback' );

function my_tinymce_callback() {

    $color_1 = get_theme_mod( 'color_1', 'cc4a00' ); ?>

    <script type="text/javascript">
    jQuery( document ).ready(

        function() {
            var my_style = 'a { color: #<?php echo $color_1; ?>; }';

            var checkInterval = setInterval(
                function() {

                    if ( 'undefined' !== typeof( tinyMCE ) ) {
                        if ( tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() ) {

                            jQuery( '#content_ifr' ).contents().find( 'head' ).append( '<style type="text/css">' + my_style + '</style>' );

                            clearInterval( checkInterval );
                        }
                    }
                }, 
                500 
            );
        }
    );
    </script>
<?php }

이것은 JS 파일에 추가 될 수도 있습니다. 이를 통해 변수를 쉽게 전달할 수 있습니다 wp_localize_script().

— 저스틴 태 들락
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.