Placeholder 2.0 - Premium Drag Experience

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

आपके उपयोगकर्ता ठीक उसी चीज़ को देखते हैं जो वे रख रहे हैं, ठीक उसी स्थान पर पहुँचता है. अब कोई अनुमान नहीं.

v1.5.0 में नया क्या है

जमीन से एक पूर्ण पुनर्निर्माण - वही व्यवहार जिसे आप पसंद करते थे, नीचे आधुनिक टूलचेन:

• TypeScript-प्रथम - तत्काल स्वत: पूर्ण के लिए बंडल घोषणाओं .d.ts के साथ पूर्ण स्रोत फिर से लिखें
• GrapesJS 0.21 + 0.22 समर्थन - बॉक्स से बाहर वर्तमान रिलीज के साथ काम करता है
• ~8 KB gzipped - Vite-संचालित बिल्ड, पुराने वेबपैक बंडल के आधे आकार का
• 10 एनिमेशन प्रीसेट + कस्टम सीएसएस एनिमेशन
• कस्टम प्लेसहोल्डर मोड - लाइव पूर्वावलोकन को अपने स्वयं के HTML/CSS से बदलें
• कॉन्फ़िगर करने योग्य ड्रॉप-ज़ोन रंग ()dropZoneColor - अपने ब्रांड से मेल खाता है
• ठीक समय — flipDurationMs, flipThresholdPx, escapeDispatchDelayMs अब उजागर हो गए हैं
• क्लीन टियरडाउन — idempotent destroy() विधि; पर कोई लीक ईवेंट श्रोता नहीं editor.destroy()
• विकल्प सत्यापन - अमान्य मान चुपचाप टूटने के बजाय स्पष्ट console.warn के साथ डिफ़ॉल्ट पर वापस आ जाते हैं
• 76 यूनिट + एकीकरण परीक्षण (Vitest) - हर रिलीज से पहले युद्ध-परीक्षण किया गया
• फ़ायरफ़ॉक्स संगतता ठीक करता है - ड्रैग-आउटसाइड-कैनवास व्यवहार अब सभी प्रमुख ब्राउज़रों में विश्वसनीय है
• GrapesJS स्टूडियो एसडीके संगत — स्टूडियो संपादक के अंदर काम करता है

सुविधाऐं

खींचते समय लाइव सामग्री पूर्वावलोकन

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

10 बिल्ट-इन एनिमेशन प्रीसेट

वह अनुभव चुनें जो आपके संपादक से मेल खाता हो:

कस्टम एनिमेशन

अपने स्वयं के + @keyframes .animation सीएसएस में ड्रॉप करें - कुल रचनात्मक नियंत्रण:

{ customAnimation: ` @keyframes my-anim { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .animation { animation: my-anim 300ms ease-out both; } ` } 

कस्टम प्लेसहोल्डर ब्लॉक

लाइव पूर्वावलोकन के बजाय एक पतला ड्रॉप संकेतक चाहते हैं? इसे स्वैप करें:

{ dragPlace: { default: 0, html: { block: 'div', content: '' }, css: 'background: #5C6AC4; height: 4px; width: 100%;', } } 

ड्रॉप-ज़ोन हाइलाइटिंग

एक कॉन्फ़िगर करने योग्य रंग रूपरेखा सक्रिय ड्रॉप लक्ष्य को चिह्नित करती है - अब "यह कहाँ उतरने वाला है?"

प्रति-घटक ऑप्ट-आउट

कुछ घटक प्रकार (उदाहरण के लिए text) डिफ़ॉल्ट प्लेसहोल्डर के साथ बेहतर काम करते हैं। उन्हें dragDefault सूचीबद्ध करें और प्लगइन स्वचालित रूप से एक तरफ हट जाता है।

जल्दी शुरू

npm install grapesjs-plugin-placeholder2 

import grapesjs from 'grapesjs'; import placeholder from 'grapesjs-plugin-placeholder2'; grapesjs.init({ container: '#gjs', plugins: [placeholder], pluginsOpts: { [placeholder]: { animation: 'animation1', dropZoneColor: '#5C6AC4', dragDefault: ['text'], } } }); 

सादे <script> टैग उपयोग के लिए यूएमडी बंडल के रूप में भी जहाज।

बक्सों का इस्तेमाल करें

• SaaS पेज बिल्डर्स - अपने उपयोगकर्ताओं को एक प्रीमियम ड्रैग-एंड-ड्रॉप अनुभव दें
• सीएमएस संपादक - सामग्री ब्लॉक को मूर्त महसूस कराएं
• ईमेल बिल्डर्स - ड्रॉप से पहले ब्लॉक प्लेसमेंट की कल्पना करें
• लैंडिंग-पेज टूल - संपादन UX को पॉलिश करें
• GrapesJS स्टूडियो प्रोजेक्ट — पूरी तरह से स्टूडियो एसडीके संगत

तकनीकी जानकारी

• GrapesJS:^0.21.0 || ^0.22.0
• बंडल: रोल अप TypeScript घोषणाओं के साथ ईएसएम + यूएमडी
• आकार: ~ 8 केबी gzipped
• नोड: ≥18 (विकास के लिए)
• परीक्षण किया गया: 72 सबसे अच्छे परीक्षण + नाटककार E2E सुइट

पुराने संस्करण से अपग्रेड क्यों करें?

अगर आप मूल प्लेसहोल्डर प्लगइन का इस्तेमाल कर रहे हैं, तो:

• पुराना प्लगइन वेबपैक 3 + बैबेल 6 था - अब आधुनिक टूलचेन के साथ संगत नहीं है
• कोई TypeScript नहीं, कोई प्रकार नहीं, कोई स्टूडियो एसडीके समर्थन नहीं
• हार्डकोडेड रंग, हार्डकोडेड समय, कोई विधि नहीं destroy()
• संपादक उदाहरणों में ईवेंट श्रोता लीक हो गए

v1.5.0 आपके द्वारा ज्ञात एपीआई सतह को बदले बिना यह सब ठीक करता है।