WordPress में TinyMCE संपादक का उपयोग करना [गाइड]

हालाँकि वे इसका नाम नहीं जानते होंगे, लेकिन वर्डप्रेस का उपयोग करने वाला हर कोई इससे परिचित है TinyMCE संपादक. जब आप अपनी सामग्री बनाते या संपादित करते हैं, तो वह संपादक होता है - बोल्ड टेक्स्ट, हेडिंग, टेक्स्ट अलाइनमेंट बनाने के लिए बटन के साथ। हम इस पोस्ट पर एक नज़र डालेंगे, और मैं आपको दिखाने जा रहा हूँ आप कार्यक्षमता कैसे जोड़ सकते हैं तथा आप इसे अपने प्लगइन्स में कैसे उपयोग कर सकते हैं.

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

उपलब्ध बटन जोड़ना

WordPress TinyMCE में उपलब्ध कुछ विकल्पों का उपयोग करता है - विशेष बटन को निष्क्रिय करने के लिए - जैसे कि सुपरस्क्रिप्ट, सबस्क्रिप्ट और क्षैतिज नियम - ताकि इंटरफ़ेस को साफ किया जा सके। उन्हें बहुत अधिक उपद्रव के बिना वापस जोड़ा जा सकता है.

पहला कदम एक प्लगइन बनाने के लिए है। वर्डप्रेस कोडेक्स पर एक नज़र डालें कि यह कैसे करना है। संक्षेप में, आप wp-content / plugins फ़ोल्डर में 'my-mce-plugin' नामक एक फ़ोल्डर बनाकर प्राप्त कर सकते हैं। PHP एक्सटेंशन के साथ एक ही नाम वाली फ़ाइल बनाएँ: मेरी-mce-plugin.php.

उस फ़ाइल के अंदर निम्नलिखित चिपकाएँ:

  
एक बार जब आप वर्डप्रेस में इस प्लगइन का चयन करने और इसे सक्रिय करने में सक्षम होना चाहिए। अब से सभी कोड इस फ़ाइल के अंदर चिपकाए जा सकते हैं.
 
तो, वापस करने के लिए कुछ अंतर्निहित लेकिन छिपे हुए बटन को सक्षम करना. यहां वह कोड है जो हमें बताए गए 3 बटन को सक्षम करने की अनुमति देता है:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); फ़ंक्शन my_tinymce_buttons ($ बटन) $ बटन [] = 'सुपरस्क्रिप्ट'; $ बटन [] = 'सबस्क्रिप्ट'; $ बटन [] = घंटा; $ बटन वापस करें;  
 
 
 
यह जानने के लिए कि कौन से बटन जोड़े जा सकते हैं और उन्हें क्या कहा जाता है, नियंत्रण के लिए TinyMCE प्रलेखन में पाई गई सूची पर एक नज़र डालें.
 
हमारे अपने बटन बनाना
 
कैसे खरोंच से हमारे अपने बटन बनाने के बारे में? कई वेबसाइट कोड हाइलाइटिंग के लिए प्रिज्म का उपयोग करती हैं जो कोड सेगमेंट को चिह्नित करने के लिए बहुत ही अर्थपूर्ण दृष्टिकोण का उपयोग करता है। आपको अपना कोड लपेटना होगा  तथा 
 टैग, कुछ इस तरह:
 
$ चर = 'मूल्य'
 
आइए एक बटन बनाएं जो हमारे लिए ऐसा करेगा!
 
यह तीन-चरणीय प्रक्रिया है। आपको एक बटन जोड़ने, एक जावास्क्रिप्ट फ़ाइल लोड करने और वास्तव में जावास्क्रिप्ट फ़ाइल की सामग्री लिखने की आवश्यकता होगी। आएँ शुरू करें!
 
