HTML ड्रैग-एंड-ड्रॉप बिल्डर

GrapesJS के साथ एक HTML ड्रैग-एंड-ड्रॉप बिल्डर बनाएं

ड्रैग-एंड-ड्रॉप घटकों के साथ दृश्य रूप से HTML पृष्ठ बनाएं, हाथ से CSS लिखे बिना शैलियों को संपादित करें, और अपने एप्लिकेशन द्वारा उत्पादित HTML और CSS पर नियंत्रण रखें।

निर्माण शुरू करें HTML संपादक का प्रयास करें
खुला स्रोतस्व-होस्टेडHTML + CSS आउटपुटएक्स्टेंसिबलएम्बेड करने योग्य

26k+

GitHub सितारे

1.4M+

मासिक npm डाउनलोड

100+

GJS.Market पर प्लगइन्स

BSD-3-Clause

कोर लाइसेंस

दृश्य · HTML · CSS

एक खंड, तीन दृश्य

यह एक घटक में पृष्ठ का पूरा तर्क है। विज़ुअल टैब वह है जो आपका उपयोगकर्ता खींचता है और संपादित करता है। अन्य दो वे हैं जो संपादक आपके कोड को वापस सौंपता है - कुछ भी छिपा नहीं है, कुछ भी मालिकाना नहीं है, बस मार्कअप और स्टाइलशीट टेक्स्ट जिसे आप अपनी पसंद के अनुसार स्टोर, रूपांतरित और प्रकाशित कर सकते हैं।

<div id="editor">

उपयोगकर्ता क्या देखता है: बाईं ओर ब्लॉक, बीच में पृष्ठ, दाईं ओर शैली नियंत्रण।

ब्लॉक

  • Hero
  • टेक्स्ट
  • छवि
  • घुंडी
  • कॉलम
  • फार्म
your-app.com/editor
section.hero

Build faster

Launch your next project.

Get started

दोनों कोड फलक GrapesJS 0.23.6 के वास्तविक रिटर्न मान हैं, पढ़ने के लिए फिर से इंडेंट किए गए हैं - प्रत्येक कॉल वास्तव में एक पंक्ति लौटाती है। उन पर निर्माण करने से पहले जानने लायक दो विवरण: getHtml() रैपर को क्रमबद्ध करता है, इसलिए परिणाम <body> में संलग्न होता है ... </body>, और getCss() शॉर्टहैंड घोषणाओं को लॉन्गहैंड के रूप में लिखता है और रंगों को आरजीबी () में सामान्य करता है। स्टाइलशीट भी एक छोटे से रीसेट GrapesJS इंजेक्ट के साथ शुरू होती है; getCss({ avoidProtected: true }) इसे छोड़ देता है।

विचार

प्रत्येक लेआउट को हाथ से लिखने के बजाय HTML विज़ुअल रूप से बनाएं

एक HTML ड्रैग-एंड-ड्रॉप बिल्डर उपयोगकर्ताओं को पृष्ठ संरचनाओं को नेत्रहीन रूप से इकट्ठा करने देता है, जबकि आपका एप्लिकेशन अंतर्निहित सामग्री, स्टाइलिंग और प्रकाशन वर्कफ़्लो के नियंत्रण में रहता है।

खींचें और छोड़ें

उपयोगकर्ता टेम्पलेट फ़ाइल को संपादित करने के बजाय ब्लॉक और घटकों को कैनवास पर ले जाते हैं। आप तय करते हैं कि कौन से ब्लॉक मौजूद हैं, उन्हें कहां गिराया जा सकता है और उनमें क्या हो सकता है।

दृश्य संपादन

सामग्री, लेआउट और शैलियों को हर CSS नियम को हाथ से लिखने के बजाय पैनल के माध्यम से संपादित किया जाता है। संपादक उन विकल्पों को सामान्य स्टाइलशीट नियमों में बदल देता है।

HTML + CSS आउटपुट

परिणामी HTML और CSS को दो सादे तारों के रूप में पुनः प्राप्त करें और उन्हें अपने स्वयं के एप्लिकेशन, अपने स्वयं के भंडारण और अपने स्वयं के प्रकाशन वर्कफ़्लो में ले जाएं।

परिभाषा

HTML ड्रैग-एंड-ड्रॉप बिल्डर क्या है?

यह एक संपादक है जो किसी व्यक्ति को टुकड़ों को कैनवास पर खींचकर, कोड के बजाय नियंत्रण के माध्यम से समायोजित करके, और वास्तविक HTML और CSS को दूसरी तरफ से बाहर निकालकर एक वेब पेज को इकट्ठा करने देता है। इसे आश्वस्त करने के लिए, इसे निम्नलिखित सभी को सॉफ़्टवेयर के एक सुसंगत टुकड़े में संयोजित करना होगा:

  • HTML घटक - कैनवास पर प्रत्येक तत्व को कुछ ऐसा मॉडल किया गया है जिसके बारे में संपादक तर्क कर सकता है
  • एक कैनवास जो पृष्ठ को ब्राउज़र के रूप में प्रस्तुत करता है, जबकि संपादन योग्य रहता है
  • खींचें और छोड़ें, फ्री-फ्लोटिंग बॉक्स के बजाय वैध ड्रॉप लक्ष्य के साथ
  • पुनः प्रयोज्य ब्लॉक एक उपयोगकर्ता बार-बार खींच सकता है
  • शैली नियंत्रण जो वास्तविक CSS नियम लिखते हैं
  • प्रति ब्रेकपॉइंट उत्तरदायी संपादन
  • छवियों और मीडिया के लिए परिसंपत्ति प्रबंधन
  • दृढ़ता, इसलिए एक आधा-अधूरा पृष्ठ एक बंद टैब से बच जाता है
  • तैयार HTML और CSS का निर्यात और प्रकाशन

एक दृश्य HTML संपादक और एक साधारण ड्रैग-एंड-ड्रॉप लाइब्रेरी के बीच का अंतर यह है कि संपादक संपूर्ण संपादन स्थिति - चयन, घटक, शैलियों, कमांड, भंडारण और आउटपुट - को एक सिस्टम के रूप में प्रबंधित करता है। एक पुस्तकालय स्क्रीन पर एक बॉक्स को स्थानांतरित करता है; एक संपादक जानता है कि वह बॉक्स क्या है, इसमें क्या हो सकता है, कौन सा CSS नियम इसका है, और परिणाम को कैसे क्रमबद्ध किया जाए।

लाइव संपादक

एक वास्तविक HTML संपादक का प्रयास करें

तीन सार्वजनिक GrapesJS बनाता है। जब तक आप क्लिक नहीं करते तब तक कुछ भी लोड नहीं होता है - फ़्रेम अनुरोधित रहते हैं इसलिए इस अनुभाग में आपको आगमन पर कुछ भी खर्च नहीं करना पड़ता है।

एक नए टैब में खोलें

स्टॉक GrapesJS डेमो। एक ब्लॉक को खींचें, उसका चयन करें, एक शैली बदलें - फिर उसके टूलबार में कोड दृश्य खोलें और अपने साथ HTML और CSS परिवर्तन देखें।

grapesjs.com/demo.htmlनिःशुल्क

iframe में एक तृतीय-पक्ष डेमो लोड करता है। जब तक आप क्लिक नहीं करते तब तक कुछ भी अनुरोध नहीं किया जाता है।

कार्यप्रवाह

