क्या कस्टम पोस्ट प्रकार में WYSIWYG संपादकों के एन नंबर प्राप्त करने का एक तरीका है?


27

वहाँ एक कस्टम पोस्ट प्रकार के लिए कई WYSIWYG संपादकों के लिए रास्ता है? उदाहरण के लिए, यदि मेरे पास 2 कॉलम का लेआउट था, तो मैं एक कॉलम के लिए एक संपादक और दूसरे के लिए एक अन्य संपादक होना चाहता था।


आपको किस तरह के WYSIWYG कॉन्फ़िगरेशन की आवश्यकता है? पूर्ण पैनल झुकाव। अपलोड छवियों, फुलस्क्रीन मोड आदि?
हकर्रे

संबंधित प्रश्न: wordpress.stackexchange.com/questions/53/…
hakre

Bueltge का एक अच्छा लेख है जो दिखाता है कि यह कैसे किया जा सकता है: wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area
hakre

मुझे एक ग्राहक परियोजना के लिए इस प्रश्न का उत्तर देने की आवश्यकता है। पूछने के लिए धन्यवाद!
माइकस्किंकल

माइकस्किंकेल - मैं वर्डप्रेस के लिए नया हूँ; मैंने आपके द्वारा पोस्ट किया गया कोड कहां रखा है?

जवाबों:


21

यह कहें कि आपके कस्टम पोस्ट प्रकार को कॉल किया गया था Properties, आप इस तरह के कोड का उपयोग करके अपने अतिरिक्त टिनीमसीई संपादक को रखने के लिए बॉक्स को जोड़ेंगे:

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वह फ़ंक्शन है जो मेटा बॉक्स के लिए HTML प्रिंट करेगा, propertiesहमारी कस्टम पोस्ट प्रकार है, normalमेटा बॉक्स का स्थान है , और highनिर्दिष्ट करता है कि इसे यथासंभव पृष्ठ में दिखाया जाना चाहिए। (आमतौर पर डिफ़ॉल्ट टिनीएमसीई संपादक के नीचे)।

फिर, इसे सबसे बुनियादी उदाहरण के रूप में लेते हुए, आपको छोटे पाठ संपादक को टेक्स्टारिया में संलग्न करना होगा। हमें अभी भी अपने second_column_boxफ़ंक्शन को परिभाषित करना है जो मेटा बॉक्स के लिए HTML प्रिंट करेगा ताकि यह उतना ही अच्छा हो जितना कि कोई भी ऐसा कर सकता है:

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

कुछ मुद्दे हैं जिन पर मुझे यकीन नहीं है कि कैसे पार किया जाए। टिनीएमसीई के संपादक को मेटाबोक्स के अंदर नेस्टेड किया जाएगा, जो आदर्श नहीं हो सकता है, और यह एचटीएमएल और विजुअल एडिटिंग मोड के बीच स्विच करने की क्षमता नहीं रखेगा, साथ ही मीडिया इंसर्शन कमांड जो सामान्य पोस्ट एडिटर के पास है। मोड स्विच करना एक फ़ंक्शन के रूप में परिभाषित किया गया है जो आईडी का पहला तर्क है, लेकिन फिर भी यह wp-tinymce स्क्रिप्ट में कोडित करने के लिए प्रकट होता है। ऐसा करने के लिए बिल्ट इन स्मॉलमसीई फंक्शंस का उपयोग करना संभव है, लेकिन इससे डब्ल्यूपी एचटीएमएल इन्सर्ट बटन के बिना फुल टिनीएमसीई और एक बेसिक टेक्सारिया के बीच टेक्सटेरिया बदल जाता है।


"Meta_boxen"? बहुत बढ़िया! मैंने सोचा केवल मैं ही हूं। गोना आपको थोड़ी देर में एक कोशिश का समाधान देता है।
mfields

3.1 में मेरे लिए थॉमस मैकडॉनल्ड्स समाधान काम नहीं कर रहा है - क्या ऐसा करने के लिए 3.1 में एक तरीका है?

19

पहली: बिग धन्यवाद करने के लिए @Thomas मैकडॉनल्ड्स के लिए अपने जवाब ; मुझे ठीक उसी प्रश्न का पता लगाने की जरूरत थी जो @Paul Sheldrake ने पूछा और थॉमस का कोड मुझे सही दिशा में शुरू हुआ।

दुर्भाग्य से मैं तब फंस गया क्योंकि मुझे डिफ़ॉल्ट से एक सरल और छोटे लेआउट में लेआउट को बदलने की आवश्यकता थी क्योंकि मुझे एक साइड मेटाबॉक्स में टाइनीमेसी का उपयोग करने की आवश्यकता थी। मैंने व्यावहारिक रूप से हर जगह एक समाधान के लिए देखा और विशेष रूप से मोक्सीकोड टिनीएमसीई विकी और टिनीमसीई टिप्स और फोरम कैसे करें और कुछ भी नहीं मिला! 1 सब कुछ मैं समझाया पाया कैसे सेट करने के लिए theme, width, height, आदि का उपयोग कर tinyMCE.init({...})लेकिन जाहिरा तौर पर आप उपयोग नहीं कर सकते हैं कि जब आप का उपयोग करें tinyMCE.execCommand("mceAddControl")

जब मैं हैमिल्टन चुआ द्वारा एक पृष्ठ पर कई TinyMCE 3 उदाहरणों पर लेख चलाया गया, तो मैं स्तब्ध रह गया , और उन्होंने इसे नंगा कर दिया! उनका समाधान 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;