बटन जोड़ना और जावास्क्रिप्ट फ़ाइल को लोड करना बहुत सरल है, यहाँ कोड मैं इसे इस्तेमाल करने के लिए इस्तेमाल किया है:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); समारोह pre_code_add_button ($ बटन) $ बटन [] = 'pre_code_button'; $ बटन वापस करें;  add_filter ('mce_external_plugins', 'pre_code_add_javascript)); function pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri ()। '/Tinymce-plugin.js'; $ plugin_array लौटाएं;  
 
जब मैं इस बारे में ट्यूटोरियल देखता हूं तो मुझे अक्सर 2 समस्याएं दिखाई देती हैं.
 
उनका उल्लेख करने के लिए वे उपेक्षा करते हैं बटन का नाम pre_code_add_button () फ़ंक्शन में जोड़ा जाना चाहिए जो कि pre_code_add_javascript () फ़ंक्शन में $ plugin_array चर के लिए कुंजी के समान होना चाहिए. हमें भी करना होगा हमारे जावास्क्रिप्ट में उसी तार का उपयोग करें बाद में.
 
कुछ ट्यूटोरियल भी सब कुछ लपेटने के लिए एक अतिरिक्त admin_head हुक का उपयोग करें. जबकि यह काम करेगा, इसकी आवश्यकता नहीं है और चूंकि कोडेक्स इसका उपयोग नहीं करता है, इसलिए संभवतः इसे टाला जाना चाहिए.
 
अगला कदम हमारी कार्यक्षमता को लागू करने के लिए कुछ जावास्क्रिप्ट लिखना है। यहाँ मैं क्या पाने के लिए इस्तेमाल किया है 
 तथा  टैग एक ही बार में सभी आउटपुट.
 
 (function () tinymce.PluginManager.add ('pre_code_button', function (editor, url) editor.addButton ('pre_code_button', text: Prism ', icon: false, onclick: function () var चयनित = smallMCE.activeEditor.selection.getContent (); var सामग्री = '
'+ चयनित +'
'; Editor.insertContent (सामग्री + "\ n"); ); ); ) (); 
 
इसमें से अधिकांश को एक TinyMCE प्लगइन को कैसे कोडित किया जाना चाहिए, इसके बारे में आप तानाशाह प्रलेखन में उस बारे में कुछ जानकारी पा सकते हैं। अभी के लिए, आप सभी को पता होना चाहिए कि आपके बटन का नाम (Pre_code_button) लाइन 2 और 3 में इस्तेमाल किया जाना चाहिए. यदि आप एक आइकन का उपयोग नहीं करते हैं तो लाइन 4 में "टेक्स्ट" का मूल्य प्रदर्शित किया जाएगा (हम एक पल में आइकन जोड़कर देखेंगे).
 
ऑनक्लिक विधि इस बटन को क्लिक करने पर यह बताती है कि यह क्या करता है। मैं पहले से चर्चा की गई HTML संरचना के भीतर चयनित पाठ को लपेटने के लिए इसका उपयोग करना चाहता हूं.
 
चयनित पाठ का उपयोग करके पकड़ा जा सकता है tinyMCE.activeEditor.selection.getContent (). फिर, मैं इसके चारों ओर के तत्वों को लपेटता हूं और इसे सम्मिलित करता हूं, नए तत्व के साथ हाइलाइट की गई सामग्री को प्रतिस्थापित करता हूं। मैंने एक नई पंक्ति भी जोड़ दी है ताकि मैं कोड तत्व के बाद आसानी से लिखना शुरू कर सकूं.
 
यदि आप एक आइकन का उपयोग करना चाहते हैं, तो मेरा सुझाव है कि डैशकिंस सेट में से एक का चयन करें जो वर्डप्रेस के साथ जहाज करता है। डेवलपर संदर्भ में आइकन और उनके CSS / HTML / ग्लिफ़ को खोजने के लिए एक बढ़िया उपकरण है। कोड का प्रतीक ढूंढें और उसके नीचे मौजूद यूनिकोड पर ध्यान दें: f475.
 
हमें अपने प्लगइन को एक स्टाइलशीट संलग्न करना होगा और फिर अपना आइकन प्रदर्शित करने के लिए एक सरल शैली जोड़ना होगा। सबसे पहले, हम अपनी शैली को वर्डप्रेस में जोड़ें:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); समारोह pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
जावास्क्रिप्ट पर वापस जाएं और AddButton फ़ंक्शन में आइकन के बगल में, प्रतिस्थापित करें “असत्य” एक वर्ग के साथ आप अपने बटन को पसंद करेंगे - मैंने इस्तेमाल किया pre_code_button.
 
अब अपने प्लगइन निर्देशिका में style.css फ़ाइल बनाएँ और निम्नलिखित सीएसएस जोड़ें:
 
 i.mce-i-pre_code_button: font-family: डैशicons से पहले; सामग्री: "\ f475";  
 
 
 
ध्यान दें कि बटन प्राप्त होगा mce-i- [आपकी कक्षा यहाँ] क्लास जिसे आप टारगेट करने और स्टाइल जोड़ने के लिए इस्तेमाल कर सकते हैं। पहले से यूनिकोड मान का उपयोग करते हुए फ़ॉन्ट को डैशिकन और सामग्री के रूप में निर्दिष्ट करें.
 
TinyMCE का उपयोग अन्यत्र
 
प्लगइन्स अक्सर लंबे समय तक पाठ दर्ज करने के लिए textareas बनाते हैं, यह बहुत अच्छा नहीं होगा अगर हम TinyMCE का उपयोग कर सकते हैं? बेशक हम कर सकते हैं, और यह बहुत आसान है। Wp_editor () फ़ंक्शन हमें व्यवस्थापक में कहीं भी एक आउटपुट करने की अनुमति देता है, यहां बताया गया है कि यह कैसा दिखता है:
 
wp_editor ($ initial_content, $ element_id, $ सेटिंग्स);
 
पहला पैरामीटर बॉक्स के लिए प्रारंभिक सामग्री सेट करता है. यह डेटाबेस से एक विकल्प को लोड करने के लिए इस्तेमाल किया जा सकता है, उदाहरण के लिए। दूसरा पैरामीटर HTML तत्व की आईडी सेट करता है। तीसरा पैरामीटर सेटिंग्स की एक सरणी है। आपके द्वारा उपयोग की जा सकने वाली सटीक सेटिंग्स के बारे में पढ़ने के लिए, डब्ल्यूपी संपादक प्रलेखन पर एक नज़र डालें.
 
सबसे महत्वपूर्ण सेटिंग है textarea_name. यह टैक्स्टेरिया तत्व के नाम विशेषता को पॉप्युलेट करता है, जिससे आप डेटा को आसानी से सहेज सकते हैं। विकल्प पृष्ठ में उपयोग किए जाने पर मेरा संपादक कैसा दिखता है:
 
$ सेटिंग्स = सरणी ('textarea_name' => 'खरीदार_बीओ');
 
wp_editor (get_option ('खरीदार_बीओ'), 'खरीदार_बीओ', $ सेटिंग्स);
 
यह निम्नलिखित कोड लिखने के लिए समान है, जिसके परिणामस्वरूप एक सरल टेक्स्टारिया होगा:
 
<?php get_option( 'buyer_bio' ) ?>
 
निष्कर्ष
 
TinyMCE संपादक सामग्री दर्ज करते समय उपयोगकर्ताओं को अधिक लचीलेपन की अनुमति देने का एक उपयोगकर्ता-अनुकूल तरीका है। यह उन लोगों को अनुमति देता है जो अपनी सामग्री को केवल इसे टाइप करने के लिए प्रारूपित नहीं करना चाहते हैं और इसके साथ किया जा सकता है, और जो लोग इसे ठीक करने के लिए जितना संभव हो उतना समय बिताना चाहते हैं।.
 
नए बटन और कार्यक्षमता बनाना बहुत मॉड्यूलर तरीके से किया जा सकता है, और हमने केवल संभावनाओं की सतह को खरोंच दिया है। यदि आप एक विशेष रूप से अच्छे TinyMCE प्लगइन या उपयोग के मामले के बारे में जानते हैं जिसने आपको बहुत मदद की है, तो हमें नीचे टिप्पणी में बताएं!