ड्रैग एंड ड्रॉप से उत्पादन तक HTML

  1. 1
    01

    एक ब्लॉक चुनें

    उपयोगकर्ता आपके द्वारा परिभाषित पैलेट से चुनता है। एक ब्लॉक एक नामित, पुनः प्रयोज्य प्रारंभिक बिंदु है - एक hero, एक मूल्य निर्धारण तालिका, एक फॉर्म - एक मनमाना खाली div नहीं।

  2. 2
    02

    इसे कैनवास में खींचें

    संपादक हल करता है कि ब्लॉक कानूनी रूप से कहां उतर सकता है, घटक सम्मिलित करता है और उसका चयन करता है। प्रति घटक प्रकार सेट करने के लिए ड्रॉप नियम आपके हैं।

  3. 3
    03

    सामग्री और शैलियों को संपादित करें

    पाठ को जगह में संपादित किया गया है; लेआउट, रिक्ति, टाइपोग्राफी और रंग Style Manager से आते हैं। प्रत्येक परिवर्तन संपादक ट्रैक का CSS नियम बन जाता है।

  4. 4
    04

    प्रोजेक्ट सहेजें

    Storage Manager संपादक राज्य को उस समापन बिंदु पर भेजता है जिस पर आप इसे इंगित करते हैं। यह वह स्थिति है जिसे संपादन जारी रखने की आवश्यकता है, समाप्त पृष्ठ नहीं।

  5. 5
    05

    निर्यात या प्रकाशित करें HTML + CSS

    getHtml() और getCss() पर कॉल करें, फिर वह करें जो आपके उत्पाद की आवश्यकता हो: sanitize, अपने लेआउट, संस्करण, कैश में लपेटें, तैनात करें।

संपादन सतह

उपयोगकर्ता क्या संपादित कर सकते हैं?

बिल्कुल उतना ही जितना आप अनुमति देते हैं। इनमें से हर एक कुछ ऐसा है जिसे संपादक उजागर कर सकता है - और कुछ ऐसा जिसे आप प्रति घटक प्रकार में लॉक कर सकते हैं ताकि एक बाज़ारिया एक इंजीनियर द्वारा डिज़ाइन किए गए लेआउट को तोड़ न सके।

सामग्री

पाठ, शीर्षक, लिंक और कोई भी सामग्री जिसे आप संपादन योग्य चिह्नित करते हैं। Components आप बरकरार रखना चाहते हैं उसे आसानी से गैर-संपादन योग्य छोड़ा जा सकता है।

अभिन्यास

अनुभाग, कॉलम, कंटेनर और उनके बीच की दूरी, Style Manager में आयाम और फ्लेक्स नियंत्रण के माध्यम से।

मुद्रण कला

फ़ॉन्ट परिवार, आकार, वजन, रेखा की ऊंचाई और संरेखण, सामान्य CSS घोषणाओं के रूप में लिखा गया है।

रंग की

पाठ, पृष्ठभूमि, बॉर्डर और अन्य दृश्य गुण। मानों को उत्सर्जित स्टाइलशीट में rgb() के रूप में क्रमबद्ध किया जाता है।

छवियाँ और मीडिया

Asset Manager के माध्यम से नियंत्रित किया जाता है, जिसे आप अपने स्वयं के अपलोड एंडपॉइंट या स्टोरेज प्रदाता पर इंगित कर सकते हैं।

उत्तरदायी शैलियाँ

नियम किसी डिवाइस के लिए स्कोप किए गए हैं. ब्रेकपॉइंट सक्रिय होने पर स्टाइलिंग आधार नियम को अधिलेखित करने के बजाय एक मेल खाने वाली मीडिया क्वेरी का उत्सर्जन करती है.

अवयव

आपके द्वारा परिभाषित संरचित, पुनः प्रयोज्य तत्व — वह इकाई जिसे एक ब्लॉक एक बार गिरा देने के बाद बदल जाता है, और वह चीज़ जिसे आपका ऐप बाद में पहचान सकता है।

गुण और traits

लक्षण सेटिंग पैनल में फ़ील्ड बन जाते हैं, इसलिए एक कस्टम घटक एक शीर्षक और एक लिंक लक्ष्य को उजागर कर सकता है और कुछ नहीं।

इनमें से कुछ डिफ़ॉल्ट के बजाय कॉन्फ़िगरेशन हैं। GrapesJS Style Manager को सामान्य, फ्लेक्स, आयाम, टाइपोग्राफी, सजावट और अतिरिक्त क्षेत्रों के साथ बॉक्स से बाहर भेजता है; संपत्ति अपलोड, रिच-टेक्स्ट व्यवहार और प्रति-घटक अनुमतियाँ ऐसी चीजें हैं जिन्हें आप तार करते हैं - या इसके लिए एक प्लगइन स्थापित करते हैं।

उत्पादन

आप HTML और CSS को नियंत्रित करते हैं

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

कैनवास से लाइव पेज तक

  1. दृश्य संपादक
  2. परियोजना की स्थिति
  3. HTML + CSS
  4. आपका बैकएंड
  5. आपका प्रकाशन
publish.jsJS
// What the editor needs to keep editing — components, styles,
// pages, assets and symbols. Store this to resume a session.
const projectState = editor.getProjectData();

// What your users actually receive. Two plain strings.
const html = editor.getHtml();  // <body>…</body>
const css = editor.getCss();    // one line of CSS

// From here it is your application's decision: sanitize it, wrap it
// in your own layout, version it, cache it, put it behind your CDN.
await fetch(`/api/pages/${pageId}/publish`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ html, css }),
});
  • getProjectData() संपादन योग्य स्थिति लौटाता है - पृष्ठ, शैलियाँ, संपत्ति, प्रतीक और डेटा स्रोत। सत्र फिर से शुरू करने के लिए इसे संग्रहीत करें; यह वह नहीं है जो आप आगंतुकों को परोसते हैं।
  • getHtml() और getCss() रिटर्न स्ट्रिंग्स। प्रकाशित पृष्ठ पर स्थापित करने के लिए कोई रनटाइम नहीं है और लूप में कोई रेंडरिंग सेवा नहीं है।
  • सैनिटाइजेशन, टेम्प्लेटिंग, वर्जनिंग, कैशिंग और डिप्लॉयमेंट आपके पक्ष में रहते हैं। यह एक सीमा है, अंतर नहीं - यह वह है जो आउटपुट को आपके पास पहले से मौजूद उत्पाद को फिट करने देता है।

उम्मीदों पर एक नोट: उत्सर्जित स्टाइलशीट वफादार है, हाथ से ट्यून नहीं किया गया है। शॉर्टहैंड लॉन्गहैंड के रूप में निकलते हैं, रंग rgb() के रूप में, और एक छोटा रीसेट तब तक प्रीपेड होता है जब तक कि आप इसे अक्षम नहीं करते। आउटपुट को एक विश्वसनीय स्रोत के रूप में मानें जिसे आप पोस्ट-प्रोसेस करते हैं, उसी तरह जैसे आप किसी भी बिल्ड चरण के आउटपुट का इलाज करेंगे।

बिल्ड बनाम एक कोर से शुरू करें

स्क्रैच से HTML संपादक क्यों बनाएं?

प्रत्येक दृश्य HTML संपादक को कुछ भी दिलचस्प करने से पहले सबसिस्टम के समान सेट की आवश्यकता होती है। सवाल यह नहीं है कि आपको उनकी आवश्यकता होगी या नहीं - यह है कि क्या उन्हें लिखना आपकी टीम के अगले छह महीनों के लायक आपके उत्पाद का हिस्सा है।

कुछ भी संपादित करने से पहले एक HTML संपादक को क्या चाहिए

  • संपादन योग्य कैनवास
  • खींचें और छोड़ें
  • Component मॉडल
  • संग्रह
  • Block पैलेट
  • शैली नियंत्रण
  • ब्रेकप्वाइंट
  • संपत्ति पुस्तकालय
  • पूर्ववत करें / फिर से करें
  • क्रमबद्धता
  • भंडार
  • HTML आउटपुट
  • CSS आउटपुट
  • प्लगइन API
इसे स्वयं बनाएं

आप सभी चौदह के मालिक हैं

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

GrapesJS से शुरू करें

आप वहीं से शुरू करते हैं जहां वे पहले से ही काम करते हैं

कैनवास, ड्रैग एंड ड्रॉप, घटक मॉडल, Block Manager, Style Manager, Device Manager, Asset Manager, पूर्ववत इतिहास, Storage Manager और HTML/CSS आउटपुट APIs कोर के साथ आते हैं। आप जो लिखते हैं वह वह हिस्सा है जो आपके उत्पाद के लिए विशिष्ट है।

