एडमिन एडिटर में शॉर्टकोड रेंडर करने का समाधान

मैंने यह प्रश्न लगभग एक साल पहले पूछा है और मुझे उम्मीद है कि कुछ प्रकार के सरल समाधान हैं जो मुझे अपने उद्देश्य को प्राप्त करने की अनुमति देंगे। तो यहाँ यह जाता है:

मैं अक्सर व्यवस्थापक संपादक के भीतर शॉर्टकोड का उपयोग करता हूं, लेकिन जब मैं इसे ग्राहक को सौंपता हूं तो वे अक्सर समझ नहीं पाते हैं कि वे कैसे काम करते हैं।

मैं जिस चीज की तलाश कर रहा हूं वह एक ऐसा समाधान है जो बस व्यवस्थापक WYSIWYG संपादक के भीतर शॉर्टकोड के सहयोगी उत्पादन को स्वचालित रूप से प्रस्तुत करेगा।

एक दृश्य परिप्रेक्ष्य से, मैं इसके लिए यह प्रदर्शित करना चाहूंगा कि जब "अधिक" लाइन दिखाई दे या जब संपादक के भीतर एक छवि प्रदर्शित हो। इसके द्वारा मेरा मतलब है कि उपयोगकर्ता आउटपुट को देखेगा, लेकिन केवल इसे डिलीट करने में सक्षम होगा, लेकिन प्रदान किए गए शोर्ट की सामग्री को संपादित नहीं करेगा।

functions editor shortcode

— NetConstructor.com
स्रोत

क्या आपने इसे ( wp.tutsplus.com/tutorials/theme-development/… ) लेख पढ़ा है ? TinyMCE भाग की जाँच करें।

— cr0z3r

मैंने पढ़ा है कि लेकिन जहाँ तक मैं यह बता सकता हूँ कि यह केवल शॉर्ट कोड बनाने / रजिस्टर करने और संपादक के लिए बटन बनाने से संबंधित है ताकि जल्दी से शॉर्ट कोड डाला जा सके ... लेकिन HTML ब्लॉक समकक्षों के साथ उन शॉर्टकोड को रेंडर करने के बारे में कोई जानकारी नहीं है जैसा कि मैंने वर्णित किया है।

— NetConstructor.com

क्या आपका मतलब है कि आप एक दृश्य सहायता को शामिल करना चाहते हैं जो आपके द्वारा शामिल किए गए शोर्ट के प्रतिनिधि हैं, और वास्तव में HTML के साथ शोर्ट को प्रतिस्थापित नहीं कर रहे हैं? यानी गैलरी प्लेसहोल्डर, जो वास्तव में गैलरी कोड नहीं है, बल्कि एक विज़ुअल प्लेसहोल्डर है जो उपयोगकर्ता को केवल यह बता रहा है, "अरे, यहाँ एक गैलरी है"?

— मैथ्यू बॉयन्स

बिल्कुल सही! और मैं इसके लिए थोड़ा लचीला होना चाहूंगा, इस तरह से मैं इसे प्रति शोर्ट के आधार पर अनुकूलित करने की अनुमति देता हूं (इसी तरह जैसे आपने गैलरी कहा है या जब कोई छवि शामिल है)

— NetConstructor.com

wordpress.org/plugins/shortcode-ui

— जगुआर

जवाबों:

यह वास्तव में बहुत बुरा नहीं है कि आप क्या पूछ रहे हैं। यह आपको अपने पहले एक को करने के लिए एक घंटे के बारे में और बाद के लोगों को करने के लिए 10 मिनट चाहिए।

अंततः आप जो करने जा रहे हैं वह TinyMCE प्लगइन है। यहाँ आपको अपने आप को शुरू करने के लिए बांटना चाहिए:

एक टिनिअम प्लगइन बनाने के लिए सामान्य गाइड
वर्डप्रेस कोर से उदाहरण कोड
WordPress पर TinyMCE प्लगइन जोड़ने पर एक सामान्य गाइड। मुझे यह मिला , जो पर्याप्त लगता है।

अब आपके पास 'एर' करने के लिए सभी उपकरण हैं! इन सब में से, आपके लिए सबसे अधिक रुचि वाला कोड WP उदाहरण कोड में यह ब्लॉक है:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

