Custom Fonts

grapesjs के लिए कस्टम फ़ॉन्ट्स प्लगइन

यह कोड एक बड़ी परियोजना का हिस्सा है: सिलेक्स v3 के बारे में

इस प्लगइन के बारे में

लिंक

• कोडपेन पर डेमो
• एनपीएम पैकेज
• चल रहे घटनाक्रमों के बारे में चर्चा

प्लगइन में वर्तमान में ये विशेषताएं हैं

• साइट से फोंट जोड़ने/हटाने के लिए एपीआई (गूल फ़ॉन्ट नाम से)
• DOM और "फ़ॉन्ट परिवार" ड्रॉपडाउन को अपडेट करता है
• साइट डेटा के साथ फ़ॉन्ट्स सहेजें
• साइट डेटा लोड होने पर फोंट लोड करें (लोड होने पर DOM में जोड़ें)
• फ़ॉन्ट प्रबंधित करने के लिए UI
• Google API के साथ एकीकरण
• प्रदर्शन और एपीआई कोटा के लिए स्थानीय संग्रहण में Google फ़ॉन्ट सूची संग्रहीत करें

सीमाएँ:

अभी के लिए यह प्लगइन केवल गूल्ज फोंट का समर्थन करता है और V2 API का उपयोग करता है। इसे V3 में अपग्रेड किया जाना चाहिए और वेरिएबल फोंट का लाभ उठाना चाहिए।

योगदान करने के लिए नीचे "विकास" अनुभाग देखें

प्रेरणा

मैंने चर्चाओं और मुद्दों को देखा जैसे "मैं grapesjs संपादक में कस्टम फोंट कैसे जोड़ सकता हूं? #4563"

मेरे लिए जो काम करता है वह है

1. "फ़ॉन्ट परिवार" ड्रॉपडाउन को अपडेट करें

   const styleManager = editor.StyleManager
   const fontProperty = styleManager.getProperty('typography', 'font-family')
   fontProperty.setOptions(fonts)
   styleManager.render()
   

    

2. फ़ॉन्ट को सही ढंग से प्रदर्शित करने के लिए DOM को अपडेट करें: संपादक में स्टाइल तत्व जोड़ें। कैनवास.गेटडॉक्यूमेंट()

यह काफी आसान है, लेकिन यहां वे चीजें हैं जो मुझे Google फोंट लागू करने में समय लगाती हैं

• फ़ॉन्ट चुनने और उनका नाम, वेरिएंट, वज़न पाने के लिए Google फ़ॉन्ट्स API का इस्तेमाल करें
• लोड करने के लिए फ़ॉन्ट का URL बनाएं
• फ़ॉन्ट प्रबंधित और स्थापित करने के लिए UI