Làm cách nào để thêm CSS tùy chọn (tùy chọn chủ đề) vào TinyMCE?

14

Tôi đang cố gắng thêm CSS tùy chỉnh (được đặt qua tùy chọn chủ đề) vào trình chỉnh sửa hình ảnh TinyMCE trong WordPress. Ở mặt trước, chủ đề tạo CSS này và xuất nó trên wp_headhook. Vấn đề tôi gặp phải là có thể thêm đầu ra CSS đó vào trình chỉnh sửa.

Điều này không thể thực hiện được add_editor_style( 'editor-style.css' )vì chúng ta cần sử dụng PHP để truy cập tùy chọn chủ đề.

Như một ví dụ về cách nó hoạt động ở mặt trước:

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}; }";
}

Tôi cần một phương pháp để có được phong cách tùy chỉnh đó vào trình soạn thảo trực quan. Mọi sự trợ giúp sẽ rất được trân trọng.

tinymce

— Justin Tadlock
nguồn

1

Lưu ý: CSS nội dung bài đăng tùy chỉnh là Lãnh thổ Plugin và không nên đưa vào Chủ đề. Nếu không, người dùng sẽ mất CSS tùy chỉnh khi chuyển sang Chủ đề khác.

— Chip Bennett

@ChipBennett Mình chỉ đồng ý một phần. Điều này phụ thuộc nhiều vào những gì bạn đang tạo kiểu. Ngoài ra, nó không quan trọng ở đâu (cho câu hỏi đó).

— kaiser

@ChipBennett Điều này phải làm với các kiểu chủ đề, không phải CSS tùy chỉnh nội dung bài đăng. Đây là công cụ khá chuẩn mà bạn có thể làm với tùy biến chủ đề. Nó chỉ áp dụng những phong cách mà tôi đã bối rối. Nó có nghĩa là để khen ngợi editor-style.css, đó là lãnh thổ chủ đề.

— Justin Tadlock

Chờ đã: bạn đang nói về phong cách biên tập tùy chỉnh năng động ? Như trong: làm cho trình soạn thảo trực quan (TinyMCE) biết về các kiểu được xác định tùy chọn Chủ đề? Nếu vậy, bỏ qua nhận xét ban đầu của tôi và +1 cho câu hỏi.

— Chip Bennett

Bạn có thể gửi một chỉnh sửa và hiển thị một ví dụ về một bộ đầy đủ cho phong cách chủ đề? Sẽ dễ dàng hơn để kiểm tra sau đó.

— kaiser

7

Giải pháp 1

Điều này hoạt động như giải pháp javascript:

Thí dụ:

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

chỉ cần mở giao diện điều khiển js của bạn và dán nó để kiểm tra nhanh. Để nhắm mục tiêu một trình soạn thảo cụ thể, bạn nên sử dụng:

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

Điều này sẽ đưa chuỗi được cung cấp vào iframe biên tập <head><style id="mceDefaultStyles"></style> ...

Giải pháp 2

Sử dụng wp_ajax làm trình xử lý gọi lại để thêm kiểu động trên trình soạn thảo init bằng cách sử dụng bộ lọc

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
nguồn

2

Tôi không hoàn toàn chắc chắn phải làm gì với điều đó.

— Justin Tadlock

Giải pháp số 2 thực sự rất có ý nghĩa với tôi. Tôi sẽ cho nó chạy thử.

— Justin Tadlock

Tôi đã đi với giải pháp # 2. Sự khác biệt là tôi đã bỏ chức năng đầu tiên và sử dụng add_editor_style( add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) )vì đây là cách tiêu chuẩn cho các chủ đề để thêm các kiểu trình soạn thảo.

— Justin Tadlock

Chỉ cần chỉnh sửa của riêng tôi, tôi tò mò muốn biết nếu mce_csslàm việc cho bạn (nếu bạn đã thử nó).

— Chip Bennett

Tôi thực sự đã không thử nó bởi vì tôi biết bạn có thể truyền một tệp không phải CSS cho add_editor_style()nó, nhưng nó sẽ hoạt động tốt khi nhìn vào mã. Sử dụng mce_cssthực sự là một giải pháp tốt hơn trong trường hợp bạn cần nối vào sau khi các kiểu được thêm qua add_editor_style(). Một lý do như vậy trong một chủ đề là vì các URL đầy đủ được thêm qua add_editor_style()là đầu ra trước, mặc dù thứ tự chúng được thêm vào.

— Justin Tadlock

10

