টিনিএমসিএতে কীভাবে কাস্টম সিএসএস (থিম বিকল্প) যুক্ত করবেন?

14

আমি ওয়ার্ডপ্রেসের টিনিএমসিই ভিজ্যুয়াল এডিটরটিতে কাস্টম সিএসএস (থিম বিকল্পগুলির মাধ্যমে সেট) যুক্ত করার চেষ্টা করছি। সামনের প্রান্তে, থিমটি এই সিএসএস তৈরি করে এবং এটি wp_headহুকের আউটপুট করে । আমি যে সমস্যাটি চালাচ্ছি তা হ'ল সেই সিএসএস আউটপুটটিকে সম্পাদকে যুক্ত করতে সক্ষম হচ্ছে।

এটি করা যায় না add_editor_style( 'editor-style.css' )কারণ থিম বিকল্পটি অ্যাক্সেস করতে আমাদের পিএইচপি ব্যবহার করতে হবে।

এটি সামনের প্রান্তে কীভাবে কাজ করে তার উদাহরণ হিসাবে:

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

দ্রষ্টব্য: কাস্টম পোস্ট-বিষয়বস্তু সিএসএস হ'ল প্লাগইন অঞ্চল , এবং এটি কোনও থিমে রাখা উচিত নয়। অন্যথায়, ব্যবহারকারীরা অন্য কোনও থিমে স্যুইচ করার সময় তাদের কাস্টম সিএসএস হারাবে।

— চিপ বেনেট

@ চিপবেনেট আমি কেবল আংশিকভাবে একমত। এটি আপনি কী স্টাইলিং করছেন তার উপর এটি অত্যন্ত নির্ভর করে । এটি বাদ দিয়ে, এটি কোথায় আছে তা বিবেচ্য নয় (সেই প্রশ্নের জন্য)।

— কায়সার

@ চিপবেনেট এটি থিম শৈলীর সাথে করতে হবে, কাস্টম পোস্টের সামগ্রী সিএসএস নয়। এটি থিম কাস্টমাইজারের সাথে আপনি করতে পারেন এমন স্ট্যান্ডার্ড স্টাফ। এটি কেবল এই স্টাইলগুলি প্রয়োগ করছে যা আমাকে আটকে দিয়েছে। এটি প্রশংসা বোঝানো editor-style.css, যা থিম অঞ্চল।

— জাস্টিন ট্যাডলক

অপেক্ষা করুন: আপনি গতিশীল কাস্টম সম্পাদক শৈলী সম্পর্কে কথা বলছেন ? যেমন রয়েছে: থিম বিকল্প-সংজ্ঞায়িত শৈলীর বিষয়ে ভিজ্যুয়াল সম্পাদক (টিনিএমসিই) কে সচেতন করবেন? যদি তা হয় তবে আমার মূল মন্তব্যটি উপেক্ষা করুন এবং প্রশ্নের জন্য +1 করুন।

— চিপ বেনেট

আপনি কি কোনও সম্পাদনা ফাইল করতে পারেন এবং থিম শৈলীর জন্য একটি সম্পূর্ণ সেটের উদাহরণ দেখাতে পারেন? তখন পরীক্ষা করা আরও সহজ হবে।

— কায়সার

7

সমাধান ঘ

এটি জাভাস্ক্রিপ্ট সমাধান হিসাবে কাজ করে:

উদাহরণ:

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

কেবল আপনার জেএস কনসোলটি খুলুন এবং এটি একটি দ্রুত পরীক্ষার জন্য পেস্ট করুন। নির্দিষ্ট সম্পাদককে টার্গেট করতে ব্যবহার করা উচিত:

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

এটি সম্পাদকদের iframe মধ্যে সরবরাহ করা স্ট্রিং ইনজেক্ট করবে <head><style id="mceDefaultStyles"></style> ...

সমাধান 2

ফিল্টার ব্যবহার করে সম্পাদক ইন ডিমেটিক স্টাইল যুক্ত করতে ডাব্লুপি_জ্যাক্সকে কলব্যাক হ্যান্ডলার হিসাবে ব্যবহার করুন

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

