কাস্টম পোস্টের ধরণের WYSIWYG সম্পাদকগুলির N নম্বর পাওয়ার কোনও উপায় আছে?


27

কাস্টম পোস্ট ধরণের জন্য একাধিক WYSIWYG সম্পাদক থাকতে পারে? উদাহরণস্বরূপ, আমার যদি একটি 2 কলাম লেআউট থাকে তবে আমি চাইছিলাম একটি কলামের জন্য একটি সম্পাদক এবং অন্যটির জন্য অন্য সম্পাদক।


আপনার কী ধরণের WYSIWYG কনফিগারেশন দরকার? সম্পূর্ণ প্যানেল সহ। ছবি আপলোড, ফুলস্ক্রিন মোড ইত্যাদি?
hakre


বুলেটতে একটি দুর্দান্ত নিবন্ধ রয়েছে যা দেখায় যে এটি কীভাবে করা যায়: wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area
hakre

ক্লায়েন্ট প্রকল্পের জন্য আমার ঠিক এই প্রশ্নের উত্তর দরকার। জিজ্ঞাসা করার জন্য ধন্যবাদ!
মাইকচিনকেল

মাইকচিন্কেল - আমি ওয়ার্ডপ্রেসে নতুন; আপনার পোস্ট করা কোডটি আমি কোথায় রেখেছি?

উত্তর:


21

বলুন আপনার কাস্টম পোস্টের প্রকারটি কল করা হয়েছিল Properties, আপনি এই জাতীয় কোডটি ব্যবহার করে আপনার অতিরিক্ত ক্ষুদ্র MCE সম্পাদকটি ধরে রাখতে বাক্সটি যুক্ত করবেন:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2মেটা বাক্সটি যে আইডি প্রয়োগ করবে, তা Second Columnহ'ল মেটা বক্সের শিরোনামটি হ'ল মেটা বক্সের second_column_boxজন্য এইচটিএমএল প্রিন্ট করবে এমন ফাংশনটি propertiesহ'ল আমাদের কাস্টম পোস্ট প্রকার, normalমেটা বক্সের অবস্থান , এবং highউল্লেখ করে যে এটি যতটা সম্ভব পৃষ্ঠায় উচ্চতর প্রদর্শিত হবে। (সাধারণত ডিফল্ট tinyMCE সম্পাদকের নীচে)।

তারপরে, একে একে একে বেসিক উদাহরণ হিসাবে গ্রহণ করার জন্য আপনাকে অবশ্যই ক্ষুদ্রতম মেসির সম্পাদককে একটি টেক্সারিয়ার সাথে সংযুক্ত করতে হবে। আমাদের এখনও আমাদের second_column_boxফাংশনটি সংজ্ঞায়িত করতে হবে যা মেটা বক্সের জন্য এইচটিএমএল প্রিন্ট করবে তাই এটি করার জন্য এটি যতটা উপযুক্ত জায়গা:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

বেশ কয়েকটি বিষয় রয়েছে যা আমি কীভাবে পরাভূত করব তা সম্পর্কে নিশ্চিত নই। টিনিএমসিই সম্পাদকটি কোনও মেটাবক্সের অভ্যন্তরে বাসা বেঁধে দেওয়া হবে, এটি আদর্শ নাও হতে পারে এবং এটি HTML এবং ভিজ্যুয়াল সম্পাদনা মোডের পাশাপাশি মিডিয়া সন্নিবেশ কমান্ডগুলির মধ্যে যা সাধারণ পোস্ট এডিটরের মধ্যে রয়েছে তা বৈশিষ্ট্যযুক্ত হবে না। মোডগুলিতে স্যুইচিং কোনও ফাংশন হিসাবে সংজ্ঞায়িত হয়েছে বলে মনে হয় যিনি প্রথম যুক্তিটি আইডি, তবে তবুও এটি ডাব্লুপি-টিনিমস স্ক্রিপ্টে কোডেড বলে মনে হয়। এটি বিল্ট ইন টিনিএমসিই ফাংশনগুলি ব্যবহার করা সম্ভব, তবে এটি ডাব্লুপিএম এইচটিএমএল সন্নিবেশ বোতামগুলির ব্যতীত পূর্ণ টেনিএমসিই এবং একটি বেসিক টেক্সারিয়ার মধ্যে টেক্সারিয়াকে পরিবর্তন করে।


"Meta_boxen"? অসাধারণ! আমি ভেবেছিলাম আমি একমাত্র। আপনাকে কিছুক্ষণের মধ্যে সমাধান দেওয়ার চেষ্টা করবে।
এমফিল্ডস

