वायसीविग

WYSIWYG फ़ील्ड वर्डप्रेस के समृद्ध टेक्स्ट एडिटर को मास्टर ऐडऑन के साथ आपके द्वारा बनाए गए कस्टम विजेट में डालता है विजेट बिल्डरसंपादकों को बोल्ड, इटैलिक, लिंक, सूचियां और मीडिया जोड़ें बटन मिलता है, वही टूलबार जो वे पोस्ट लिखते समय उपयोग करते हैं आपका विजेट स्वरूपित HTML प्राप्त करता है और इसे एक टोकन के साथ प्रिंट करता है यह किसी भी टेक्स्ट क्षेत्र के लिए फ़ील्ड है जहां एक सादा टेक्स्ट क्षेत्र स्वरूपण को समतल कर देगा।

WYSIWYG उन फ़ील्ड में से एक है जिसका उपयोग आप मुफ़्त संस्करण के विजेट बिल्डर में कर सकते हैं। मुफ़्त प्लगइन में एक सीमित विजेट बिल्डर शामिल है, और फ़ील्ड का पूरा सेट आता है मास्टर एडॉन्स प्रो.

WYSIWYG फ़ील्ड क्या करता है #

• एलिमेंटर में आपके विजेट के पैनल में विज़ुअल और कोड टैब और एक ऐड मीडिया बटन के साथ रिच टेक्स्ट एडिटर जोड़ता है।
• संपादक जो लिखते हैं उसे HTML के रूप में सहेजता है।
• जैसे टोकन के माध्यम से इसे प्रिंट करता है {{ member_bio }}, वर्डप्रेस फ़िल्टर सामग्री पोस्ट करने के तरीके को फ़िल्टर किया गया।
• स्वरूपण रखता है: पैराग्राफ, बोल्ड, इटैलिक, लिंक, सूचियाँ और शीर्षक सभी प्रस्तुत करते हैं।
• एक डिफ़ॉल्ट मान लेता है, जिसमें मार्कअप शामिल हो सकता है, इसलिए एक ताज़ा विजेट एक कार्यशील उदाहरण दिखाता है।

बिल्डर के लिए नया? पढ़ें विजेट बिल्डर अवलोकन सबसे पहले, फिर एक विजेट खुला के साथ वापस आओ।

इससे पहले कि आप शुरू करें #

• एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
• एलिमेंटर के लिए मास्टर ऐडऑन स्थापित और सक्रिय हैं। द स्थापना गाइड सेटअप को कवर करता है।
• विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण एक “टीम सदस्य” विजेट है: नाम और भूमिका के लिए पाठ फ़ील्ड, और एक WYSIWYG फ़ील्ड नामित member_bio जीवनी के लिए।

WYSIWYG फ़ील्ड कैसे जोड़ें #

1. को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
2. पर एक अनुभाग जोड़ें सामग्री टैब, उदाहरण के लिए “Membregam।
3. प्रकार wysi बाईं ओर फ़ील्ड खोज बॉक्स में।
4. खींचना वायसीविग अनुभाग में इसकी सेटिंग्स खोलने के लिए मैदान पर पेंसिल पर क्लिक करें।

WYSIWYG फ़ील्ड विकल्पों की व्याख्या की गई #

• लेबलः एलिमेंटर में संपादक के ऊपर का पाठ, उदाहरण के लिए “Bio”। फ़ील्ड “Content” लेबल से प्रारंभ होती है।
• नाम: क्षेत्र की विशिष्ट आईडी और इसके टोकन का नाम उदाहरण के लिए, केवल अक्षरों, संख्याओं और अंडरस्कोर का उपयोग करें member_bio.
• विवरण: एलिमेंटर में संपादक के तहत दिखाया गया एक संकेत इसका उपयोग अपेक्षाओं को निर्धारित करने के लिए करें, जैसे कि “दो या तीन वाक्य बोल्ड, लिंक और सूचियां ठीक हैं।”
• डिफ़ॉल्ट मानः प्रारंभिक सामग्री यह एक सादा पाठ बॉक्स है, इसलिए एचटीएमएल को स्वयं टाइप करें, उदाहरण के लिए एक पैराग्राफ के साथ एक strong टैग और एक लिंक।

लेबल ब्लॉक यहाँ डिफ़ॉल्ट रूप से है, जो आप चाहते हैं: संपादक को पैनल की पूरी चौड़ाई की आवश्यकता है छोड़ दें चयनकर्ता खाली, चूंकि पाठ का एक ब्लॉक सीएसएस मान नहीं है।

बाकी सामान्य सेटिंग्स अन्य क्षेत्रों की तरह ही व्यवहार करती हैं, जिनमें शामिल हैं शर्तों यदि क्षेत्र केवल तभी प्रकट होना चाहिए जब कोई अन्य फ़ील्ड सेट हो।

हमारे परीक्षणों में बिल्डर के अंदर फ़ील्ड कार्ड ने अपने छोटे पूर्वावलोकन संपादक में कच्चे एचटीएमएल के रूप में डिफ़ॉल्ट मान दिखाया वह केवल बिल्डर का अपना पूर्वावलोकन है एलिमेंटर स्वरूपित पाठ के समान डिफ़ॉल्ट प्रस्तुत करता है।

सामग्री को अपने टेम्पलेट में प्रिंट करें #

