GrapesJS कस्टम घटक गाइड (2026)

घटक व्यवहार को परिभाषित करते हैं, न कि केवल मार्कअप

एक GrapesJS घटक डिफ़ॉल्ट, लक्षण (संपादन योग्य सेटिंग्स) के साथ एक टाइप किया गया मॉडल है, और एक वैकल्पिक दृश्य। आप एक के साथ पंजीकरण करते हैं DomComponents.addType. यह मार्गदर्शिका एक कस्टम घटक बनाती है विशेषता और दिखाता है कि उस पर HTML मैप कैसे आयात किया जाता है।

1. एक घटक प्रकार पंजीकृत करें

editor.DomComponents.addType('rating', {
  // Map matching HTML onto this type when content is loaded.
  isComponent: (el) => el.classList?.contains('rating') && { type: 'rating' },

  model: {
    defaults: {
      tagName: 'div',
      classes: ['rating'],
      // Editable settings shown in the trait panel:
      traits: [
        { type: 'number', name: 'stars', label: 'Stars', min: 1, max: 5 },
      ],
      stars: 5,
    },
  },
});

2. किसी दृश्य में विशेषता परिवर्तन के React

editor.DomComponents.addType('rating', {
  model: {
    defaults: { tagName: 'div', classes: ['rating'], stars: 5,
      traits: [{ type: 'number', name: 'stars', min: 1, max: 5 }] },
  },
  view: {
    init() {
      this.listenTo(this.model, 'change:stars', this.render);
    },
    onRender() {
      const n = this.model.get('stars');
      this.el.textContent = '★'.repeat(n) + '☆'.repeat(5 - n);
    },
  },
});

3. इसे एक ब्लॉक के रूप में उजागर करें

editor.BlockManager.add('rating', {
  label: 'Rating',
  category: 'Widgets',
  content: { type: 'rating', stars: 4 },
});

क्योंकि isComponent तत्वों को पहचानता है .rating , लोड हो रहा है सहेजा गया HTML घटक को फिर से बनाता है - लक्षण और व्यवहार बरकरार है।

साधारण त्रुटियां

कस्टम घटक पूर्वानुमानित तरीकों से विफल हो जाते हैं। यदि आपका isComponent DOM से मेल खाने के लिए एक सत्य मान (आमतौर पर) { type }वापस नहीं करता है, तो लोड किया गया HTML आपके प्रकार पर मैप नहीं करेगा और लक्षण पुनः लोड करने पर गायब हो जाते हैं। यदि दृश्य मॉडल की change:<trait> घटना नहीं करता हैlistenTo, तो विशेषता पैनल में संपादन फिर से प्रस्तुत नहीं होगा। एक हैंडलर के अंदर फिर से प्रतिपादन जो स्वयं एक परिवर्तन को ट्रिगर करता है, एक अनंत लूप का कारण बन सकता है - जहां संभव हो वहां पूर्ण रेंडर को कॉल करने के बजाय सीधे DOM को अपडेट करें। और सेट draggable/ जानबूझकरdroppable ताकि आपके घटक को केवल वहीं रखा जा सके जहां यह समझ में आता है।

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

आपको एक रनिंग GrapesJS एडिटर और बेसिक JavaScript की आवश्यकता है। घटक पंजीकृत हैं के साथ ; DomComponents.addTypeतीन टुकड़े का पता लगाया जाता है (),isComponent मॉडल (डिफ़ॉल्ट + लक्षण), और एक वैकल्पिक दृश्य (कैनवास व्यवहार)।

मॉडल: डिफ़ॉल्ट, लक्षण और बाधाएं

मॉडल परिभाषित करता है कि घटक क्या है। लक्षणों से परे, आप विवश कर सकते हैं कि यह कहाँ हो सकता है जाओ और यह किसके साथ स्वीकार draggableकरता है, , droppableऔर editable:

editor.DomComponents.addType('rating', {
  isComponent: (el) => el.classList?.contains('rating') && { type: 'rating' },
  model: {
    defaults: {
      tagName: 'div',
      classes: ['rating'],
      droppable: false,
      traits: [{ type: 'number', name: 'stars', min: 1, max: 5 }],
      stars: 5,
    },
  },
});

देखें: विशेषता परिवर्तनों के react

view: {
  init() { this.listenTo(this.model, 'change:stars', this.render); },
  onRender() {
    const n = this.model.get('stars');
    this.el.textContent = '★'.repeat(n) + '☆'.repeat(5 - n);
  },
}

क्यों हैघटक मायने रखता है

isComponent HTML को संपादक में लोड किए जाने पर चलता है। प्रकार लौटाना मिलान तत्वों के लिए ऑब्जेक्ट वह है जो सहेजे गए मार्कअप को आपके घटक में फिर से हाइड्रेट करने देता है अपने लक्षणों और व्यवहार को बरकरार रखते हुए - इसके बिना, एक पुनः लोड आपके घटक को वापस कर देता है सादे HTML में।

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

मॉडल को घोषणात्मक रखें और व्यवहार को ध्यान में रखें। पूर्ण ट्रिगर करने से बचें एक परिवर्तन हैंडलर के अंदर रेंडर करें जो स्वयं एक परिवर्तन का कारण बनता है - DOM को सीधे अपडेट करें छोरों को रोकें। सेट/ draggableजानबूझकरdroppable इसलिए घटक को केवल वहीं रखा जा सकता है जहां यह समझ में आता है। सार्थक लक्षणों को उजागर करें ताकि संपादक कोड के बिना घटक को कॉन्फ़िगर कर सकते हैं।

अगले चरण

सतह के घटक खींचने योग्य इकाइयों के रूप में कस्टम ब्लॉक गाइड, बंडल उन्हें एक कस्टम प्लगइन में, या GrapesJS प्लगइन्स ब्राउज़ करें GJS.Market।

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

मैं GrapesJS में एक कस्टम घटक कैसे बनाऊं?

कॉल editor.DomComponents.addType(type, { isComponent, model, view }) - पहचान, डिफॉल्ट/लक्षण और कैनवास व्यवहार को परिभाषित करना।

लक्षण क्या हैं?

लक्षण एक चयनित के लिए विशेषता पैनल में दिखाई गई संपादन योग्य सेटिंग्स हैं घटक; उन्हें में घोषित model.defaults.traitsकरें।

isComponent कैसे काम करता है?

यह एक DOM तत्व प्राप्त करता है और एक सत्य मूल्य देता है (अक्सर { type }) जब वह तत्व आपका घटक बन जाना चाहिए, इसलिए आयात किया जाता है HTML आपके प्रकार पर मानचित्र।