টমাস ম্যাকডোনাল্ডস সলিউশন আমার জন্য 3.1-তে কাজ করছে না - এটি করার কোনও উপায় কি 3.1 এ আছে?

19

প্রথম: অনেক ধন্যবাদ করার @Thomas ম্যাকডোনাল্ড জন্য তার উত্তর ; @ পল শেলড্রেকে জিজ্ঞাসা করা একই প্রশ্নটি আমাকে খুঁজে বের করা দরকার এবং টমাসের কোডটি আমাকে সঠিক দিকে শুরু করল।

দুর্ভাগ্যক্রমে আমি তখন আটকে গিয়েছিলাম কারণ আমাকে ডিফল্ট থেকে একটি সরল এবং ছোট লেআউটে পরিবর্তন করতে হয়েছিল যেহেতু আমার পাশের মেটাবক্সে টিনিএমসিএল প্রয়োজন। আমি সমাধানের জন্য এবং সর্বত্র MoxieCode TinyMCE উইকি এবং টিনিএমসিই টিপস এবং কীভাবে ফোরাম এবং কীভাবে খুঁজে পেলাম না তা কার্যত সর্বত্র দেখেছি! 1 সবকিছু আমি ব্যাখ্যা পাওয়া কিভাবে সেটে , , , ইত্যাদি ব্যবহার কিন্তু দৃশ্যত আপনি ব্যবহার করতে পারবেন না যে, যখন আপনি ব্যবহার ।themewidthheighttinyMCE.init({...})tinyMCE.execCommand("mceAddControl")

যখন আমি নিবন্ধ জুড়ে দৌড়ে আমি তুলবেন ছিল এক পৃষ্ঠা 3 দৃষ্টান্ত একাধিক TinyMCE দ্বারা হ্যামিলটন চুয়া , এবং তিনি তা পেরেক দিয়ে! তার সমাধানটি tinyMCE.settingsফোন করার আগে নির্ধারণ করা ছিল tinyMCE.execCommand("mceAddControl"), উদাহরণস্বরূপ:

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

দুঃখের বিষয়টি এটি সত্যই শক্ত ছিল না তবে এটি অন্য কোথাও খুঁজে পাওয়া যায়নি docu এটি আবিষ্কার করে আশ্চর্যজনক যে প্রায় কেউই এই সমস্যাটি অনুভব করতে পারেনি।

সুতরাং যাইহোক যাইহোক, উপরের কোডটি আমার ক্লায়েন্টের যে বিন্যাস / লেআউটটির প্রয়োজন হয়েছিল ঠিক সেই বিন্যাসে নিম্নলিখিত দ্বিতীয় TinyMCE তৈরি করেছে:

ওয়ার্ডপ্রেস Ad.০ অ্যাডমিন এডিটরটিতে একাধিক টিনিএমসিএ টেক্সটরিয়াস
(সূত্র: মাইকসচিনেল.কম )

সুতরাং আপনি যদি উপরে থমাস ম্যাকডোনাল্ড কোড ব্যবহার করছেন তবে আপনার লেআউটটি পরিবর্তন করার দরকার আছে হ্যামিল্টন চুয়ার অসাধারণ নিবন্ধটি (ধন্যবাদ হ্যাম!) যাচাই করতে ভুলবেন না :

পিএস আপনি যদি কিছুটা সামান্য ভুল করেন তবে টিনিএমসিই এগুলি একেবারেই দেখাতে পারে না। উদাহরণস্বরূপ, আমার ক্ষেত্রে আমিtheme: "simple"প্রথমেব্যবহার করিএবং আমি কিছুই পাইনি এবং এটি বুঝতে আমার এক ঘন্টারও বেশি সময় লেগেছিল যে আমার কেবল ব্যবহার করা দরকারtheme: "advanced"। সুতরাং যদি আপনি খুঁজে পান যে টিনিএমসিই আপনার পক্ষে কাজ করছে না তবে আপনার চারপাশের জিনিসগুলি পরিবর্তনের চেষ্টা করে দেখুন, আপনার একই ধরণের সমস্যা হতে পারে। (বিটিডাব্লু, আমি অন্য কোনও থিম চেষ্টা করি নি বা অন্যটি কী উপলভ্য তা অনুসন্ধান করে দেখিনি; যদি আপনি কাজ করে এমন অন্যান্য থিমগুলি খুঁজে পান তবে দয়া করে নীচে মন্তব্য করুন))

