টিনিএমসিই: ড্রপডাউন ফর্ম্যাটটিতে সিএসএস যুক্ত করা হচ্ছে

Question

আমি সফলভাবে অ্যাড_এডিটর_স্টাইল () ব্যবহার করে একটি টিনিএমসিই স্টাইলশিট যুক্ত করেছি যাতে আমি টিনিএমসিই সম্পাদকের শিরোনামে স্টাইলগুলি পূর্বরূপ দেখতে পারি।

তবে, আমি কি ধরে নিচ্ছি যে অ্যাড_এডিটর_স্টাইল () ফাংশনটি কেবল সম্পাদকের শরীরে স্টাইল অ্যাক্সেস করতে পারে?

যদি তাই হয় তবে আমি কি অন্য কোনও পদ্ধতি বা ফাংশনটি ব্যবহার করতে পারি যা টিনিএমসিই ফর্ম্যাট ড্রপডাউনটির স্টাইলিং অ্যাক্সেস করতে ব্যবহার করতে পারি?

Answer 1

আপনি ড্রপ ডাউন তালিকাটি বাড়িয়ে তুলতে পারবেন না formatselect। তবে আপনি tiny_mce_before_initদ্বিতীয় ড্রপ ডাউন হুক দিয়ে উন্নত করতে পারেন styleselect, একটি ডিফল্ট ওয়ার্ডপ্রেস ইনস্টল মধ্যে লুকানো আছে। ডকুমেন্টেশন সব অক্ষমতা এবং সম্ভাবনার তার তালিকা দেখাবে।

• ইনলাইন - উদাহরণস্বরূপ "স্প্যান" উত্পাদন করতে ইনলাইন উপাদানের নাম। বর্তমান পাঠ্য নির্বাচনটি এই ইনলাইন উপাদানটিতে মোড়ানো হবে।
• ব্লক - উদাহরণস্বরূপ "এইচ 1 produce উত্পাদনের জন্য ব্লক উপাদানটির নাম ″ নির্বাচনের মধ্যে বিদ্যমান ব্লক উপাদানগুলি নতুন ব্লক উপাদানটির সাথে প্রতিস্থাপিত হয়।
• নির্বাচক - সিএসএস 3 নির্বাচক প্যাটার্ন দ্বারা নির্বাচনের মধ্যে উপাদানগুলির সন্ধান করুন। এটি কোনও সারণীতে নির্দিষ্ট উপাদান বা বিজোড় সারিগুলির মতো জটিল জিনিসে ক্লাস প্রয়োগ করতে ব্যবহৃত হতে পারে।
• ক্লাস - নির্বাচিত উপাদান বা নতুন ইনলাইন / ব্লক উপাদান প্রয়োগ করতে ক্লাসের স্থান পৃথকীকরণের তালিকা।
• শৈলীসমূহ - রঙ ইত্যাদির মতো সিএসএস টাইল আইটেমগুলির সাথে নাম / মান অবজেক্ট
• বৈশিষ্ট্য - নির্বাচিত উপাদানগুলিতে বা নতুন ইনলাইন / ব্লক উপাদানগুলিতে প্রয়োগ করতে বৈশিষ্ট্যযুক্ত নাম / মান অবজেক্ট।
• হুবহু - ব্যবহারের সময় মার্জ অনুরূপ শৈলী বৈশিষ্ট্যটি অক্ষম করে। আন্ডারলাইন / স্ট্রাইক যদিও এর জন্য পাঠ্য-সজ্জা হিসাবে কিছু সিএসএস উত্তরাধিকার ইস্যুগুলির জন্য এটি প্রয়োজন।
• মোড়ক - স্টেট যা জানায় যে বর্তমান ফর্ম্যাটটি ব্লক উপাদানগুলির জন্য একটি ধারক বিন্যাস। উদাহরণস্বরূপ একটি ডিভ র‍্যাপার বা ব্লককোট।

