कस्टम GrapesJS प्लगइन कैसे बनाएं (चरण दर चरण, 2026)

वास्तव में एक GrapesJS प्लगइन क्या है

एक GrapesJS प्लगइन सिर्फ एक फ़ंक्शन है जो संपादक और एक विकल्प प्राप्त करता है वस्तु: (editor, opts) => { /* register things */ }. इसके अंदर आप ब्लॉक, कमांड, घटक, पैनल या भंडारण जोड़ें। कोई विशेष वर्ग नहीं है विस्तार करने के लिए। यह मार्गदर्शिका एक छोटा लेकिन वास्तविक प्लगइन बनाती है और इसे एनपीएम के लिए पैकेज करती है।

1. प्लगइन फ़ंक्शन

// src/index.js
export default (editor, opts = {}) => {
  const options = {
    label: 'My Block',
    category: 'My Plugin',
    ...opts,                       // caller overrides win
  };

  editor.BlockManager.add('my-block', {
    label: options.label,
    category: options.category,
    content: '<section class="my-block"><h2>Hello</h2></section>',
  });
};

2. इसे एक संपादक में प्रयोग करें

import grapesjs from 'grapesjs';
import myPlugin from './src/index.js';

grapesjs.init({
  container: '#gjs',
  plugins: [myPlugin],
  pluginsOpts: {
    // keyed by plugin name when loaded by string; for a function, pass opts here
  },
});

जब आप किसी प्लगइन को उसके पैकेज नाम स्ट्रिंग से लोड करते हैं, तो GrapesJS उसके विकल्पों को पढ़ता है से pluginsOpts['package-name'].

3. एक कमांड और एक बटन जोड़ें

editor.Commands.add('say-hi', {
  run: () => editor.Modal.open({ title: 'Hi', content: 'From my plugin' }),
});

editor.Panels.addButton('options', {
  id: 'say-hi',
  className: 'fa fa-smile-o',
  command: 'say-hi',
});

4. इसे एनपीएम के लिए पैकेज करें

• प्लगइन फ़ंक्शन को पैकेज डिफ़ॉल्ट के रूप में निर्यात करें।
• एक के peerDependencyरूप में सूची, grapesjs निर्भरता नहीं।
• एक ESM + UMD बंडल (रोलअप, या आधिकारिक GrapesJS प्लगइन स्टार्टर) बनाएं।
• भागना npm publish।

मजबूत प्लगइन्स के लिए टिप्स

कुछ आदतें एक फेंकने योग्य प्लगइन से एक फेंकने वाली स्क्रिप्ट को अलग करती हैं। नामस्थान आपके द्वारा पंजीकृत प्रत्येक आईडी (ब्लॉक, कमांड, घटक) एक उपसर्ग के साथ ताकि दो प्लगइन्स कभी न टकराएं। हमेशा इनकमिंग opts के साथ एक डिफ़ॉल्ट ऑब्जेक्ट को मर्ज करें और परिणाम से पढ़ें, ताकि कॉल करने वाले आपके कोड को संपादित किए बिना व्यवहार को ओवरराइड कर सकें। एक के peerDependencyरूप में घोषित करेंgrapesjs, निर्भरता नहीं, इसलिए होस्ट ऐप संस्करण को नियंत्रित करता है। संपादक के ईवेंट destroy पर आपके द्वारा संलग्न कुछ भी (DOM श्रोताओं, टाइमर) को साफ करें। और अपने विकल्पों का दस्तावेजीकरण करें - एक प्लगइन जिसे कोई भी कॉन्फ़िगर नहीं कर सकता है, फोर्क हो जाता है, पुन: उपयोग नहीं किया जाता है।

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

आपको एक कार्यशील GrapesJS सेटअप और बुनियादी JavaScript की आवश्यकता है। एक प्लगइन सिर्फ एक फ़ंक्शन है (editor, opts) => {} - विस्तार करने के लिए कोई वर्ग नहीं है और कोई निर्माण कदम नहीं है चौंक। जब आप प्लगइन को पैकेज करते हैं तो आपको केवल एक बंडलर (Vite, Webpack, या Rollup) की आवश्यकता होती है वितरण के लिए।