यहां, गैलरी के लिए शोर्ट को imgटैग के साथ बदल दिया जाता है । imgटैग वर्ग है wp-gallery, स्टाइल से हो जाता है जो सीएसएस यहां पाया ।

संपादित करें 2016-04-06: TinyMCE 4 और वर्डप्रेस 4.4 के लिए अद्यतित सामग्री और लिंक

— मैथ्यू बॉयन्स
स्रोत

दिलचस्प! मुझे आपसे पूछना चाहिए ... सभी शॉर्टकोड की वास्तविक सामग्री को स्वचालित रूप से सहयोगी सामग्री में परिवर्तित करने में आपका क्या विचार है?

— NetConstructor.com

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

— मैथ्यू बोयन्स 14

क्या तुमने कभी इस पर किसी और द्वारा एक समाधान देखने के लिए हुआ?

— NetConstructor.com

यह एक पूर्ण उत्तर नहीं है, सिर्फ एक डिज़ाइन दिशा है। मुझे लगता है कि सबसे अच्छा तरीका कुछ इस तरह है:

एडमिन एडिट पोस्ट में

सहेजे गए पोस्ट से सभी शॉर्टकोड को चीरें और संपादक से अलग एक मेटाबॉक्स के अंदर रेंडर करें । श्योर बनाओ वे उसी क्रम में दिखाई देते हैं जैसे लघु संपादक में शॉर्टकोड होता है।

टिनीएमसीई जावास्क्रिप्ट एपीआई में

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

रेंडर किए गए शोर्ट स्टेट को कभी भी सेव न करें

स्विच संपादकों से पहले, ड्राफ्ट, ऑटोड्रेट्स को सहेजें और प्रकाशित करें, पुनर्स्थापना को ट्रिगर करने के लिए एक एपीआई कॉल करें, ताकि प्रदान की गई शोर्ट स्थिति कभी भी सहेजे न जाए ...

यह किया जा सकता है, लेकिन आपको संपादक की सामग्री को कहां और कब एक्सेस करना है, और 'सेव ’और अधिक से पहले जावास्क्रिप्ट कार्यों में हुक करने के लिए छोटे एमएमईई एपीआई के साथ पारिवारिक होना चाहिए।

एक ही एडिट पोस्ट पगेलोड पर कई छोटे-छोटे संपादक हो सकते हैं।

बहाल भाग को देखकर जांच की जा सकती है [gallery]शोर्ट beaviour। लेकिन [MY_SHORTCODE]कुछ jQuery ट्रिक्स द्वारा क्लिक करना होगा।

admin_footer स्क्रिप्ट में, जहाँ कर्सर सक्रिय है, उसकी सामग्री तक पहुँचें:

var $editor_content = $(tinymce.activeEditor.getBody());

कैसे शुरू करने का एक संकेत है।

— जोनास लुंडमैन
स्रोत

मैं ग्राफिक रूप से प्रदर्शित करने और शॉर्टकोड को भी एक तरह से ढूंढ रहा था। और अब, अंत में, मुझे एक ट्यूटोरियल मिला जो बिल्कुल ऐसा करता है: https://generatewp.com/take-shortcodes-ultimate-level/

मैं विवरण जोड़ता हूं ताकि खोज इंजन इसे उठाएं:

हम एक शोर्टकोड के साथ एक सरल प्लगइन बनाने जा रहे हैं, फिर हम उस शोर्ट को पॉपअप करने के लिए एक TinyMCE एडिटर बटन जोड़ने जा रहे हैं, जो शोर्टकोड विशेषताओं के लिए सभी उपयोगकर्ता इनपुट एकत्र करेगा। फिर, हम TinyMCE संपादक में शोर्ट को एक प्लेसहोल्डर छवि के साथ बदलने जा रहे हैं, बहुत कुछ वर्डप्रेस की देशी गैलरी की तरह है (जो वास्तव में एक शोर्ट है, अगर आपको पता नहीं था), और अंतिम - हम संपादन की अनुमति देने जा रहे हैं प्लेसहोल्डर छवि पर डबल क्लिक करके शोर्ट और इसकी विशेषताओं।

— मार्क चहेब
स्रोत