স্টাইল বোতাম

নোট করুন যে, ডিফল্টরূপে, স্টাইলের ড্রপডাউন ওয়ার্ডপ্রেসে লুকানো থাকে। প্রথমে টিনিএমসিএর মেনু বারে কাস্টম ফর্ম্যাটগুলির জন্য বোতামটি যুক্ত করুন, উদাহরণস্বরূপ হুক সহ লাইন 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;

}

ফলাফল

বর্ধিত ড্রপ ডাউন মেনু

আপনি গাছের মেনু দিয়ে ড্রপ ডাউনও বাড়িয়ে তুলতে পারেন। নিম্নলিখিত উত্সের মতো অ্যারেতে আরও কাঠামো সহ উপরের উদাহরণ উত্স থেকে ভেরি তৈরি করুন।

    $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'}
    ]}
];

সম্পাদকে কাস্টম স্টাইলশিট যুক্ত করুন

এখন শেষ পয়েন্ট, আপনি হুক মাধ্যমে এই ফর্ম্যাটগুলির জন্য কাস্টম সিএসএস অন্তর্ভুক্ত 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] );
    }
}

Comments

আমি মনে করি আমি এটি ধারণামূলকভাবে বুঝতে পেরেছি: মূলত আপনি ডাব্লুপি-র স্ট্যান্ডার্ড ফর্ম্যাটিং বাক্সটি সরিয়ে দিন এবং তারপরে স্টাইলিং নিয়ন্ত্রণের জন্য আপনার নিজের স্টাইল ড্রপডাউন যুক্ত করুন। আমার বোধগম্যতা কি সঠিক?

— মার্ক পি

ঠিক। formatselectড্রপডাউন পরিবর্তন করার জন্য বর্তমানে আমি একটি হুক খুঁজে পাই না । এই ড্রপডাউনটির কোনও মেনু তৈরির জন্য কোনও ফাংশন নেই, এটি ডাব্লুপিপির tinymce.js এর স্থির মান।

— ই

এছাড়াও এই উত্তরটির ইঙ্গিত , আমি এখন এটি পেয়েছি।

— বুলেটজ

আহ, ঠিক আছে! ধন্যবাদ, এটি আপাতত একটি ভাল সমাধান। আমি চেষ্টা করে দেখব!

— মার্ক পি

দ্রষ্টব্য: ডিফল্ট শৈলীগুলি $settings['style_formats_merge'] = true;drop fb_mce_before_init () «এ যোগ করে ফর্ম্যাট ড্রপডাউনটিতে যুক্ত করা যেতে পারে «

— নিকোলাই

Answer 2

প্রতি এই উত্তর , শৈলী পেয়ে চাবিকাঠি মধ্যে ড্রপডাউন হয় প্রদর্শিত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;
}

Answer 3

খুব সহায়ক এবং defaultstylesপয়েন্টার জন্য ধন্যবাদ । আমি দেখতে পেয়েছি যে ডিফল্ট বিকল্পগুলিকে বৈধ JSON (বৈধ জাভাস্ক্রিপ্ট নয়) রূপান্তর না করা পর্যন্ত অ্যারে মার্জ করা কাজ করছে না। নীচে পারবেন সংযোজন ওয়ার্ডপ্রেস tinymce ড্রপ ডাউন পরিবর্তে প্রতিস্থাপন

ডিফল্ট বিকল্পগুলি (জেএসএন):

$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" }
        ] }
 ]'; 

ফাংশন.এফপি-তে বৃহত্তর অপশন হ্যাশ ফিরিয়ে দিন:

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

Comments

দ্রষ্টব্য: ডিফল্ট শৈলীগুলি $settings['style_formats_merge'] = true;drop fb_mce_before_init () «এ যোগ করে ফর্ম্যাট ড্রপডাউনটিতে যুক্ত করা যেতে পারে «

— নিকোলাই