আমি কী করতে পারি তা পুরোপুরি নিশ্চিত নই।

— জাস্টিন ট্যাডলক

সমাধান # 2 আসলে আমার কাছে অনেক কিছু বোঝায়। আমি একটি পরীক্ষা রান দিতে হবে।

— জাস্টিন ট্যাডলক

আমি সমাধান # 2 নিয়ে গেলাম। পার্থক্যটি হ'ল আমি প্রথম ফাংশনটি বাদ দিয়েছি এবং add_editor_style( add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) )থিমগুলির সম্পাদনা শৈলী যুক্ত করার এটি স্ট্যান্ডার্ড উপায়।

— জাস্টিন টডলক

শুধু আমার নিজের সংশোধনের জন্য, আমি জানতে আগ্রহী যে আপনার পক্ষে mce_cssকাজ করে কিনা (যদি আপনি এটি চেষ্টা করে থাকেন)।

— চিপ বেনেট

আমি আসলে এটি চেষ্টা করি নি কারণ আমি জানতাম যে আপনি কোনও নন-সিএসএস ফাইল পাস করতে পারেন add_editor_style(), তবে কোডটি দেখার জন্য এটি ঠিক কাজ করা উচিত। mce_cssস্টাইলগুলির মাধ্যমে সংযোজন করার পরে আপনার ব্যবহার করা সেই ক্ষেত্রে আরও ভাল সমাধান add_editor_style()। থিমের এমন একটি কারণ হ'ল এর মাধ্যমে যুক্ত করা সম্পূর্ণ ইউআরএলগুলি add_editor_style()প্রথমে আউটপুট থাকে, তারা যুক্ত হওয়া সত্ত্বেও।

— জাস্টিন ট্যাডলক

10

ওয়ার্ডপ্রেস একটি mce_cssফিল্টার সরবরাহ করে যা ভিজ্যুয়াল এডিটরটিতে কাস্টম স্টাইলশিট যুক্ত করতে ব্যবহৃত হতে পারে। কোডেক্স অনুসারে:

ফাইলটি একটি .php ফাইল হতে পারে, যা কন্টেন্ট এডিটরের জন্য সিএসএস নিয়মের গতিশীল প্রজন্মকে অনুমতি দেয়।

কোনও থিমের জন্য সংশোধিত কোডেক্স ফিল্টার কলব্যাকের উদাহরণ:

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

— চিপ বেনেট
সূত্র

মিঃ বনেট দ্রুত ছিলেন, কেবলমাত্র আমার উত্তরে নীচে যুক্ত করেছেন :), তবে কিছুটা আলাদা।

— ungestaltbar

@ ইউনজাস্টালটিবার আমরা আসলে দুটি সম্পূর্ণ ভিন্ন ফিল্টার ব্যবহার করছি। :)

— চিপ বেনেট

একই ফলাফল সহ :)

— অ্যানজিস্টাল্টবার

4

আমি উপরের সমাধানটি @ ইউনজাস্টালটবার দ্বারা গ্রহণ করেছি। তবে, আমি যে উত্তরটি ব্যবহার করছি তার সাথে আমি এই উত্তরটি কিছুটা প্রসারিত করতে চেয়েছিলাম যাতে অন্যেরা দেখতে পায় যে এটি কীভাবে কাজ করে।

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

আমি আশা করছি যে এখানে অন্য উত্তর পোস্ট করা ঠিক আছে। আমার গৃহীত সমাধানের প্রত্যুত্তরতে এটি পোস্ট করার কোনও উপায় আমি দেখিনি। আমি এখনও ডাব্লুপিএসই কীভাবে ব্যবহার করব তা শিখছি।

— জাস্টিন ট্যাডলক
সূত্র

হতে পারে আপনি যোগ করা উচিত add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );যদি সম্পাদক ফ্রন্টএন্ড উপর ব্যবহার করা হয় (অ জন্য লগ-ইন ব্যবহারকারী)।