दुखद बात यह है कि यह वास्तव में कठिन नहीं था, लेकिन यह कहीं और दस्तावेज नहीं किया गया था जो मुझे मिल सकता है। यह आश्चर्यजनक है कि लगभग किसी और ने इस मुद्दे का अनुभव नहीं किया है।

इसलिए वैसे भी उपरोक्त कोड ने निम्नलिखित दूसरे TinyMCE को उस प्रारूप / लेआउट में उत्पन्न किया, जिसकी मेरे ग्राहक को आवश्यकता थी:

वर्डप्रेस 3.0 व्यवस्थापक संपादक में एकाधिक टिनीएमसीई पाठ
(स्रोत: mikeschinkel.com )

तो अगर आप उपयोग कर रहे हैं @Thomas मैकडॉनल्ड्स आप उपरोक्त कोड आप जा हैमिल्टन Chua के भयानक लेख बाहर की जाँच करने के लिए सुनिश्चित लेआउट को संशोधित करने के लिए किसी भी जरूरत है लगता है (धन्यवाद हाम!) :

PS अगर आप कुछ गलत करते हैं तो भी TinyMCE शायद बिलकुल न दिखाए। उदाहरण के लिए मेरे मामले में मैंtheme: "simple"पहली बारउपयोग करता हूंऔर मुझे कुछ नहीं मिला और मुझे यह महसूस करने में एक घंटे से अधिक का समय लगा कि मुझे बस इस्तेमाल करने की जरूरत हैtheme: "advanced"। इसलिए यदि आप पाते हैं कि TinyMCE आपके लिए काम नहीं कर रहा है, तो आप चीजों को बदलने की कोशिश करना सुनिश्चित करें, आपको एक समान समस्या हो सकती है। (बीटीडब्लू, मैंने किसी अन्य विषय की कोशिश नहीं की है और न ही यह पता लगाया है कि और क्या उपलब्ध है; यदि आपको ऐसे अन्य विषय मिलते हैं जो काम करते हैं तो कृपया नीचे टिप्पणी करें।)

पाद लेख

1 : बहुत निराशा होती है! वर्डप्रेस जवाब के साथ एक महीने से अधिक समय के बाद अब मैं अपने सभी सवालों के जवाब यहां गुणवत्ता के समान स्तर के रूप में ढूंढने की उम्मीद कर रहा हूं, और कहीं और मैं आमतौर पर निराशा पा रहा हूं!


माइक, आप के बाद एक बराबर याद आ रही है $scriptऔर यह भी अपने heredoc, यानी के लिए कोई समापन नहीं है। EOT;। छोटी त्रुटियों के अलावा यह एक अच्छा काम करने वाला उदाहरण है; ..)
t31os

@ t31os - मुझे बताने के लिए धन्यवाद। यकीन नहीं होता कि मैं कैसे चूक गया; मैं आमतौर पर परीक्षण करता हूं और फिर अपने काम कोड से मेरे उत्तरों की प्रतिलिपि बनाता हूं। जाओ पता लगाओ!
माइकस्किंकेल

इस समाधान का उपयोग करने के परिणामस्वरूप सामान्य दृश्य संपादक को 3.1 में मेरे लिए भी SimpleLayout सेट किया गया।
mfields

@mfields - Bummer कि 3.1 ने कई चीजों को तोड़ दिया है। :-(
माइकस्किंकेल

इस लेख पर आपका ध्यान आकर्षित करना चाहता था, क्योंकि यह कुछ बातें स्पष्ट कर सकता है: dannyvankooten.com/450/…
marfarma

2

चूंकि मुझे यह लेख Google में पहली बार मिला, इसलिए मैं केवल यह टिप्पणी करना चाहता था कि WP अब इस प्रकार के कार्य को संभालने के लिए एक फ़ंक्शन प्रदान करता है।

add_meta_boxफ़ंक्शन के भीतर , निम्न कोड जोड़ें ->

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

जहाँ भी आप TinyMCE एडिटर जोड़ना चाहते हैं

संदर्भ: wp_editor


1
उत्तर सादे लिंक से अधिक होना चाहिए । उन्हें वास्तव में एक मार्ग के बजाय एक उत्तर होना चाहिए जहां कोई व्यक्ति शायद एक उत्तर पा सकेगा । कृपया लिंक रोट को रोकने में मदद करें , अपना उत्तर संपादित करें और आवश्यक जानकारी प्रदान करें जो ओपी के साथ-साथ बाद के आगंतुकों को उनकी समस्या को हल करने में मदद करता है।
केसर

0

डिफ़ॉल्ट संपादक, टिनिम्स, wp-admin / / / wp_tiny_mce () नामक पोस्ट को शामिल करके एक फ़ंक्शन द्वारा लोड किया जाता है; 1350 लाइन पर स्रोत में देखें। 1478 लाइन पर सेटिंग्स की एक सरणी है। विकल्पों में से एक जाहिर तौर पर जावास्क्रिप्ट संपादक को लागू करने के लिए textarea चयनकर्ता को नामित करता है। मैं Keighl द्वारा अपने ब्लॉग पर इस पोस्ट को पढ़ रहा था जिसने मुझे इसकी ओर इशारा किया। लेख पढ़ें, और शायद एक व्यवस्थापक अनुभाग प्लगइन में wp_tiny_mce () को कॉल करने का एक तरीका है और इसे आपके द्वारा बनाए गए दूसरे पाठ क्षेत्र में लागू करें।


0

मुझे यह सिर्फ एक textarea के वर्ग विशेषता के रूप में "theEditor" जोड़कर मिला है:

<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>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.