ডাব্লুপি ৩.৯-এ টিনিএমসিএল কীভাবে কাস্টমাইজ করবেন - স্টাইল এবং ফর্ম্যাটগুলির পুরানো উপায় আর কাজ করে না

Question

ডাব্লুপি 3.9 এর আগে আমি নিম্নলিখিত দুটি ফিল্টার ফাংশন.এফপিতে প্রয়োগ করেছি:

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function mce_mod( $init ) {
    $init['theme_advanced_blockformats'] = 'p,h3,h4';
    $init['theme_advanced_styles'] = "Header gross=mus-bi news-single-bighead; Header klein=mus-bi news-single-smallhead; Link=news-single-link; List Items=news-single-list";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

যাতে অনুচ্ছেদের ফর্ম্যাটগুলি ড্রপডাউনটি কেবলমাত্র পি, এইচ 3 এবং এইচ 4 প্রদর্শন করে যখন কাস্টম শৈলীর ড্রপডাউনটি "শিরোনামের স্থূল", "শিরোলেখের ক্লিন" ইত্যাদি দেখায়। তবে দুর্ভাগ্যক্রমে wp এবং tinymce এখন wp 3.9 থেকে আর বিরক্ত করবেন না, আমি কেবল এখনই স্ট্যান্ডার্ড অনুচ্ছেদের ফর্ম্যাটগুলি ড্রপডাউন দেখি

পাশাপাশি স্ট্যান্ডার্ড শৈলী বিন্যাস ড্রপডাউন:

এখনও অবধি আমি কোনও ডকস খুঁজে পাইনি যদি কোনও হুক আপডেটের সাথে টিনেমেস ৪ এ পরিবর্তিত হয় তবে কেউ জানেন? শুভেচ্ছা রালফ

আপডেট: ঠিক আছে আরও কিছু গবেষণা এবং নীচের মন্তব্যগুলির উপর ভিত্তি করে আমার ধারণা আমি জিনিসগুলি বের করেছি:

//Creating the style selector stayed the same
function my_mce_buttons( $buttons ) {
   array_unshift( $buttons, 'styleselect' );
   return $buttons;
}
add_filter('mce_buttons', 'my_mce_buttons');

function mce_mod( $init ) {
   //theme_advanced_blockformats seems deprecated - instead the hook from Helgas post did the trick
   $init['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";

   //$init['style_formats']  doesn't work - instead you have to use tinymce style selectors
   $style_formats = array(
    array(
        'title' => 'Header 3',
        'classes' => 'mus-bi news-single-bighead'
    ),
    array(
        'title' => 'Header 4',
        'classes' => 'mus-bi news-single-smallhead'
    ),
    array(
        'title' => 'Link',
        'block' => 'a',
        'classes' => 'news-single-link',
        'wrapper' => true
    )
   );
   $init['style_formats'] = json_encode( $style_formats );
   return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

Comments

আপনি কি ওয়ার্ডপ্রেস.সটাকেক্সচেঞ্জ / প্রশ্ন / 139163/ … দেখেছেন ?

— ফুসিয়া

না আমি দেখিনি। ধন্যবাদ! তবে দুর্ভাগ্যক্রমে সেখানে বর্ণিত কোডের সাহায্যে স্টাইল এবং অনুচ্ছেদের ড্রপ ডাউনগুলি পুনর্নির্মাণের পরিবর্তে কেবলমাত্র একটি বোতাম তৈরি করা সম্ভব। পড়া এবং গবেষণা চালিয়ে যেতে হবে।

— এরমারাস

আপনি এখানে মূল মেনু আইটেমগুলিকে কীভাবে রাখতে style_selectএবং এতে একটি "ক্লাস" মেনু যুক্ত করতে পারেন তা এখানে। ওয়ার্ডপ্রেস.স্ট্যাকেক্সেঞ্জাওয়েজ.কমেসশনস

— ১৪৩68৮৯ /

Answer 1

আপনি যদি সন্ধান করেন তবে class-wp-editor.phpদেখতে পাবেন যে আপনি যে ফিল্টারটি ব্যবহার করছেন সেটি এখনও রয়েছে, তবে সেটিংস আলাদা।

self::$first_init = array(
                    'theme' => 'modern',
                    'skin' => 'lightgray',
                    'language' => self::$mce_locale,
                    'formats' => "{
                        alignleft: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                        ],
                        aligncenter: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                        ],
                        alignright: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                        ],
                        strikethrough: {inline: 'del'}
                    }",
                    'relative_urls' => false,
                    'remove_script_host' => false,
                    'convert_urls' => false,
                    'browser_spellcheck' => true,
                    'fix_list_elements' => true,
                    'entities' => '38,amp,60,lt,62,gt',
                    'entity_encoding' => 'raw',
                    'keep_styles' => false,
                    'paste_webkit_styles' => 'font-weight font-style color',

                    // Limit the preview styles in the menu/toolbar
                    'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',

                    'wpeditimage_disable_captions' => $no_captions,
                    'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
                    'plugins' => implode( ',', $plugins ),
                );

আমি অনুমান করছি, তবে আমি মনে করি আপনি যে অ্যারে কীটি লক্ষ্য করছেন তা পরিবর্তন করা দরকার formats।

এডিট এটিকে রেখে দিন, কিন্তু ওপি নিশ্চিত করে যে এটি তার চেষ্টা করছে না।