एक टोकन पूरे क्षेत्र को रखता है इसे एक कंटेनर में लपेटें जिसे आप शैली कर सकते हैं, और इसे गार्ड कर सकते हैं ताकि एक खाली क्षेत्र कोई आवारा रैपर न छोड़ेः

<article class="tm">
  <p class="tm-name">{{ member_name }}</p>
  <p class="tm-role">{{ member_role }}</p>
  {% if member_bio %}
  <div class="tm-bio">{{ member_bio }}</div>
  {% endif %}
</article>

संपादक द्वारा लिखे गए टैग को लक्षित करके सीएसएस पैनल से क्षेत्र को स्टाइल करेंः

.tm-bio p { margin: 0 0 .75em; line-height: 1.6; }
.tm-bio p:last-child { margin-bottom: 0; }
.tm-bio a { color: #4338ca; }
.tm-bio ul { margin: 0 0 .75em 1.1em; }

मत जोड़ो raw एक WYSIWYG टोकन के लिए। सादा टोकन पहले से ही फ़ॉर्मेटिंग प्रस्तुत करता है, और raw केवल सुरक्षा फ़िल्टर को हटाता है।

फ़िल्टर क्या रखता है और गिराता है #

मूल्य उसी फ़िल्टर के माध्यम से जाता है वर्डप्रेस पोस्ट सामग्री के लिए उपयोग करता है हमारे परीक्षणों, शीर्षकों, पैराग्राफों में। [+] strong, em, सूचियाँ, लिंक और यहाँ तक कि इनलाइन भी style विशेषताएँ अपरिवर्तित रहीं। एक iframe हटा दिया गया था, और एक स्क्रिप्ट टैग बिना चलाए हटा दिया गया था।

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

एलिमेंटर में WYSIWYG नियंत्रण का उपयोग करें #

विजेट को किसी पृष्ठ पर जोड़ें, या यदि पृष्ठ पहले से ही खुला था तो संपादक को पुनः लोड करें फ़ील्ड आपके लेबल के तहत पूर्ण संपादक दिखाता है: मीडिया, विज़ुअल और कोड टैब जोड़ें, एक पैराग्राफ प्रारूप ड्रॉपडाउन, बोल्ड, इटैलिक, अंडरलाइन, सूचियां, एक लिंक बटन और फुलस्क्रीन।

संपादक किसी पोस्ट में जिस तरह से लिखते हैं, उसी तरह लिखते हैं। जैसे ही फोकस संपादक पर से निकलता है, पूर्वावलोकन अपडेट हो जाता है। द कोड टैब अंतर्निहित HTML दिखाता है, जो चिपकाई गई फ़ॉर्मेटिंग को साफ़ करने के लिए उपयोगी है।

यहाँ सामने के छोर पर समाप्त कार्ड है, बोल्ड वाक्यांश, लिंक और सूची के साथ सभी क्षेत्र से आ रहे हैंः

सामान्य उपयोग के मामले #

• टीम के सदस्य जीवनियाँ और लेखक बॉक्स।
• फ़ीचर या सेवा विवरण जिन्हें एक सूची या बोल्ड वाक्यांश की आवश्यकता होती है।
• एक उद्धरण और आरोप की एक पंक्ति के साथ प्रशंसापत्र निकाय।
• कार्ड, बॉक्स या पैनल विजेट में कोई भी लंबे प्रारूप वाला टेक्स्ट क्षेत्र।

WYSIWYG क्षेत्र के साथ काम करने के लिए युक्तियाँ #

• इसे वास्तविक मार्कअप के साथ डिफ़ॉल्ट मान दें। संपादक तब देखते हैं कि क्षेत्र किस प्रकार की सामग्री की अपेक्षा करता है, और आप स्वरूपण रेंडर जानते हैं।
• विवरण में लंबाई निर्धारित करें। “दो या तीन वाक्य” बाद में बहुत सारे लेआउट फिक्स बचाता है।
• टैग को स्टाइल करें, टेक्स्ट को नहीं। लिए नियम p, a और ul आपके रैपर क्लास के अंदर जो भी संपादक लिखते हैं, क्षेत्र को सुसंगत रखें।
• टोकन को गार्ड करें {% if %} तो एक खाली फ़ील्ड पृष्ठ पर एक खाली रैपर नहीं छोड़ता है।
• केवल सादा पाठ? द टेक्सटेरिया फ़ील्ड हल्का है चिपकाया मार्कअप या एम्बेड स्निपेट के लिए, का उपयोग करें कोड फ़ील्ड.

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

WYSIWYG फ़ील्ड को सामग्री अनुभाग में छोड़ें, इसे एक स्पष्ट लेबल, एक सहायक विवरण और वास्तविक मार्कअप के साथ एक डिफ़ॉल्ट मान दें, फिर टोकन को अंदर प्रिंट करें {% if %} सीएसएस पैनल से टैग को गार्ड और स्टाइल करें संपादकों को टूलबार मिलता है जिसे वे पहले से जानते हैं और आपके विजेट को साफ स्वरूपित एचटीएमएल मिलता है सादे पाठ के लिए उपयोग करें टेक्सटेरिया फ़ील्ड, चिपकाए गए स्निपेट्स के लिए कोड फ़ील्ड, और जाँच करें मूल्य निर्धारण प्रत्येक योजना में क्या शामिल है।