यह दावा नहीं है कि GrapesJS आपका पूरा उत्पाद है। भंडारण, प्रमाणीकरण, अनुमतियाँ, प्रकाशन, स्वच्छता और प्रत्येक उत्पाद-विशिष्ट वर्कफ़्लो आपका ही रहता है — नीचे दिया गया आर्किटेक्चर आरेख देखें कि रेखा कहाँ गिरती है।

देखें कि रेखा कहाँ गिरती है
सबसिस्टम द्वारा सबसिस्टम

आप क्या लिखते हैं, और जो पहले से मौजूद है

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

संपादक सबसिस्टमअपने आप को बनाएंGrapesJS से शुरू करें
कैंवसनिर्माणEditor फाउंडेशन
खींचें और छोड़ेंनिर्माणEditor फाउंडेशन
Component मॉडलनिर्माणDomComponents
ब्लॉकनिर्माणBlock Manager
शैली नियंत्रणनिर्माणStyle Manager
उत्तरदायी संपादननिर्माणDevice Manager
संपत्तिनिर्माणAsset Manager
पूर्ववत करें / फिर से करेंनिर्माणCommands और इतिहास
भंडारनिर्माणStorage Manager
HTML आउटपुटनिर्माणeditor.getHtml()
CSS आउटपुटनिर्माणeditor.getCss()
कस्टम घटकनिर्माणDomComponents.addType
Plugin वास्तुकलानिर्माणमौजूदा प्लगइन API
प्रमाणीकरण और अनुमतियाँनिर्माणआपका आवेदन
स्वच्छतानिर्माणआपका आवेदन
प्रकाशन-व्‍यवसायनिर्माणआपका आवेदन

अंतिम तीन पंक्तियाँ ईमानदार हैं। संपादक को एम्बेड करने के बारे में कुछ भी आपकी जिम्मेदारी को हटा नहीं देता है कि कौन क्या संपादित कर सकता है, क्या संग्रहीत हो सकता है, और क्या जनता तक पहुंचता है।

स्‍थापत्‍यशैली

एक HTML ड्रैग-एंड-ड्रॉप बिल्डर आपके एप्लिकेशन में कैसे फिट बैठता है

संपादक आपके उत्पाद की एक परत है - उत्पाद ही नहीं। आपका एप्लिकेशन उपयोगकर्ताओं, अनुमतियों, डेटा और लाइव होने के बारे में निर्णय रखता है।

आपका आवेदन

आप सतह के मालिक हैं

  • उपयोगकर्ता
  • प्रमाणीकरण और अनुमतियाँ
  • रूटिंग
  • बिलिंग
  • नेविगेशन

एंबेडेड परत

GrapesJS दृश्य संपादक

प्लगइन्स के साथ इसे बढ़ाएं
  • कैंवस
  • ब्लॉक
  • अवयव
  • शैलियों
  • संपत्ति
  • उपकरण

  • दृढ़ता

    आपका API

    • Storage Manager
    • स्वतः सेव
    • संस्करणों

  • डाटा

    आपका डेटाबेस

    • परियोजनाओं
    • पेज
    • संपत्ति

  • वितरण

    आपका प्रकाशन

    • पूर्वसमीक्षा
    • स्‍वीकृति
    • लाइव HTML
GrapesJS दृश्य HTML संपादन परत प्रदान करता है। इसके ऊपर और नीचे सब कुछ - कौन संपादन कर रहा है, क्या संग्रहीत किया गया है, क्या प्रकाशित किया गया है - आपके पास पहले से मौजूद एप्लिकेशन के अंदर रहता है।
हुड के नीचे

संपादक के पीछे बिल्डिंग ब्लॉक्स

पांच प्रबंधक अधिकांश काम करते हैं। आप शुरू करने के एक घंटे के भीतर उनसे मिलेंगे, इसलिए यह जानने लायक है कि प्रत्येक किसके लिए जिम्मेदार है।

अवयव

HTML तत्वों को संपादन योग्य घटकों के रूप में दर्शाया गया है, उनके अपने नियमों के साथ कि उनमें क्या है, क्या उन्हें खींचा जा सकता है और वे किन गुणों को उजागर करते हैं।

Block Manager

पैलेट। Blocks वे हैं जो उपयोगकर्ता खींचते हैं; हर एक उस घटक का नाम देता है जो वह बन जाता है। कोर एक खाली पैलेट भेजता है, इसलिए वहां जो दिखाई देता है वह पूरी तरह से आपका निर्णय है।

Style Manager

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

Storage Manager

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

Asset Manager

छवियाँ और मीडिया: पिकर उपयोगकर्ता देखते हैं और उसके पीछे अपलोड पथ, जिसे आप अपने स्वयं के समापन बिंदु या प्रदाता प्लगइन पर इंगित करते हैं।

GrapesJS दस्तावेज़ पढ़ें
कस्टम घटक

अपनी खुद की HTML घटक

यह वह जगह है जहां एक HTML बिल्डर सामान्य होना बंद कर देता है। एक घटक प्रकार को परिभाषित करें, तय करें कि यह क्या प्रस्तुत करता है, और केवल उन गुणों को उजागर करें जिन्हें उपयोगकर्ताओं को नियंत्रित करना चाहिए - बाकी मार्कअप ठीक वैसा ही रहता है जैसा आपके इंजीनियरों ने लिखा था।

hero-block.jsJS
// A block is what the user drags out of the panel.
editor.BlockManager.add('hero', {
  label: 'Hero',
  category: 'Sections',
  content: { type: 'hero' },
});

// A component type is what that block becomes on the canvas — and the
// only place you decide what the user may change about it.
editor.DomComponents.addType('hero', {
  model: {
    defaults: {
      tagName: 'section',
      attributes: { class: 'hero' },
      components: '<h1 class="hero__title">Build faster</h1>',
      // Traits become the fields in the settings panel.
      traits: [{ type: 'text', name: 'headline', label: 'Headline' }],
      droppable: false,
    },
  },
});
रीड द कंपोनेंट्स API
ब्लॉक → घटक → आउटपुट

ब्लॉक घटक नहीं है

अधिकांश ट्यूटोरियल में चार चीजें एक नाम साझा करती हैं और वास्तव में अलग होती हैं। उन्हें अलग रखना एक बिल्डर के बीच का अंतर है जिसे आप बनाए रख सकते हैं और HTML स्ट्रिंग्स का ढेर है।

  1. Block
  2. घटक
  3. लक्षण
  4. मार्कअप
  5. आपका आवेदन

Block

उपयोगकर्ता क्या खींचता है

एक पैलेट प्रविष्टि: एक लेबल, एक श्रेणी और वह सामग्री जो इसे सम्मिलित करती है। विशुद्ध रूप से एक प्रारंभिक बिंदु - ड्रॉप के बाद इसका कोई जीवन नहीं है।

घटक

यह क्या हो जाता है

DomComponents के साथ पंजीकृत प्रकार। यह टैग, डिफ़ॉल्ट बच्चों को तय करता है, क्या चीज़ droppable है, और तब से संपादक इसके साथ कैसा व्यवहार करता है।

लक्षण

उपयोगकर्ता क्या बदल सकते हैं

सेटिंग पैनल में फ़ील्ड। एक विशेषता एक अन्यथा सील किए गए घटक में एक जानबूझकर छेद है - एक शीर्षक, एक लिंक लक्ष्य, एक योजना आईडी।

मार्कअप

क्या निकलता है

घटक को वापस HTML पर क्रमबद्ध किया गया है, आपके द्वारा परिभाषित कक्षाओं और विशेषताओं के साथ, जो कुछ भी आपका बैकएंड आगे करता है उसके लिए तैयार है।

इस श्रृंखला को जानबूझकर डिज़ाइन करें और गैर-तकनीकी उपयोगकर्ताओं को आपके द्वारा चुनी गई सीमाओं के अंदर वास्तविक स्वतंत्रता मिलती है। इसे छोड़ें और आपने एक टेक्स्ट एडिटर भेज दिया है जो divs का उत्सर्जन करता है।

