GrapesJS में कस्टम ब्लॉक कैसे जोड़ें (2026)

ब्लॉक वे हैं जिन्हें उपयोगकर्ता कैनवास पर खींचते हैं

एक ब्लॉक एक पुन: प्रयोज्य खंड है जो GrapesJS ब्लॉक पैनल में दिखाई देता है। आप जोड़ें उन्हें ब्लॉक मैनेजर के माध्यम से। यह मार्गदर्शिका सादे HTML ब्लॉक जोड़ती है, उन्हें समूहीकृत करती है श्रेणियों में, उन्हें आइकन देता है, और पुन: प्रयोज्य घटक के साथ एक का समर्थन करता है।

1. एक बुनियादी ब्लॉक जोड़ें

editor.BlockManager.add('cta-banner', {
  label: 'CTA Banner',
  category: 'Sections',
  content: `
    <section class="cta py-16 text-center">
      <h2>Ready to start?</h2>
      <a href="#">Get started</a>
    </section>`,
});

एक content HTML स्ट्रिंग (ऊपर) या एक घटक परिभाषा हो सकती है अधिक नियंत्रण के लिए ऑब्जेक्ट।

2. एक आइकन जोड़ें (मीडिया)

editor.BlockManager.add('image-block', {
  label: 'Image',
  category: 'Basic',
  media: '<svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z"/></svg>',
  content: { type: 'image' },
});

media इनलाइन एसवीजी या एक <img> टैग स्वीकार करता है और है ब्लॉक थंबनेल के रूप में दिखाया गया है।

3. पुन: प्रयोज्य घटक के साथ एक ब्लॉक का समर्थन करें

// content references a custom component type you registered:
editor.BlockManager.add('pricing-card', {
  label: 'Pricing card',
  category: 'Sections',
  content: { type: 'pricing-card' },   // see the custom-components guide
});

इस ब्लॉक को छोड़ने से आपका एक उदाहरण बनता है pricing-card घटक, इसलिए इसका व्यवहार और लक्षण स्वचालित रूप से साथ आते हैं।

टिप्स

उपयोग करने के लिए ब्लॉक को सुखद बनाएं। संपत्ति के साथ संबंधित ब्लॉकों को category समूहित करें ताकि पैनल व्यवस्थित रहे, और प्रत्येक को एक एसवीजी media दें ताकि उपयोगकर्ता इसे एक नज़र में पहचान सकें। एक तत्व से परे किसी भी चीज़ के लिए, ब्लॉक content को एक पंजीकृत घटक द्वारा समर्थित घटक परिभाषा (){ type: '…' } पर सेट करें, ताकि ब्लॉक निष्क्रिय HTML को डंप करने के बजाय अपने स्वयं के लक्षण और व्यवहार को वहन करे। आप ऐड विकल्पों के माध्यम से ऑर्डरिंग और लक्ष्य पैनल को नियंत्रित कर सकते हैं, और आप एक प्लगइन के अंदर से ब्लॉक जोड़ सकते हैं ताकि एक पूरी लाइब्रेरी एक पंक्ति में स्थापित हो सके।

आवश्यक शर्तें

आपको एक रनिंग GrapesJS एडिटर की आवश्यकता है। ब्लॉक मैनेजर के माध्यम से ब्लॉक जोड़े जाते हैं, जो आप किसी भी समय grapesjs.init कॉल कर सकते हैं - अपने ऐप कोड से या यहां से एक प्लगइन के अंदर ताकि एक पूरी लाइब्रेरी एक पंक्ति में स्थापित हो जाए।

जानने लायक ब्लॉक विकल्प

परे , label, categoryऔर content, एक ब्लॉक कर सकते हैं थंबनेल सेट media करें, नियंत्रित करें कि इसे छोड़ने से नया चयन होता है या नहीं component (),select: true और पैनल के लिए सेट करें attributes समाचार:

editor.BlockManager.add('image-card', {
  label: 'Image card',
  category: 'Cards',
  media: '<svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z"/></svg>',
  select: true,
  content: { type: 'image' },
});

घटक-समर्थित ब्लॉक

निष्क्रिय HTML से परे किसी भी चीज़ के लिए, ब्लॉक content को एक घटक पर सेट करें परिभाषा जिसका आपके type द्वारा पंजीकृत घटक से मेल खाता है DomComponents.addType. ब्लॉक को छोड़ने से वह घटक बनता है, इसलिए इसके लक्षण और व्यवहार अपने आप साथ आते हैं।

एक बार में एक संपूर्ण लाइब्रेरी जोड़ें

const blocks = [
  { id: 'h1', label: 'Heading', content: '<h1>Title</h1>' },
  { id: 'p', label: 'Paragraph', content: '<p>Text</p>' },
];
blocks.forEach((b) => editor.BlockManager.add(b.id, { ...b, category: 'Basic' }));

सर्वोत्तम प्रथाएं

समूह संबंधित ब्लॉक के साथ ताकि category पैनल व्यवस्थित रहे, और दे प्रत्येक ब्लॉक एक पहचानने योग्य media आइकन। ब्लॉक HTML को छोटा रखें और शब्दार्थ; जटिल व्यवहार को एक विशाल सामग्री के बजाय एक बैकिंग घटक में धकेलें तार। प्लगइन्स के साथ टकराव से बचने के लिए ब्लॉक आईडी उपसर्ग।

समस्या निवारण

एक ब्लॉक दिखाई नहीं देता है, आमतौर पर इसका मतलब है कि यह ब्लॉक से पहले जोड़ा गया है प्रबंधक तैयार है या उस श्रेणी के अंतर्गत है जो संक्षिप्त हो गई है। इसे छोड़ने से कुछ भी उपयोगी नहीं है अक्सर इसका मतलब है कि संदर्भित घटक type नहीं है पंजीकृत।

अगले चरण

घटक प्रकारों को परिभाषित करने का तरीका जानें ब्लॉक में संदर्भित कर सकते हैं कस्टम घटक मार्गदर्शिका, या लपेटें आपके ब्लॉक पुन: प्रयोज्य में GrapesJS प्लगइन। ब्राउज़ करें पूर्ण GrapesJS प्लगइन्स कैटलॉग या लाइब्रेरी प्लगइन्स को ब्लॉक करें GJS.Market।

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

मैं GrapesJS में एक ब्लॉक कैसे जोड़ूं?

कॉल ; editor.BlockManager.add(id, { label, category, content })द ब्लॉक खींचने के लिए तैयार पैनल में दिखाई देता है।

मैं ब्लॉकों को श्रेणियों में कैसे समूहित करूँ?

गुण सेट करें category - समान श्रेणी वाले ब्लॉक समूहीकृत हैं पैनल में।

क्या कोई ब्लॉक पुन: प्रयोज्य घटक सम्मिलित कर सकता है?

हाँ - एक घटक परिभाषा पर सेट करें content जिसका type आपके द्वारा DomComponents.addTypeपंजीकृत घटक से मेल खाता है।