সম্পাদকের অভ্যন্তরে শর্টকোড পাঠ্যের চেহারা পরিবর্তন করুন


11

সম্পাদকের শর্টকোডগুলির উপস্থিতি পরিবর্তন করা বা যে কোনও উপায়ে আশেপাশের পাঠ্য থেকে এটি আরও আলাদা করে তৈরি করা সম্ভব?

উদাহরণস্বরূপ যদি কোনও পোস্টের বিষয়বস্তুটি এমন হয় ...

Lorem Ipsum সম্পর্কে রেফারেন্স সাইট, এর উত্স সম্পর্কে তথ্য প্রদানের পাশাপাশি একটি এলোমেলো লিপসাম জেনারেটর L Lorem Ipsum সম্পর্কে রেফারেন্স সাইট, এর উত্স সম্পর্কে তথ্য এবং সেইসাথে একটি এলোমেলো লিপসাম জেনারেটর [[শর্ট কোড] asfdasfd [/ শর্টকোড] রেফারেন্স সাইট লোরেম ইপসাম সম্পর্কে, এর উত্স সম্পর্কে তথ্য প্রদানের পাশাপাশি একটি র্যান্ডম লিপসাম জেনারেটর L লোরেম ইপসাম সম্পর্কে রেফারেন্স সাইট, এর উত্স সম্পর্কে তথ্য এবং সেইসাথে একটি র্যান্ডম লিপসাম জেনারেটর। লোরেম ইপসাম সম্পর্কে রেফারেন্স সাইট, এর উত্স সম্পর্কে তথ্য প্রদান করে, পাশাপাশি একটি এলোমেলো লিপসাম জেনারেটর।

... ভিতরে শর্টকোড সাহসী হলে এটি খুব ভাল হবে যাতে এটি সহজেই এটির মতো দেখা যায়:

এখানে চিত্র বর্ণনা লিখুন


এটি অবশ্যই সুবিধাজনক হবে এবং অবশ্যই কিছু রেজেক্স / জেএস সহ সম্ভব। এখানে একটি অনুরূপ প্রশ্ন এবং একটি প্লাগইন যা আপনাকে শর্টকোডগুলির জন্য পূর্বরূপ যুক্ত করতে দেয় যদিও আপনি যেমন পরামর্শ করেছিলেন তেমনভাবে হাইলাইট করে যেমন আপনি <code>বা <pre>ট্যাগগুলি অবশ্যই সহজতর হবে।
ব্রায়ান উইলিস

1
আমি জানি এখনই এটি আপনার পক্ষে সহায়ক নয় তবে শীঘ্রই কোরে সংহত করার জন্য শর্টকেকের দিকে নজর রাখুন ... দীর্ঘ প্রয়োজনের এই মূল বৈশিষ্ট্যটিকে বাস্তবে পরিণত করবে
brianjohnhanna


আমার কাছ থেকে অফ অফ বিষয়, @ ব্রায়ানজোহান্না আমি সেই প্লাগইনটি দেখেছি তবে এটি কোডের এক ধরণের প্রাকদর্শন (যাতে এটি সম্মুখভাগে কীভাবে দেখবে)। আমি যদি প্রশ্নটি ভালভাবে বুঝতে পারি তবে ওপির প্রশ্নটি সম্পাদকের মধ্যে shortcode tagএবং এর contentভিতরে হাইলাইট করে shortcode
চার্লস

উত্তর:


12

আপনি একটি কাস্টম প্লাগইন, ওয়ার্ডপ্রেসে এবং টিনিএমসিই ভিজ্যুয়াল সম্পাদকও যুক্ত করতে পারেন। অনুসরণ উত্স একটি উদাহরণ যা সাধারণ কাজ করে এবং সমস্ত শর্টকোডের আগে এবং পরে একটি স্ট্রিং যুক্ত করে add

ব্যবহার

শর্টকোডটি রেগেক্সের মাধ্যমে খুঁজে পাবেন, আপনার যদি এটির জন্য বিভিন্ন শর্টকোড এবং বিভিন্ন চিহ্নের প্রয়োজন হয় relevant স্ক্রিপ্ট এখানে <b>FB-TESTক্লোজিং ট্যাগ এবং সামগ্রীর আগে এবং পরে শর্টকোডে কাস্টম সামগ্রী যুক্ত করে । আপনি দৃশ্যমানতা তৈরি করতে মার্কআপ, সিএসএস ক্লাসও ব্যবহার করতে পারেন। গুরুত্বপূর্ণটি হ'ল, আপনি সংরক্ষণ সামগ্রীতে এই সামগ্রীটি সরিয়ে ফেলুন, স্ক্রিপ্টটিতে চালিত করে PostProcess। এখানে স্ক্রিপ্টটি চালান এবং ফাংশনটির মাধ্যমে কাস্টম সামগ্রী সরান restoreShortcodes

তবে বর্তমানে এটি সহজ, প্রতিটি প্রয়োজনের জন্য বৈধ নয়। হতে পারে আপনার শর্টকোডটি ডিআই-তে সঞ্চয় করা উচিত এবং এই সঞ্চিত ভেরিয়েবলটি পুনরুদ্ধার করা উচিত।

স্ক্রিনশট

ফলাফলটি বোঝার জন্য স্ক্রিনশটটি উদাহরণ হিসাবে দেখুন।

এখানে চিত্র বর্ণনা লিখুন

উৎস

উত্সটির ব্যবহারের জন্য এই ডিরেক্টরি কাঠামোটির প্রয়োজন:

-- shortcode-replace
 |--php file
 |--assets
   |-- js
     |-- js file

প্রথমে একটি ছোট পিএইচপি ফাইল, যা উত্সকে ডাব্লুপি পরিবেশে প্লাগইন হিসাবে অন্তর্ভুক্ত করে। এটি প্লাগইনটির মূল ডিরেক্টরিতে রেখে দিন shortcode-replace

<?php # -*- coding: utf-8 -*-

/**
 * Plugin Name:     Shortcode Replace
 * Plugin URI:      
 * Description:     
 * Version:         0.0.1
 * Text Domain:     
 * Domain Path:     /languages
 * License:         MIT
 * License URI:
 */

namespace FbShortcodeReplace;

if ( ! function_exists( 'add_action' ) ) {
    exit();
}

if ( ! is_admin() ) {
    return;
}

add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\initialize' );
function initialize( $page ) {

    if ( 'post.php' === $page ) {
        add_filter( 'mce_external_plugins', __NAMESPACE__ . '\add_tinymce_plugin' );
    }
}

function add_tinymce_plugin( $plugins ) {

    if ( ! is_array( $plugins ) ) {
        $plugins = array();
    }

    $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '.dev' : '';
    $url     = plugins_url( '/assets/js/fb_shortcode_replace.js', __FILE__ );

    $plugins = array_merge( $plugins, array( 'fb_shortcode_replace' => $url ) );
    return $plugins;
}

এই পিএইচপি ফাইলটি ভিজ্যুয়াল এডিটরটিতে প্লাগইন হিসাবে একটি জাভাস্ক্রিপ্ট লোড করে। প্লাগইনটি কেবল অ্যাডমিন পৃষ্ঠাগুলিতে, কেবল স্ট্রিং সহ পৃষ্ঠাগুলিতে লোড হবে post.php- দেখুন if ( 'post.php' === $page ) {

অনুসরণ উত্স জাভাস্ক্রিপ্ট ফাইল, নাম fb_shortcode_replace.jsassets/js/এই প্লাগইনটির প্লাগইন ডিরেক্টরিটির ভিতরে ডিরেক্টরিতে রেখে দিন ।

tinymce.PluginManager.add( 'fb_shortcode_replace', function( editor ) {

    var shortcode = /\[.+\]/g;
    var additional_before = '<b>FB-TEST';
    var additional_after = 'FB-TEST</b>';

    function ifShortcode( content ) {

        return content.search( /\[.+\]/ ) !== -1;
    }

    function replaceShortcodes( content ) {

        return content.replace( shortcode, function( match ) {
            return html( match );
        } );
    }

    function restoreShortcodes( content ) {

        content = content.replace( additional_before, '' );
        content = content.replace( additional_after, '' );
        return content;
    }

    function html( data ) {

        console.log( data );
        return additional_before + data + additional_after;
    }

    editor.on( 'BeforeSetContent', function( event ) {

        // No shortcodes in content, return.
        if ( ! ifShortcode( event.content ) ) {
            return;
        }

        event.content = replaceShortcodes( event.content );
    } );

    editor.on( 'PostProcess', function( event ) {

        if ( event.get ) {
            event.content = restoreShortcodes( event.content );
        }
    } );
} );

সহায়ক

অতিরিক্ত ইঙ্গিত

এটি দেখার জন্য প্লাগইন র‌্যাফ এইচটিএমএলে শর্টকোডগুলি রূপান্তর করে এবং ফলাফলটি বোঝার জন্য সরল করে তোলে । হতে পারে এটি এই প্রসঙ্গেও সহায়ক।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.