পাদটীকা

1 : খুব হতাশার! ওয়ার্ডপ্রেস উত্তর দিয়ে এক মাসেরও বেশি সময় পরে আমি এখন আমার সমস্ত প্রশ্নের উত্তরগুলি এখানে মানের হিসাবে একই স্তরের হিসাবে খুঁজে পাওয়ার প্রত্যাশা করছি এবং অন্য কোথাও আমি সাধারণত হতাশার সন্ধান করছি!


মাইক, আপনি এর পরেও সমান মিস করছেন $scriptএবং আপনার বংশগতের কোনও বন্ধ নেই, যেমন। EOT;। ছোট ত্রুটিগুলি ছাড়াও এটি একটি ভাল কাজের উদাহরণ ..;)
t31os

@ t31os - আমাকে জানানোর জন্য ধন্যবাদ আমি কীভাবে এগুলি মিস করেছি তা নিশ্চিত নয়; আমি সাধারণত পরীক্ষা করি এবং তারপরে আমার উত্তর কোডগুলি আমার ওয়ার্কিং কোড থেকে অনুলিপি করি। চিত্রে যান!
মাইকচিন্কেল

এই সমাধানটি ব্যবহারের ফলে স্বাভাবিক ভিজ্যুয়াল এডিটরটি আমার জন্য 3.1-এ সরললআউটও সেট হয়ে যায়।
এমফিল্ডগুলি

@ এমফিল্ডস - বামার যে 3.1 টি অনেক কিছুই ভেঙেছে। :-(
মাইকস্কিঙ্কেল

এই নিবন্ধটির দিকে আপনার দৃষ্টি আকর্ষণ করতে চেয়েছিল, যেহেতু এটি কিছু বিষয় স্পষ্ট করতে পারে: dannyvankooten.com/450/…
মারফারমা

2

যেহেতু আমি এই নিবন্ধটি গুগলের প্রথম ফলাফল হিসাবে পেয়েছি, আমি কেবলমাত্র মন্তব্য করতে চেয়েছিলাম যে ডাব্লুপি এখন এই ধরণের কাজ পরিচালনা করার জন্য একটি ফাংশন সরবরাহ করে।

মধ্যে add_meta_boxফাংশন, নিম্নলিখিত কোড যোগ ->

wp_editor( $content, $editor_id, $settings = array() );

আপনি যেখানেই TinyMCE সম্পাদক যুক্ত করতে চান

রেফারেন্স: wp_editor


1
উত্তরগুলি সরল লিঙ্কগুলির চেয়ে বেশি হওয়া উচিত । এগুলি আসলে এমন কোনও রুটের পরিবর্তে একটি উত্তর হতে হবে যেখানে কেউ হয়ত উত্তর খুঁজে পাবেন । দয়া করে লিঙ্ক পচা প্রতিরোধে সহায়তা করুন, আপনার উত্তরটি সম্পাদনা করুন এবং প্রয়োজনীয় তথ্য সরবরাহ করুন যা ওপিতে পাশাপাশি পরবর্তী দর্শকদের তাদের সমস্যা সমাধানে সহায়তা করে।
কায়সার

0

ডিফল্ট সম্পাদক, টিনিমস, ডাব্লুপি-অ্যাডমিন / অন্তর্ভুক্ত / পোস্ট.এফপি নামে একটি ফাংশন দ্বারা লোড হয় wp_tiny_mce (); 1350 লাইনে উত্সটি দেখুন 14 1478 লাইনে সেটিংসের একটি অ্যারে রয়েছে the বিকল্পগুলির মধ্যে একটি স্পষ্টতই জাভাস্ক্রিপ্ট সম্পাদকটি প্রয়োগ করতে টেক্সারিয়া নির্বাচককে মনোনীত করে। আমি তার ব্লগে কেইগেলের এই পোস্টটি পড়ছিলাম যা আমাকে এটির দিকে নির্দেশ করেছিল। নিবন্ধটি পড়ুন, এবং সম্ভবত অ্যাডমিন বিভাগের প্লাগইনে wp_tiny_mce () কল করার উপায় রয়েছে এবং এটি আপনি তৈরি দ্বিতীয় পাঠের ক্ষেত্রে প্রয়োগ করতে পারেন।


0

আমি কেবল এটি একটি পাঠ্যকে শ্রেণীর বৈশিষ্ট্য হিসাবে "দ্য এডিটর" যুক্ত করে পেয়েছি:

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.