वाइसीविग

द WYSIWYG फ़ील्ड पूर्ण टिनीएमसीई संपादक को छोड़ देता है, वही समृद्ध-पाठ संपादक वर्डप्रेस ने वर्षों से भेज दिया है, एक कस्टम विजेट के पैनल में संपादकों को बोल्ड, इटैलिक, सूचियां, लिंक, शीर्षक और दृश्य/पाठ टैब स्विच मिलता है जो वे पहले से ही जानते हैं आपका विजेट स्वरूपित एचटीएमएल प्रिंट करने के लिए तैयार मास्टर एडॉन्स के अंदर विजेट बिल्डर, यह सामग्री क्षेत्रों के लिए क्षेत्र है जहां एक मैदान है टेक्सटेरिया पाठ से फ़ॉर्मेटिंग को समतल कर देगा।

WYSIWYG फ़ील्ड समर्थन करता है शर्तों हर दूसरे नियंत्रण की तरह, और इसकी सामग्री इसके माध्यम से प्रस्तुत होती है ट्विग-सिंटैक्स टेम्पलेट इंजन। WYSIWYG मान अपने सुरक्षित HTML को स्वचालित रूप से रखते हैं, इसलिए आपको शायद ही कभी इसकी आवश्यकता होती है |raw फ़िल्टर करें दोनों गाइड विवरण और सीमाओं की व्याख्या करते हैं।

कनेक्शन एक टोकन है प्रिंट करें {{ your_field_name }} HTML पैनल और वहां संग्रहीत मार्कअप रेंडर में, फ़िल्टर किया गया wp_kses_postू तो संरूपण बच जाता है जबकि असुरक्षित टैग छीन लिए जाते हैं कोई अतिरिक्त फिल्टर नहीं, कोई बच जिम्नास्टिक नहीं।

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

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

पहला विजेट? द विजेट बिल्डर अवलोकन संपादक की मूल बातें इस पृष्ठ पर बनाता है शामिल करता है।

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

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

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

खींचना वाइसीविग फ़ील्ड पैनल से नीचे एक अनुभाग में फ़ील्ड करें सामग्री टैब, लंबे समय तक सामग्री के लिए प्राकृतिक घर इसके विकल्प बाईं ओर एक बार भूमि पर खुलते हैं।

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

विकल्प सूची छोटी रहती है क्योंकि संपादक स्वयं जटिलता रखता हैः

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

WYSIWYG फ़ील्ड को उसके टोकन से कनेक्ट करें #

WYSIWYG फ़ील्ड एक टोकन फ़ील्ड है। HTML पैनल में एक टोकन संपूर्ण सामग्री क्षेत्र को रखता है:

<article class="tm-card">
  <h3 class="tm-name">{{ member_name }}</h3>
  <div class="tm-bio">
    {{ member_bio }}
  </div>
</article>

आउटपुट पर, मान गुजरता है wp_kses_post, फ़िल्टर वर्डप्रेस पोस्ट सामग्री पर लागू होता है टैग टिनीएमसीई उत्पादन करता है, पैराग्राफ, मजबूत और उन्हें, सूचियों, लिंक, शीर्षकों, छवियों, सभी अनुमत सूची पर हैं, इसलिए संपादकों का प्रारूप क्या है जो रेंडर करता है कुछ भी असुरक्षित जो पाठ टैब के माध्यम से चुपके से, जैसे एक <script>, छीन लिया गया है.

सावधान रहें: न जोड़ें |raw आदत से बाहर एक WYSIWYG टोकन के लिए। सादा टोकन पहले से ही फ़ॉर्मेटिंग प्रस्तुत करता है, क्योंकि wp_kses_post मार्कअप TinyMCE लिखने की अनुमति देता है; |raw केवल सुरक्षा फ़िल्टर को हटा देता है बिना बदले कि एक सामान्य जैव कैसा दिखता है यदि आउटपुट रेंडर करने के बजाय बच गया दिखता है, तो कारण कहीं और है, न कि एक लापता फ़िल्टर।

टोकन को एक क्लास के साथ एक कंटेनर में लपेटें, जैसा कि उदाहरण में है, और सीएसएस पैनल से क्षेत्र को स्टाइल करेंः

.tm-bio p { margin: 0 0 0.75em; }
.tm-bio a { color: inherit; text-decoration: underline; }

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

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

संपादक लिखते हैं और प्रारूप बिल्कुल वैसे ही जैसे वे एक पोस्ट में करते हैं: पाठ का चयन करें, इसे बोल्ड करें, एक लिंक जोड़ें, एक सूची शुरू करें पूर्वावलोकन अपडेट जैसे ही वे टाइप करते हैं, विजेट के सीएसएस द्वारा स्टाइल की गई सामग्री दिखाते हैं।

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

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

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

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

• सादा टोकन प्रिंट करें। {{ member_bio }} स्वरूपण को वैसे ही प्रस्तुत करता है जैसे वह है; |raw यहां क्षमता जोड़े बिना जोखिम जोड़ता है।
• एक रैपर वर्ग के माध्यम से शैली। लक्ष्य .tm-bio p, .tm-bio ulऔर सीएसएस पैनल में दोस्तों के बजाय उम्मीद संपादक उत्पादन पूर्व स्टाइल आता है।
• एक स्वरूपित डिफ़ॉल्ट सेट करें। बोल्ड नाम और एक लिंक वाला बायो इस बात का जीवंत उदाहरण है कि फ़ील्ड क्या समर्थन करता है।
• प्रति सामग्री क्षेत्र एक WYSIWYG। संपादकों को एक संपादक के अंदर दोनों का प्रबंधन करने के लिए कहने के बजाय परिचय और बढ़िया प्रिंट को अलग-अलग फ़ील्ड दें।
• जब आप कर सकते हैं तो हल्का क्षेत्र चुनें। एक एकल अस्वरूपित पंक्ति पाठ फ़ील्ड में होती है; WYSIWYG तक पहुंचें जब पैराग्राफ, सूचियां या लिंक वास्तव में सामग्री का हिस्सा हों।
• आउटपुट पर केएसईएस की अपेक्षा करें। सामग्री के बाद की अनुमति सूची के बाहर कस्टम टैग डिज़ाइन के अनुसार जीवित नहीं रहेंगे। चिपकाने योग्य कच्चे स्निपेट हैं कोड फ़ील्डकी नौकरी।

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

लपेटकर #

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