WordPress cung cấp một mce_cssbộ lọc , có thể được sử dụng để thêm các bảng định kiểu tùy chỉnh vào Visual Editor. Theo Codex:

Tệp có thể là tệp .php, cho phép tạo quy tắc CSS động cho trình chỉnh sửa nội dung.

Ví dụ gọi lại bộ lọc Codex, được sửa đổi cho Chủ đề:

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' );

— Chip Bennett
nguồn

Mr.Bennett đã nhanh hơn, chỉ cần thêm nó vào câu trả lời của tôi dưới đây :), nhưng hơi khác.

— ungestaltbar

@ungestaltbar chúng tôi thực sự sử dụng hai bộ lọc hoàn toàn khác nhau. :)

— Chip Bennett

với kết quả tương tự :)

— ungestaltbar

4

Tôi đã chấp nhận giải pháp trên bởi @ungestaltbar. Tuy nhiên, tôi muốn mở rộng câu trả lời này một chút với giải pháp đầy đủ mà tôi đang sử dụng để người khác có thể thấy nó hoạt động như thế nào.

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();
}

Tôi hy vọng sẽ ổn khi đăng câu trả lời khác ở đây như thế này. Tôi đã không thấy một cách để gửi bài này để trả lời trực tiếp cho giải pháp được chấp nhận của tôi. Tôi vẫn đang học cách sử dụng WPSE.

— Justin Tadlock
nguồn

Có lẽ bạn nên thêm add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );nếu trình chỉnh sửa được sử dụng trên frontend (đối với người dùng không đăng nhập).

— OriginalEXE

Có, trả lời với những thay đổi / điều chỉnh đáng kể là hoàn toàn tốt. :) FYI nếu nó đã được khắc phục một số vấn đề trong câu trả lời ban đầu, sau đó gửi chỉnh sửa cho nó sẽ là cách để đi.

— Hết

@OrigenEXE - Đúng. Tôi sẽ cập nhật nó.

— Justin Tadlock

Chỉ là một mẹo cho bất cứ ai khác tìm thấy điều này sau đó, tôi đã không thể làm cho nó hoạt động đúng như đã trình bày. Cuối cùng tôi đã tìm ra rằng tôi phải đưa thông tin tiêu đề vào cuộc gọi lại, vì vậy nó sẽ được xem là css. tiêu đề ("Kiểu nội dung: văn bản / css; bộ ký tự: UTF-8"); Không chắc chắn nếu đây là một cái gì đó khác nhau trong .htaccess của tôi hoặc những gì.

— SkyShab

4

Có lẽ tôi đến bữa tiệc muộn nhưng sau khi sử dụng giải pháp trên, tôi sớm nhận ra rằng tốc độ tải trang của trình chỉnh sửa đã bị tê liệt nghiêm trọng! Nhìn kỹ vào mã, tôi nhận ra rằng mã tiếp tục thực thi lâu sau khi tinyMCE.activeEditor đã được khởi tạo. Mã sử dụng phương thức setInterval () để đánh giá một biểu thức theo các khoảng thời gian được chỉ định, tôi tin rằng đó là vì bạn không thể xác định tại thời điểm nào trong quá trình thực thi mã "activeEditor" sẽ khả dụng. Đây là những gì đã đưa tốc độ trang xuống đầu gối của nó.

Một giải pháp tốt hơn nhiều mà tôi đang sử dụng để xây dựng một plugin là đây

   /**
     * 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');

Ở đây, một trình nghe TinyMCE riêng được sử dụng để thực thi mã sau khi trình soạn thảo hoạt động được khởi tạo. Tôi hy vọng điều này sẽ giúp ai đó ngoài kia. Trân trọng.

— Ayebare M
nguồn

1

Điều này đối với tôi, nó chỉ có một lệnh gọi API không dùng nữa trong tinymce 4.0, bạn cần thay đổi ed.onInit.add (function () {... thành ed.on ('init', function () {...

— Mohammed

1

Đây là một giải pháp sửa đổi được đăng trên diễn đàn WordPress.org cho câu hỏi này: http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

Điều này chắc chắn hoạt động. Mặc dù tôi không phải là chuyên gia về JS, vì vậy tôi không hoàn toàn chắc chắn liệu đây có phải là giải pháp tốt nhất hay không.

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 }

Điều này cũng có thể được thêm vào một tệp JS. Bạn có thể dễ dàng chuyển các biến thông qua wp_localize_script()đó.

— Justin Tadlock
nguồn