ब्लॉक

तैयार HTML ब्लॉकों के साथ शुरू करें

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

  • Hero

    एक शीर्षक के साथ एक अनुभाग, एक सहायक पैराग्राफ और एक बटन के रूप में स्टाइल किया गया एक लिंक।

  • हैडर

    लोगो तत्व के साथ एक हेडर और एक नेविगेशन सूची जो संकीर्ण चौड़ाई पर ढह जाती है।

  • सुविधाऐं

    दोहराए गए कार्ड का एक कंटेनर, प्रत्येक में एक आइकन slot, एक शीर्षक और बॉडी कॉपी होती है।

  • मूल्य निर्धारण

    मूल्य तत्व, सुविधा सूची और कॉल-टू-एक्शन लिंक के साथ कार्ड की योजना बनाएं।

  • प्रशंसापत्र

    एक उद्धरण और एक वैकल्पिक अवतार छवि के साथ ब्लॉककोट तत्व।

  • दर्शकदीर्घा

    एक छवि ग्रिड जिसके स्रोत Asset Manager से भरे जाते हैं।

  • CTA

    एक शीर्षक और एक प्राथमिक लिंक के साथ एक एकल केंद्रित खंड।

  • फार्म

    लेबल किए गए इनपुट के साथ एक प्रपत्र तत्व और एक क्रिया जिसे आप जहां चाहें इंगित करते हैं।

  • पाद लेख

    किसी पाद लेख तत्व में कॉलम, कानूनी पाठ और द्वितीयक नेविगेशन को लिंक करें.

ब्लॉक प्लगइन्स ब्राउज़ करें

सटीक होने के लायक: ये ब्लॉक प्रकारों के उदाहरण हैं, न कि GrapesJS में निर्मित चीजों की सूची। कोर उद्देश्य पर एक खाली Block Manager से शुरू होता है - जो पैलेट आपके उपयोगकर्ताओं को मिलता है, वह आपके द्वारा किया गया निर्णय है, या तो ब्लॉक लिखकर या इस पृष्ठ के नीचे ब्लॉक प्लगइन्स में से एक को स्थापित करके।

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

आप क्या बना सकते हैं?

एक ही संपादन कोर, छह अलग-अलग समस्याओं की ओर इशारा करता है। इनमें से प्रत्येक को एक अलग कारण से HTML-स्तरीय नियंत्रण की आवश्यकता होती है।

HTML पृष्ठ संपादक

उपयोगकर्ताओं को उन पृष्ठों को संपादित करने का एक विज़ुअल तरीका दें जो पहले से ही HTML के रूप में मौजूद हैं। क्योंकि संपादक राउंड-ट्रिप मार्कअप करता है, आप अपने वर्तमान पृष्ठों को किसी के मालिकाना प्रारूप में माइग्रेट करने के बजाय उनका विस्तार कर रहे हैं।

WYSIWYG पेज बिल्डर

लैंडिंग पेज बिल्डर

विपणक को आपकी टीम द्वारा डिज़ाइन किए गए ब्लॉकों से अभियान पृष्ठों को इकट्ठा करने दें, उन कक्षाओं और संरचना के साथ जो आपकी डिज़ाइन प्रणाली अभी भी आउटपुट में बरकरार है।

लैंडिंग पेज बिल्डर

SaaS पेज बिल्डर

विज़ुअल संपादन को अपने उत्पाद की एक विशेषता के रूप में एम्बेड करें. ग्राहक आपके ऐप के अंदर, आपके डोमेन पर, आपके डेटाबेस में संग्रहीत पेज बनाते हैं.

SaaS पेज बिल्डर

CMS दृश्य संपादक

सामग्री प्लेटफ़ॉर्म को बदले बिना उसमें एक दृश्य परत जोड़ें। संपादक HTML CMS का उत्पादन करता है जो पहले से ही जानता है कि कैसे स्टोर और रेंडर करना है।

हेडलेस CMS संपादक

ईमेल बिल्डर

ईमेल HTML इसका अपना अनुशासन है - टेबल, इनलाइन शैलियाँ, क्लाइंट विचित्रताएँ। GrapesJS इसे वेब-पेज पथ के बजाय MJML और न्यूज़लेटर प्रीसेट के माध्यम से संभालता है।

React ईमेल बिल्डर

एम्बेड करने योग्य संपादक

संपादक को अपने स्वयं के प्रमाणीकरण और नेविगेशन के पीछे, किसी मौजूदा डैशबोर्ड के अंदर भेजें, जिसमें किसी तृतीय-पक्ष साइट पर कोई रीडायरेक्ट न हो.

एम्बेड करने योग्य पेज बिल्डर
भेंट

HTML विज़ुअल एडिटर का उपयोग कौन करता है?

अलग-अलग टीमें अलग-अलग कारणों से यहां पहुंचती हैं, लेकिन आवश्यकता एक ही है: दृश्य संपादन जिससे उन्हें मार्कअप पर नियंत्रण नहीं लगता है।

डेवलपर्स

किसी प्लेटफ़ॉर्म को अपनाए बिना या किसी और के रनटाइम के आसपास फ्रंट एंड को फिर से लिखे बिना, पहले से मौजूद एप्लिकेशन में विज़ुअल एडिटिंग जोड़ें।

SaaS टीमें

पृष्ठ निर्माण को एक ऐसी सुविधा में बदलें जिसके लिए ग्राहक भुगतान करते हैं, जिसमें संपादक आपके डोमेन पर रहता है और डेटा आपके डेटाबेस में रहता है.

CMS टीमें

नीचे CMS को बदले बिना सामग्री टीमों को दृश्य संपादन दें, क्योंकि जो सामने आता है वह HTML सिस्टम पहले से ही संभालता है।

एजेंसियों

अपने स्वयं के ब्लॉक और घटकों के साथ एक पृष्ठ-संपादन प्रणाली बनाएं, फिर प्रति सगाई के पुनर्निर्माण के बजाय क्लाइंट परियोजनाओं में इसका पुनः उपयोग करें।

विपणन मंच

उपयोगकर्ताओं को लैंडिंग पृष्ठों को दृश्य रूप से लिखने दें, जबकि आपका प्लेटफ़ॉर्म टेम्प्लेट, ट्रैकिंग और प्रकाशन पाइपलाइन को सुसंगत रखता है।

एम्बेडिंग

HTML बिल्डर को अपने उत्पाद में एम्बेड करें

आपको उपयोगकर्ताओं को उनके पृष्ठों को संपादित करने के लिए किसी अन्य वेबसाइट पर भेजने की आवश्यकता नहीं है। संपादक को अपने स्वयं के एप्लिकेशन के अंदर माउंट करें और अपना मौजूदा प्रमाणीकरण, नेविगेशन और बैकएंड रखें।

संपादक कहाँ बैठता है

  1. आपका ऐप
  2. प्रमाणीकरण
  3. HTML संपादक
  4. आपका API
  5. डाटाबेस

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

एम्बेड करने योग्य पेज बिल्डर गाइड देखें
भंडार

HTML बिल्डर प्रोजेक्ट्स को अपने बैकएंड में सहेजें

Storage Manager को अपने API पर इंगित करें और प्रत्येक पृष्ठ आपके डेटाबेस में आपके स्वयं के प्रमाणीकरण के पीछे एक पंक्ति बन जाता है। GrapesJS कुछ भी होस्ट नहीं करता है, और न ही GJS.Market - कोई भी उपयोगकर्ता सामग्री कभी भी हम तक नहीं पहुंचती है।

स्टोर करने के लिए दो चीजें, एक नहीं

  1. Editor राज्य
  2. आपका भंडारण API
  3. आपका डेटाबेस
  4. HTML + CSS
  5. लाइव पेज