एक फुलर प्लगइन: ब्लॉक + कमांड + बटन

असली प्लगइन्स आमतौर पर एक साथ कई चीजें दर्ज करते हैं। यहां एक एकल प्लगइन एक ब्लॉक, एक कमांड और एक टूलबार बटन जोड़ता है:

export default (editor, opts = {}) => {
  const options = { label: 'Hi', ...opts };

  editor.BlockManager.add('callout', {
    label: 'Callout',
    category: 'Custom',
    content: '<div class="callout">Note</div>',
  });

  editor.Commands.add('say-hi', {
    run: () => editor.Modal.open({ title: options.label, content: 'From my plugin' }),
  });

  editor.Panels.addButton('options', {
    id: 'say-hi', className: 'fa fa-smile-o', command: 'say-hi',
  });
};

नष्ट करने पर सफाई करें

यदि आपका प्लगइन DOM श्रोताओं, टाइमर या बाहरी संसाधनों को संलग्न करता है, तो उन्हें चालू करें संपादक की destroy घटना इसलिए संपादक को बार-बार एम्बेड करना (आम एसपीए रूटिंग) लीक नहीं होता है:

const onScroll = () => {/* … */};
window.addEventListener('scroll', onScroll);
editor.on('destroy', () => window.removeEventListener('scroll', onScroll));

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

नामस्थान प्रत्येक आईडी जिसे आप पंजीकृत करते हैं (ब्लॉक, कमांड, घटक) एक उपसर्ग के साथ तो दो प्लगइन्स कभी नहीं टकराते। हमेशा आने वाले डिफ़ॉल्ट ऑब्जेक्ट को मर्ज करें opts. एक के peerDependency रूप में घोषित करें grapesjs होस्ट ऐप संस्करण को नियंत्रित करता है। प्रति प्लगइन और दस्तावेज़ के लिए एक जिम्मेदारी रखें इसके विकल्प - एक प्लगइन जिसे कोई भी कॉन्फ़िगर नहीं कर सकता है, फोर्क हो जाता है, पुन: उपयोग नहीं किया जाता है।

इसे एनपीएम के लिए पैकेज करें

फ़ंक्शन को पैकेज डिफ़ॉल्ट के रूप में निर्यात करें, एक ESM + UMD बंडल बनाएं (रोलअप या आधिकारिक GrapesJS प्लगइन स्टार्टर), एक सहकर्मी निर्भरता के रूप में सूची, grapesjs और चलाएं npm publish। उपभोक्ता इसे नाम से लोड करते हैं और विकल्प पास करते हैं pluginsOpts.

अगले चरण

एक शुरुआत चाहते हैं? के साथ एक प्लगइन मचान उत्पन्न करें GJS.Market प्लगइन जनरेटर, फिर गोता लगाएँ कस्टम ब्लॉक जोड़ना और कस्टम घटक। पूरा ब्राउज़ करें GrapesJS प्लगइन्स कैटलॉग या से शुरू करें GJS.Market होम पेज।

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

GrapesJS प्लगइन क्या है?

एक फ़ंक्शन (editor, opts) => {} जो ब्लॉक, कमांड को पंजीकृत करता है, घटक, पैनल, या भंडारण। आप इसे के माध्यम से grapesjs.init पास करते हैं plugins सरणी।

मैं प्लगइन में विकल्प कैसे जोड़ूं?

डिफ़ॉल्ट ऑब्जेक्ट को इनकमिंग opts के साथ मर्ज करें और परिणाम। कॉल करने वाले उन्हें इसके माध्यम से pluginsOptsसेट करते हैं।

मैं एनपीएम को कैसे प्रकाशित करूं?

फ़ंक्शन को डिफ़ॉल्ट के रूप में निर्यात करें, एक सहकर्मी के रूप में घोषित grapesjs करें निर्भरता, एक बंडल बनाएं, और चलाएं npm publish।