— অরিজিনালএক্সই

হ্যাঁ, উল্লেখযোগ্য পরিবর্তন / টুইটের উত্তর পুরোপুরি ঠিক আছে। :) এফওয়াইআই যদি এটির মূল উত্তরটি ঠিক করার জন্য কোনও সমস্যা শেষ হয়ে যায় তবে এটিতে সম্পাদনা জমা দেওয়ার উপায় হবে।

— রাস্তার 21

@ অরিজিনালেক্স - হ্যাঁ আমি এটি আপডেট করব।

— জাস্টিন ট্যাডলক

অন্য কারও জন্য যিনি এটি পরে খুঁজে পান কেবল তার জন্য একটি পরামর্শ, এটি উপস্থাপিত হিসাবে, আমি এটি সঠিকভাবে কাজ করতে পারিনি। আমি অবশেষে বুঝতে পেরেছিলাম যে আমাকে কলব্যাকে শিরোনামের তথ্য অন্তর্ভুক্ত করতে হয়েছে, সুতরাং এটি সিএসএস হিসাবে দেখা যাবে। শিরোনাম ("বিষয়বস্তুর ধরণ: পাঠ্য / CSS; চরসেট: ইউটিএফ -8"); এটি আমার .htaccess বা কি থেকে আলাদা কিছু কিনা তা নিশ্চিত নয়।

— স্কাইশ্যাব

4

আমি সম্ভবত এই পার্টিতে দেরি করেছি তবে উপরের সমাধানটি ব্যবহার করার পরে আমি শীঘ্রই বুঝতে পারি যে সম্পাদকের পৃষ্ঠা লোডের গতি মারাত্মকভাবে পঙ্গু হয়ে গিয়েছিল! কোডটি গভীরভাবে দেখে, আমি বুঝতে পেরেছিলাম যে কোডটি tinyMCE.activeEditor এর সূচনা হওয়ার পরে দীর্ঘকাল ধরে সম্পাদন করে। কোডটি সেট ইন্টার্নরাল () পদ্ধতিটি ব্যবহার করে যা নির্দিষ্ট বিরতিতে একটি অভিব্যক্তি মূল্যায়ন করে, আমি বিশ্বাস করি যে কারণ আপনি নির্ধারণ করতে পারেননি যে কোড এক্সিকিউশন "অ্যাক্টিভ এডিটর" কখন পাওয়া যাবে available এটিই পৃষ্ঠার গতিবেগকে হাঁটুতে নামিয়ে আনে।

একটি প্লাগইন তৈরি করতে আমি এর চেয়ে আরও ভাল সমাধানটি ব্যবহার করছি

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

সক্রিয় সম্পাদক আরম্ভ করার পরে কোডটি কার্যকর করার জন্য একটি নেটিভ টিনিএমসিই শ্রোতা ব্যবহৃত হয়। আমি আশা করি এটি কেউ কাউকে সাহায্য করবে। আন্তরিক শুভেচ্ছা.

— আয়েবরে এম
সূত্র

1

আমার জন্য এটি কাজ করছে এটির কেবলমাত্র টিনিমসে ৪.০ এ একটি অবজ্ঞাত এপিআই কল রয়েছে আপনার ed.onInit.add (ফাংশন () {... এড.ন ('init', ফাংশন () {... পরিবর্তন করতে হবে

— মোহাম্মদ

1

এই প্রশ্নের জন্য WordPress.org ফোরামে পোস্ট করা এটি একটি পরিবর্তিত সমাধান: http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

এটি অবশ্যই কাজ করে। আমি যদিও জেএস গুরু নই, সুতরাং এটিই সেরা সমাধান কিনা আমি পুরোপুরি নিশ্চিত নই।

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 }

এটি কোনও জেএস ফাইলে যুক্তও করা যেতে পারে। আপনি সহজেই এর মাধ্যমে ভেরিয়েবলগুলি পাস করতে পারেন wp_localize_script()।

— জাস্টিন ট্যাডলক
সূত্র