editor-storage.jsJS
const editor = grapesjs.init({
  container: '#editor',

  // Editor state goes to your API, behind your own authentication.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

अंतर को तेज रखें। संपादक राज्य वह है जो संपादक को आगे के संपादन के लिए एक पृष्ठ को फिर से खोलने की आवश्यकता होती है। प्रकाशित आउटपुट वह HTML है और CSS जो एक आगंतुक को प्राप्त होता है। उनके पास अलग-अलग जीवनचक्र, अलग-अलग पहुंच नियम और आमतौर पर अलग-अलग टेबल होते हैं - और एक प्लगइन वायरिंग में मदद कर सकता है, लेकिन आर्किटेक्चर आपका है।

प्रकाशन-व्‍यवसाय

आप तय करते हैं कि HTML कैसे प्रकाशित होता है

  1. 1
    01

    संपादित करें

    उपयोगकर्ता कैनवास पर काम करता है। अभी तक कुछ भी सार्वजनिक नहीं है; संपादक केवल परियोजना की स्थिति को छू रहा है।

  2. 2
    02

    ड्राफ़्ट सेव करना

    ऑटोसेव या एक स्पष्ट सेव आपके अनुमति नियमों के तहत, आपके संग्रहण समापन बिंदु के माध्यम से स्थिति को लिखता है।

  3. 3
    03

    पूर्वसमीक्षा

    वर्तमान HTML और CSS को पूर्वावलोकन मार्ग पर प्रस्तुत करें ताकि लेखक वास्तविक पृष्ठ देखे, कैनवास को नहीं।

  4. 4
    04

    स्वीकृत करें

    यदि आपके उत्पाद की समीक्षा की आवश्यकता है, तो यह आपका वर्कफ़्लो है - संपादक के पास इस बारे में कोई राय नहीं है कि कौन हस्ताक्षर कर सकता है।

  5. 5
    05

    प्रकाशित करना

    getHtml() और getCss(), sanitize लें, अपने लेआउट में लपेटें, परिणाम को संस्करण करें और जहां भी आप पृष्ठों की सेवा करते हैं, इसे लिखें।

  6. 6
    06

    लाइव HTML

    प्रकाशित पृष्ठ आपके बुनियादी ढांचे पर सादा HTML और CSS है। किसी विज़िटर को इसे देखने के लिए किसी संपादक रनटाइम की आवश्यकता नहीं है।

यह होस्ट किए गए पेज बिल्डर से सबसे स्पष्ट अंतर है। कोई विक्रेता यह तय नहीं कर रहा है कि आपका पेज कब लाइव होता है, इसे किस डोमेन पर परोसा जाता है, या यदि आप भुगतान करना बंद कर देते हैं तो इसका क्या होता है।

प्रतिसंवेदी

उत्तरदायी HTML दृश्य रूप से बनाएं

Device Manager कैनवास को चौड़ाई के बीच स्विच करता है, और डिवाइस के सक्रिय होने पर सेट की गई शैलियों को आधार नियम को अधिलेखित करने के बजाय उस चौड़ाई तक सीमित मीडिया क्वेरी के रूप में लिखा जाता है। GrapesJS डेस्कटॉप, टैबलेट, मोबाइल लैंडस्केप और मोबाइल पोर्ट्रेट के साथ जहाज; सूची और इसकी चौड़ाई कॉन्फ़िगरेशन हैं, एक निश्चित सेट नहीं।

डेस्कटॉपडिफ़ॉल्ट
टिकिया770 पिक्सल
मोबाइल पोर्ट्रेट320 पिक्सल

उपयोगकर्ता प्रति ब्रेकपॉइंट क्या बदल सकते हैं

  • रिक्ति
  • मुद्रण कला
  • अभिन्यास
  • दृश्‍यता-परास
  • संरेखण
  • पृष्ठभूमि

दिखाई गई चौड़ाई GrapesJS डिफ़ॉल्ट हैं। स्पष्ट रूप से कहने लायक: संपादक CSS नियमों को परिभाषित करता है - एक प्रकाशित पृष्ठ अंततः कैसे प्रस्तुत करता है, यह अभी भी आपके द्वारा शिप किए गए मार्कअप और स्टाइलशीट और उन्हें पढ़ने वाले ब्राउज़र पर निर्भर करता है।

पारिस्थितिकी तंत्र

प्लगइन्स के साथ अपने HTML बिल्डर का विस्तार करें

नीचे दी गई हर चीज़ GJS.Market पर एक वास्तविक सूची है, जिसमें नाम, मूल्य और थंबनेल कैटलॉग से लाइव प्रस्तुत किया गया है। जिस तरह से यह पृष्ठ समस्या के बारे में सोचता है, उसे समूहीकृत किया गया है: पहले कोड और आउटपुट, फिर उनके आसपास के पैनल।

कोड और HTML संपादन

उपयोगकर्ताओं को - या आपके अपने डेवलपर्स - संपादक को छोड़े बिना एक घटक के पीछे मार्कअप और शैलियों को पढ़ने और संपादित करने दें।

इस श्रेणी को ब्राउज़ करें
Grapesjs Component Code Editorकोड दृश्य

Grapesjs Component Code Editor

प्रत्यक्ष संपादन के लिए चयनित घटक के HTML और CSS को खोलता है - एक संशयवादी डेवलपर के लिए दृश्य/कोड संबंध को स्पष्ट करने का सबसे तेज़ तरीका।

निःशुल्कप्लगइन देखें
Code Editorकोड संपादन

Code Editor

उन उपयोगकर्ताओं के लिए बिल्डर के अंदर एक कोड संपादन सतह जो एक अनुभाग के लिए मार्कअप करना चाहते हैं और हर जगह दृश्य रहना चाहते हैं।

निःशुल्कप्लगइन देखें

निर्यात और प्रकाशन

HTML और CSS को बाहर निकालें: डाउनलोड करने योग्य बंडल के रूप में, सर्वर-साइड को परिवर्तित करें, या सीधे होस्ट पर धकेल दें।

इस श्रेणी को ब्राउज़ करें
Export Zipनिर्यातित माल

Export Zip

एक स्थिर साइट को सौंपने के लिए, परियोजना के HTML, CSS और संपत्ति को डाउनलोड करने योग्य संग्रह में पैकेज करता है।

निःशुल्कप्लगइन देखें
GrapesJS NodeJS JSON Converter to HTML/CSSसर्वर-साइड आउटपुट

GrapesJS NodeJS JSON Converter to HTML/CSS

सर्वर पर संग्रहीत प्रोजेक्ट JSON को HTML और CSS में कनवर्ट करता है, इसलिए प्रकाशन के लिए ब्राउज़र सत्र की आवश्यकता नहीं होती है।

निःशुल्कप्लगइन देखें
Grapesjs Netlifyतैनात करें

Grapesjs Netlify

जेनरेट किए गए आउटपुट को सीधे संपादक से होस्ट पर पुश करता है, उन उत्पादों के लिए जो एक-क्लिक प्रकाशन चाहते हैं।

निःशुल्कप्लगइन देखें

HTML ब्लॉक

तैयार पैलेट, इसलिए खाली Block Manager एक खाली पैनल के बजाय वर्गों से भरा होता है।

इस श्रेणी को ब्राउज़ करें
Plugin Basic Blocksआधार पैलेट

Plugin Basic Blocks

सामान्य संरचनात्मक ब्लॉकों का एक प्रारंभिक पैलेट, इसलिए एक दिन Block Manager कॉल लिखने में खर्च नहीं किया जाता है।

निःशुल्कप्लगइन देखें
Plugin Blocky for Tailwind CSSTailwind ब्लॉक

Plugin Blocky for Tailwind CSS

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

US$59,00प्लगइन देखें

शैली नियंत्रण

बेहतर CSS संपादन: टाइप करते समय कक्षा सुझाव, समृद्ध रंग और ढाल बीनने वाले।

इस श्रेणी को ब्राउज़ करें
Ui Suggest Classesकक्षा सुझाव

Ui Suggest Classes

CSS में टाइप करते समय मौजूदा Selector Manager कक्षाओं का सुझाव देता है, जो उत्पन्न मार्कअप को फैलाने के बजाय लगातार बनाए रखता है।

निःशुल्कप्लगइन देखें
Grapesjs Style Gpickrढाल बीनने वाला

Grapesjs Style Gpickr

Style Manager के लिए एक ढाल बीनने वाला, एक मामले को कवर करता है जो डिफ़ॉल्ट रंग नियंत्रण नहीं करता है।

निःशुल्कप्लगइन देखें

कस्टम घटक

पुनः प्रयोज्य, सिंक्रनाइज़ किए गए तत्व और अपने स्वयं के मार्कअप को एक संपादक घटक में बदलने के लिए टूलींग।

इस श्रेणी को ब्राउज़ करें
Symbolsपुनः प्रयोज्य घटक

Symbols

पुनः प्रयोज्य घटक उदाहरण जो सिंक में रहते हैं, इसलिए एक हेडर एक बार संपादित किया जाता है जहां भी यह दिखाई देता है।

निःशुल्कप्लगइन देखें

समृद्ध पाठ

इनलाइन टेक्स्ट एडिटर का विस्तार करें ताकि सामग्री संपादन कोड फ़ील्ड के बजाय एक दस्तावेज़ की तरह लगे।

इस श्रेणी को ब्राउज़ करें
Grapesjs RTE Extensionsसमृद्ध पाठ

Grapesjs RTE Extensions

अंतर्निहित रिच टेक्स्ट एडिटर को फ़ॉर्मेटिंग नियंत्रणों के साथ विस्तारित करता है जिसकी अधिकांश सामग्री टीमें अपेक्षा करती हैं।

निःशुल्कप्लगइन देखें

संपत्ति और मीडिया

Asset Manager को वास्तविक भंडारण से कनेक्ट करें ताकि छवियों को रहने के लिए कहीं न कहीं रखा जाए।

इस श्रेणी को ब्राउज़ करें
Grapesjs Cloudinaryमीडिया भंडारण

Grapesjs Cloudinary

Asset Manager को Cloudinary तक तार देता है, इसलिए अपलोड और परिवर्तन आपके सर्वर के बाहर नियंत्रित किए जाते हैं।

निःशुल्कप्लगइन देखें

भंडार

उन टीमों के लिए दृढ़ता एडेप्टर जो एक लिखने के बजाय बैकएंड को कॉन्फ़िगर करना पसंद करेंगे।

इस श्रेणी को ब्राउज़ करें
Grapesjs Firebase Storageरिमोट स्टोरेज

Grapesjs Firebase Storage

एक तैयार रिमोट स्टोरेज एडाप्टर, प्रोटोटाइप और उत्पादों के लिए पहले से ही Firebase पर।

निःशुल्कप्लगइन देखें
IndexedDB Storageस्थानीय भंडारण

IndexedDB Storage

प्रोजेक्ट की स्थिति को ब्राउज़र में रखता है - ऑफ़लाइन ड्राफ्ट के लिए और डेमो के लिए उपयोगी है जिसमें कोई बैकएंड नहीं है।

निःशुल्कप्लगइन देखें

टेम्पलेट्स और प्रीसेट

पूर्व-कॉन्फ़िगर सेटअप और टेम्पलेट प्रबंधन, एक खाली के बजाय एक कार्यशील संपादक से शुरू करने के लिए।

इस श्रेणी को ब्राउज़ करें
Webpage Presetवेब प्रीसेट

Webpage Preset

एक कॉन्फ़िगर किया गया वेब-पेज संपादन सेटअप, एक नंगे इनिट कॉल की तुलना में एक कार्यशील बिल्डर के करीब।

निःशुल्कप्लगइन देखें
Templates Managerटेम्पलेट्स

Templates Manager

उन उत्पादों के लिए टेम्पलेट प्रबंधन जहां उपयोगकर्ता किसी रिक्त कैनवास के बजाय चुने हुए लेआउट से प्रारंभ करते हैं.

US$39,00प्लगइन देखें

ईमेल

ईमेल HTML के अपने नियम हैं। MJML पथ ठीक इसी कारण से मौजूद है।

इस श्रेणी को ब्राउज़ करें
MJML Presetईमेल प्रीसेट

MJML Preset

ईमेल के लिए MJML पथ, जहां आउटपुट को आधुनिक ब्राउज़र के बजाय Outlook से बचना होता है।

निःशुल्कप्लगइन देखें
HTML बिल्डर प्लगइन्स ब्राउज़ करें
ढेर

बिल्ड योर HTML बिल्डर स्टैक

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

कीमतें कैटलॉग से लाइव प्रस्तुत करती हैं।

दृष्टिकोण

HTML ड्रैग-एंड-ड्रॉप बिल्डर बनाम अन्य दृष्टिकोण

ये एक ही नौकरी के लिए प्रतिस्पर्धा करने वाले चार उत्पाद नहीं हैं - वे चार अलग-अलग ट्रेड हैं। तालिका का उद्देश्य व्यापार को स्पष्ट करना है, विजेता घोषित करना नहीं।

विचारGrapesJSड्रैग-एंड-ड्रॉप लाइब्रेरीहोस्ट किया गया पेज बिल्डरखरोंच से निर्माण करें
दृश्य संपादक शामिल हैहाँआंशिक - केवल इशाराहाँआप जो कुछ भी बनाते हैं
HTML और CSS पर नियंत्रणउच्च - आउटपुट पोस्ट-प्रोसेस के लिए आपका हैउच्च - आप मार्कअप लिखते हैंविक्रेता द्वारा भिन्न होता हैकुल
स्व-होस्टेडहाँहाँआमतौर पर नहींहाँ
आपके ऐप में एम्बेड करने योग्यहाँहाँविक्रेता पर निर्भर करता हैहाँ
Component मॉडल और traitsमें निर्मितआप इसे लिखेंविक्रेता का मॉडलआप इसे लिखें
शैली नियंत्रण और ब्रेकप्वाइंटमें निर्मितआप उन्हें लिखेंमें निर्मितआप उन्हें लिखें
एक कार्यशील संपादक के लिए समयदिनमहीनेमिनटमहीनों से साल
उत्पाद अनुकूलनउच्चउच्चविक्रेता द्वारा बाध्यअसीमित
चल रहा रखरखावआपका एकीकरण, साथ ही एक अपस्ट्रीम कोरसभी संपादकविक्रेता कायह सब, हमेशा के लिए
लाइसेंस और लागतBSD-3-Clause कोर, $0 उपयोग करने के लिएआमतौर पर अनुमेयअंशदानइंजीनियरिंग समय

GrapesJS कोर (BSD-3-Clause, v0.23.6) के विरुद्ध 2026-09-03 के विरुद्ध सत्यापित। होस्टेड-बिल्डर पंक्तियाँ जानबूझकर अस्पष्ट हैं क्योंकि उनकी क्षमताएं प्रति विक्रेता भिन्न होती हैं और अक्सर बदलती रहती हैं - श्रेणी-स्तरीय दावे पर भरोसा करने के बजाय उस विशिष्ट उत्पाद की जाँच करें जिस पर आप विचार कर रहे हैं।

विकल्पों के साथ GrapesJS की तुलना करें
साधारण गलती

एक ड्रैग-एंड-ड्रॉप लाइब्रेरी पेज बिल्डर नहीं है

यह इस क्षेत्र में सबसे महंगा गलत निर्णय है। एक टीम एक सॉर्टेबल-लिस्ट लाइब्रेरी चुनती है, एक सप्ताह में एक डेमो शिप करती है, और फिर एक साल बिताती है यह पता लगाने में कि क्या गायब था।

ड्रैग-एंड-ड्रॉप लाइब्रेरी आपको क्या देती है

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

  • खींचने योग्य तत्व
  • ड्रॉप जोन
  • आंदोलन
  • छँटाई

एक दृश्य HTML संपादक को भी क्या प्रबंधित करना पड़ता है

राज्य जो उन इशारों में से हर एक में बना रहता है, और एक सीरियलाइज़र जो इसे वापस मार्कअप में बदल सकता है एक ब्राउज़र प्रस्तुत करेगा।

  • Component राज्य
  • संग्रह
  • बिछाना
  • ब्लॉक
  • संपत्ति
  • उत्तरदायी नियंत्रण
  • पूर्ववत करें / फिर से करें
  • भंडार
  • क्रमबद्धता
  • निर्यातित माल
  • Plugin वास्तुकला

खींचें और छोड़ें एक इंटरैक्शन है। एक पेज बिल्डर एक संपूर्ण संपादन प्रणाली है।

जल्दी शुरू

स्टार्ट योर HTML ड्रैग-एंड-ड्रॉप बिल्डर

एक पैकेज, एक कंटेनर, एक इनिट कॉल। इस पृष्ठ पर सब कुछ इन कुछ पंक्तियों से बढ़ता है।

npm install grapesjs
editor.jsJS
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// Mount the editor on any container in your own application.
const editor = grapesjs.init({
  container: '#editor',
  height: '100vh',
  // Core ships no blocks: you decide what users are allowed to drag.
  blockManager: { blocks: [] },
});

संपादक अब चलता है लेकिन उसके पास एक खाली पैलेट है - कोर जानबूझकर कोई ब्लॉक नहीं भेजता है। पहले वाले को पंजीकृत करें, और घटक प्रकार यह बन जाता है:

hero-block.jsJS
// A block is what the user drags out of the panel.
editor.BlockManager.add('hero', {
  label: 'Hero',
  category: 'Sections',
  content: { type: 'hero' },
});

// A component type is what that block becomes on the canvas — and the
// only place you decide what the user may change about it.
editor.DomComponents.addType('hero', {
  model: {
    defaults: {
      tagName: 'section',
      attributes: { class: 'hero' },
      components: '<h1 class="hero__title">Build faster</h1>',
      // Traits become the fields in the settings panel.
      traits: [{ type: 'text', name: 'headline', label: 'Headline' }],
      droppable: false,
    },
  },
});
  1. grapesjs स्थापित करें
  2. इसे एक कंटेनर पर माउंट करें
  3. अपने ब्लॉक और घटक प्रकारों को पंजीकृत करें
  4. Style Manager कॉन्फ़िगर करें
  5. Storage Manager को अपने API पर इंगित करें
  6. getHtml() और getCss() प्रकाशित करें

यहां से काम उत्पाद का काम है: आपके उपयोगकर्ताओं को कौन सा ब्लॉक मिलता है, उन्हें क्या बदलने की अनुमति है, और आपका बैकएंड बाहर आने वाले मार्कअप के साथ क्या करता है।

GrapesJS गाइड पढ़ें GitHub पर स्रोत देखें डेवलपर टूल प्लगइन्स ब्राउज़ करें
संबंधित मार्गदर्शिकाएँ

संबंधित GJS.Market मार्गदर्शिकाएँ

यह पृष्ठ HTML-स्तरीय संपादन और आउटपुट को कवर करता है। पड़ोसी गाइड उसी कोर को अन्य कोणों से लेते हैं।

ड्रैग-एंड-ड्रॉप पेज बिल्डर

ड्रैग-एंड-ड्रॉप पेज बिल्डर बनाने के लिए व्यापक मार्गदर्शिका: हावभाव, ब्लॉक, टेम्पलेट और उनके आसपास के उत्पाद निर्णय।

गाइड पढ़ें

ओपन-सोर्स पेज बिल्डर

ओपन-सोर्स पेज बिल्डर का मूल्यांकन कैसे करें - लाइसेंसिंग, शासन, एक्स्टेंसिबिलिटी और सेल्फ-होस्टिंग वास्तव में आपको क्या करती है।

विकल्पों की तुलना करें

React पेज बिल्डर

React एप्लिकेशन के अंदर एक पेज बिल्डर का निर्माण, और जहां एक React-घटक मॉडल और एक HTML-घटक मॉडल अलग हो जाता है।

गाइड पढ़ें

GrapesJS React एकीकरण

आधिकारिक React रैपर: संपादक को एक घटक के रूप में माउंट करना, उसके जीवनचक्र का प्रबंधन करना और इसे React के रेंडर लूप से बाहर रखना।

एकीकरण देखें
FAQ

HTML ड्रैग-एंड-ड्रॉप बिल्डर प्रश्न

HTML ड्रैग-एंड-ड्रॉप बिल्डर क्या है?

एक संपादक जो उपयोगकर्ता को कैनवास पर पूर्व-निर्धारित ब्लॉकों को खींचकर और कोड के बजाय नियंत्रण के माध्यम से उन्हें समायोजित करके एक वेब पेज को इकट्ठा करने देता है, जबकि परिणाम के रूप में वास्तविक HTML और CSS का उत्पादन करता है। यह एक घटक मॉडल, एक कैनवास, एक ब्लॉक पैलेट, शैली नियंत्रण, उत्तरदायी संपादन, संपत्ति हैंडलिंग, दृढ़ता और एक प्रणाली में निर्यात को जोड़ती है।

HTML विज़ुअल एडिटर क्या है?

संपादन पक्ष से वर्णित एक ही बात: एक उपकरण जहां मार्कअप टाइप करने के बजाय गुणों पर क्लिक करके, खींचकर और समायोजित करके परिवर्तन किए जाते हैं, और जहां आप स्क्रीन पर जो देखते हैं वह प्रकाशित होने वाले HTML और CSS से मेल खाता है।

क्या मैं GrapesJS के साथ एक HTML संपादक बना सकता हूँ?

हाँ GrapesJS इसी के लिए है। यह कैनवास, ड्रैग एंड ड्रॉप, घटक मॉडल, Block Manager, Style Manager, Device Manager, Asset Manager, पूर्ववत इतिहास, Storage Manager और HTML/CSS आउटपुट APIs प्रदान करता है। आप ब्लॉक, घटक प्रकार, बैकएंड और प्रकाशन वर्कफ़्लो जोड़ते हैं।

क्या GrapesJS एक HTML संपादक है?

GrapesJS एक तैयार संपादन उत्पाद के बजाय HTML संपादकों के निर्माण के लिए एक रूपरेखा है। यह डिफ़ॉल्ट रूप से पैलेट में बिना किसी ब्लॉक के एक संपादन कोर को शिप करता है, ठीक इसलिए क्योंकि आपके उपयोगकर्ताओं को कौन सा ब्लॉक मिलता है, यह आपका निर्णय है।

क्या मैं HTML तत्वों को खींच और छोड़ सकता हूँ?

हाँ। कैनवास पर तत्व ऐसे घटक हैं जिन्हें खींचा जा सकता है, नेस्टेड किया जा सकता है और पुनः व्यवस्थित किया जा सकता है, और प्रत्येक घटक प्रकार यह घोषित कर सकता है कि इसे कहां गिराया जा सकता है और इसमें क्या हो सकता है - इसलिए एक इंजीनियर द्वारा डिज़ाइन किए गए लेआउट को सामग्री संपादक द्वारा तोड़ने योग्य नहीं होना चाहिए।

क्या मैं कस्टम HTML घटक बना सकता हूँ?

हाँ, editor.DomComponents.addType() के साथ। आप टैग, डिफ़ॉल्ट विशेषताओं और बच्चों को परिभाषित करते हैं, चाहे घटक droppable हो या draggable, और कौन सा traits सेटिंग पैनल में दिखाई देता है। एक ब्लॉक तब उस प्रकार को उस चीज़ के रूप में संदर्भित करता है जिसे वह सम्मिलित करता है।

क्या मैं CSS को नेत्रहीन रूप से संपादित कर सकता हूँ?

हाँ। Style Manager CSS गुणों को नियंत्रण के रूप में उजागर करता है, जिसे डिफ़ॉल्ट रूप से सामान्य, फ्लेक्स, आयाम, टाइपोग्राफी, सजावट और अतिरिक्त क्षेत्रों में समूहीकृत किया जाता है। कौन से सेक्टर और गुण दिखाई देते हैं, यह कॉन्फ़िगर करने योग्य है, इसलिए आप पैनल को केवल वही तक सीमित कर सकते हैं जिसे आपके उपयोगकर्ताओं को छूना चाहिए।

क्या मैं HTML और CSS निर्यात कर सकता हूँ?

हाँ। editor.getHtml() मार्कअप लौटाता है और editor.getCss() स्टाइलशीट लौटाता है, दोनों सादे स्ट्रिंग्स के रूप में। दो विवरण जानने योग्य हैं: getHtml() रैपर को क्रमबद्ध करता है, इसलिए परिणाम एक शरीर तत्व में संलग्न होता है, और getCss() शॉर्टहैंड घोषणाओं को लॉन्गहैंड गुणों के रूप में लिखता है और रंगों को आरजीबी () में सामान्य करता है।

क्या मैं HTML बिल्डर परियोजनाओं को अपने डेटाबेस में सहेज सकता हूँ?

हाँ। Storage Manager को लोड और स्टोर URL के साथ एक दूरस्थ प्रकार पर सेट किया जा सकता है, जो आपके स्वयं के API की ओर इशारा करते हैं, जिसमें आपके स्वयं के फ़ेच विकल्प और क्रेडेंशियल्स शामिल हैं, इसलिए प्रत्येक प्रोजेक्ट आपके मौजूदा प्रमाणीकरण के पीछे आपके डेटाबेस में बस एक पंक्ति है।

क्या मैं संपादक को अपने API से जोड़ सकता हूँ?

हां, और एक से अधिक स्थानों पर: परियोजना की स्थिति के लिए भंडारण समापन बिंदु, Asset Manager के लिए एक अपलोड समापन बिंदु, और जो भी प्रकाशित समापन बिंदु आप निर्यात किए गए HTML और CSS के साथ कॉल करते हैं। इसमें से कोई भी किसी तीसरे पक्ष के माध्यम से नहीं जाता है।

क्या मैं HTML पेज बिल्डर की स्व-मेजबानी कर सकता हूँ?

हाँ। GrapesJS एक npm पैकेज है जो आपके अपने एप्लिकेशन के अंदर ब्राउज़र में चलता है। पथ में कोई होस्ट की गई सेवा नहीं है, कोई लाइसेंस कुंजी जांच नहीं है और किसी खाते की आवश्यकता नहीं है, इसलिए संपादक आंतरिक नेटवर्क पर या फ़ायरवॉल के पीछे काम करता है।

क्या मैं अपने HTML संपादक को अपने SaaS में एम्बेड कर सकता हूँ?

हाँ। संपादक को अपने स्वयं के एप्लिकेशन के मार्ग के अंदर एक कंटेनर पर माउंट करें। उपयोगकर्ता आपका प्रमाणीकरण और नेविगेशन रखते हैं, और उनके द्वारा बनाए गए पृष्ठ विक्रेता के बजाय आपके बैकएंड द्वारा संग्रहीत किए जाते हैं।

क्या मैं GrapesJS के साथ एक वेबसाइट बिल्डर बना सकता हूँ?

हाँ। मल्टी-पेज एडिटिंग, टेम्प्लेट, एसेट और स्टोरेज सभी कोर प्लस उपलब्ध प्लगइन्स द्वारा कवर किए गए हैं। एक वेबसाइट बिल्डर को एकल-पृष्ठ संपादक से जो अलग करता है, वह ज्यादातर पृष्ठ प्रबंधन और प्रकाशन परत है जिसे आप संपादक के चारों ओर बनाते हैं।

क्या मैं लैंडिंग पेज बिल्डर बना सकता हूं?

हां, और यह सबसे आम उपयोगों में से एक है। उन ब्लॉकों को परिभाषित करें जिनकी आपकी डिज़ाइन प्रणाली अनुमति देती है, traits के सीमित सेट को उजागर करें, और विपणक उन अभियान पृष्ठों को इकट्ठा कर सकते हैं जो अभी भी उन कक्षाओं और संरचना का उत्सर्जन करते हैं जिनकी आपके इंजीनियरों की अपेक्षा है।

क्या मैं एक ईमेल बिल्डर बना सकता हूं?

हां, लेकिन वेब-पेज पथ के बजाय ईमेल पथ के माध्यम से। ईमेल HTML की अपनी बाधाएं हैं, इसलिए GrapesJS इसे MJML और न्यूज़लेटर प्रीसेट के साथ कवर करता है जो आधुनिक लेआउट CSS के बजाय टेबल-आधारित, इनलाइन-स्टाइल मार्कअप का उत्सर्जन करते हैं।

क्या मैं GrapesJS के साथ React का उपयोग कर सकता हूँ?

हाँ। React रैपर @grapesjs/react के रूप में प्रकाशित होता है, लाइसेंस प्राप्त MIT, जो संपादक को एक घटक के रूप में माउंट करता है और उसके जीवनचक्र का प्रबंधन करता है। संपादक कोर स्वयं ढांचा-अज्ञेयवादी है और नीचे समान रूप से काम करता है।

क्या मैं GrapesJS के साथ Next.js का उपयोग कर सकता हूँ?

हां, एक चेतावनी के साथ: संपादक को DOM की आवश्यकता होती है, इसलिए इसे सर्वर-रेंडर नहीं किया जाना चाहिए। इसे केवल क्लाइंट-घटक या SSR अक्षम के साथ गतिशील आयात में लोड करें, और कंटेनर मौजूद होने के बाद इसे प्रारंभ करें।

ड्रैग-एंड-ड्रॉप लाइब्रेरी और पेज बिल्डर के बीच क्या अंतर है?

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

क्या व्यावसायिक उपयोग के लिए GrapesJS निःशुल्क है?

GrapesJS कोर BSD-3-Clause लाइसेंस के तहत प्रकाशित किया जाता है, जो इसके एट्रिब्यूशन और गैर-समर्थन शर्तों के अधीन व्यावसायिक उपयोग, संशोधन और वितरण की अनुमति देता है। आधिकारिक React रैपर, @grapesjs/react, MIT है। GJS.Market पर बेचे जाने वाले प्लगइन्स और टेम्प्लेट अपने स्वयं के लाइसेंस रखते हैं, जो प्रत्येक उत्पाद पृष्ठ पर सूचीबद्ध होते हैं। शिपिंग से पहले लाइसेंस टेक्स्ट स्वयं पढ़ें - यह एक सारांश है, कानूनी सलाह नहीं।
शुरू हो जाओ

बिल्ड योर HTML ड्रैग-एंड-ड्रॉप बिल्डर

GrapesJS से शुरू करें, उपयोगकर्ताओं को एक दृश्य HTML संपादन अनुभव दें और अपने एप्लिकेशन, डेटा और प्रकाशन वर्कफ़्लो पर नियंत्रण रखें।

निर्माण शुरू करें

संपादक स्थापित करें

एक npm पैकेज और एक इनिट कॉल। अपनी कॉफी खत्म करने से पहले आपके पास एक काम करने वाला कैनवास होगा।

GrapesJS आज़माएं
विस्तार

वह जोड़ें जो आप नहीं लिखना चाहते हैं

ब्लॉक पैलेट, कोड दृश्य, शैली नियंत्रण, भंडारण एडेप्टर और निर्यात टूलींग - वास्तविक लिस्टिंग, वास्तविक कीमतें।

GJS.Market प्लगइन्स ब्राउज़ करें
सीखना

दस्तावेज़ पढ़ें

घटक, ब्लॉक, शैलियाँ, भंडारण और प्लगइन API, सीधे अपस्ट्रीम प्रोजेक्ट से।

बिल्डर गाइड पढ़ें

खींचना। औषधि। HTML संपादित करें। आउटपुट के मालिक बनें।

GrapesJS के साथ संपादकों के निर्माण पर अधिक:

ड्रैग-एंड-ड्रॉप पेज बिल्डरओपन-सोर्स पेज बिल्डरReact पेज बिल्डरGrapesJS React एकीकरणSaaS पेज बिल्डरएम्बेड करने योग्य पेज बिल्डरWYSIWYG पेज बिल्डरReact ईमेल बिल्डरपेज बिल्डर विकल्प