function mce_mod( $init ) {
        $init['formats'] = "{
                            alignleft: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                            ],
                            aligncenter: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                            ],
                            alignright: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                            ],
                            strikethrough: {inline: 'del'}
                        }";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

মনে রাখবেন যে এটি সম্পূর্ণরূপে অনির্ধারিত, তাই আপনার মাইলেজটি ভিন্ন হতে পারে। (এবং এটি পরীক্ষা না করা পর্যন্ত কোনও প্রোডাকশন সাইটে ব্যবহার করবেন না)।

এগিয়ে চলছে

আরও গভীরতর ফর্ম্যাটগুলি খনন করা একটি কাস্টম tinyMCE বোতাম বলে মনে হচ্ছে। আপনি দেখতে পারেন যে formatselectবোতাম যোগ করা হয় mce_buttons_2মধ্যে class-wp-editor.php। এবং তারপরে আমি এটি ট্র্যাক করেছি tinymce.js:

    editor.addButton('formatselect', function() {
        var items = [], blocks = createFormats(editor.settings.block_formats ||
            'Paragraph=p;' +
            'Address=address;' +
            'Pre=pre;' +
            'Heading 1=h1;' +
            'Heading 2=h2;' +
            'Heading 3=h3;' +
            'Heading 4=h4;' +
            'Heading 5=h5;' +
            'Heading 6=h6'
        );

এটি মনে রেখে, আমি মনে করি যে নতুন টার্গেটটি 1 হবে (আদর্শভাবে) editor.settings.block_formatsবা 2 পরিবর্তন করুন or mce_buttons_2আপনার নিজের পছন্দসই সংস্করণটি ফিল্টার করে এবং যুক্ত করে সেই বোতামটি সরিয়ে ফেলুন ।

পরীক্ষিত এবং কাজ

function mce_mod( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';

    $style_formats = array (
        array( 'title' => 'Bold text', 'inline' => 'b' ),
        array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),
        array( 'title' => 'Red header', 'block' => 'h1', 'styles' => array( 'color' => '#ff0000' ) ),
        array( 'title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1' ),
        array( 'title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2' )
    );

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

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

ছোট সতর্কতা : ড্রপ-ডাউন আইটেমগুলি নিজেরাই স্টাইলগুলি কোথায় যুক্ত করবেন তা আমি নিশ্চিত নই। টিনিএমসিই নমুনায়, "লাল শিরোনাম" বিকল্পটি লাল। আমি এটা বুঝতে পারি না। আপনি যদি দয়া করে আমাকে জানাবেন।

Comments

ধন্যবাদ হেলগা! আমি ক্লাস-ডাব্লিউপি-সম্পাদক এর আগেও দেখেছি। তবে সিনট্যাক্সটি কী হবে তা সম্পর্কে নিশ্চিত ছিলেন না (আপডেট হওয়া টিনেমসাপির জন্য ডাব্লুপি সম্পর্কিত কোনও ডকুমেন্টেশন নেই)। আপনার পরামর্শ এখন চেষ্টা করে দেখুন। আমার প্রাথমিক স্নিপেটের মতো একই ফলাফল। TinyMCE টিআইএন দেখতে কেমন তা মনে করে না। টিনিম্যাস সাইটে আমি কাস্টম ফর্ম্যাটগুলির জন্য উদাহরণ পেয়েছি, কেবল জেএস, এবং আমি এটি ডাব্লুপি

— এরমারাস

দুর্দান্ত সাহায্য, ধন্যবাদ! কেবল যোগ করতে চেয়েছিলেন যে block_formatsবিকল্পটির কোনও চলমান পথ থাকতে পারে না; । আমি সংরক্ষিত কনফিগারযোগ্য বিকল্পগুলি থেকে মানটি তৈরি করছিলাম এবং একটি ট্রেলিং ছিল; যে তালিকা borked। আশা করি কারও কারও কয়েক মিনিট সাশ্রয় হয়।

— অ্যাডাম পোপ

@ সিন্ডেক্সট ইয়ু, আমি এটিকে এখানে সমাধান করেছি (যথাসম্ভব সেরা) এবং সিদ্ধান্ত নিয়েছি ... আরে ... ব্লগ পোস্ট! আপনি এটিকে ইনলাইন হিসাবে সংজ্ঞায়িত করেও ক্লাসটি স্প্যানটিতে পাবেন না? array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),?

— হেলগাটিভিকিং

বিন্যাস মেনুতে থাকা আইটেমগুলি রঙিন শৈলীগুলি ব্যতীত আপনার সম্পাদক-স্টাইলস সিএসএসের শৈলীর উত্তরাধিকারী । আপনি যদি রঙের শৈলীগুলিও চান, mce_mod () ফাংশনে এই কোডটি যুক্ত করে আমার জন্য কাজ করেছে:unset($init['preview_styles']);

— ডাল্টন

আপনার ছোট ক্যাভিয়েট সম্পর্কিত @ হেলগাথভিয়েকিং : আপনি সেট করলে আপনি সমস্ত স্টাইল সক্ষম করতে পারবেন $init['preview_styles'] = 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow';। আমি অনুমান করি এটি মূলত @ ডাল্টনের পরামর্শ অনুসারে একই, তবে আরও সুস্পষ্ট উপায়ে। এটি কেবলমাত্র tmce ডকুমেন্টেশন

— রোব্রো