हेडलेस CMS विजुअल एडिटर के साथ GrapesJS

ऊपर दी गई स्क्रीन व्यवस्था का एक मॉक-अप है, जिसे CSS में खींचा गया है, इसलिए इसमें पृष्ठ की कोई कीमत नहीं है। इसके पीछे संपादक इंजन वास्तविक और सार्वजनिक है: आधिकारिक GrapesJS डेमो खोलें, कैनवास पर एक अनुभाग खींचें, और आप उसी कैनवास, घटक वृक्ष और शैली नियंत्रण को देख रहे हैं जो आपकी सामग्री टीम को आपके स्वयं के CMS के शीर्ष पर मिलेगा।

एक हेडलेस CMS आपके एप्लिकेशन को API-प्रथम सामग्री नींव देता है। यह हमेशा सामग्री लिखने वाले लोगों को जो नहीं देता है, वह पृष्ठ को बनाते समय उसे देखने का एक तरीका है।

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

GrapesJS आपको अपने CMS को बदलने के लिए मजबूर किए बिना वह दृश्य संपादन परत प्रदान करता है।

एक हेडलेस आर्किटेक्चर सामग्री को प्रस्तुति से अलग करता है, यही कारण है कि यह एक संपादन अंतर छोड़ देता है: CMS फ़ील्ड को जानता है, फ्रंटएंड रेंडरिंग को जानता है, और बीच में कुछ भी पृष्ठ नहीं जानता है। एक दृश्य संपादन परत जोड़ने से किसी भी पक्ष को हटाए बिना उस अंतर को बंद कर दिया जाता है।

हेडलेस आर्किटेक्चर को छोड़े बिना विज़ुअल एडिटिंग जोड़ें।

क्योंकि तीन परतों में से प्रत्येक किसी ऐसी चीज़ में अच्छा है जो अन्य दो नहीं हैं, और एक दृश्य संपादन परत उनमें से एकमात्र है जिसे कोई भी आपके लिए शिप नहीं करता है। यहां बताया गया है कि संपादक के स्थान पर आने के बाद कौन उसका मालिक है।

• आपका बिना सिर वाला CMS

  आपके द्वारा पहले से चलाया जा रहा सामग्री अवसंरचना.

  • सामग्री
  • संरचित डेटा
  • मीडिया
  • उपयोगकर्ता
  • प्रकाशन-व्‍यवसाय
  • APIs

• GrapesJS

  आप जिस विज़ुअल संपादन परत को जोड़ रहे हैं.

  • दृश्य कैनवास
  • खींचें और छोड़ें
  • अवयव
  • ब्लॉक
  • बिछाना
  • उत्तरदायी संपादन
  • दृश्य पृष्ठ संरचना

• आपका फ्रंटएंड

  अपरिवर्तित। यह पहले का सब कुछ अपने पास रखता है।

  • प्रतिपादन
  • रूटिंग
  • अनुप्रयोग तर्क
  • प्रयोगकर्ता का अनुभव
  • परिनियोजन

आर्किटेक्चर रखें। संपादन अनुभव को अपग्रेड करें।

एक सामग्री स्रोत। एकाधिक फ्रंटएंड।

संपादन परत उसी API के माध्यम से जुड़ती है जिसे आपका फ्रंटएंड पहले से ही कॉल करता है। चाहे आप Strapi, Contentful, Sanity, Directus, Hygraph, Prismic, Payload या एक CMS चला रहे हों, एकीकरण बिंदु समापन बिंदुओं की एक जोड़ी है जो एक दस्तावेज़ को लोड और सहेजता है।

इन प्लेटफार्मों को उनके APIs के माध्यम से एकीकृत किया जा सकता है, सटीक कार्यान्वयन के आधार पर CMS सामग्री मॉडल और API पर निर्भर करता है। GJS.Market उनमें से अधिकांश के लिए आधिकारिक एकीकरण प्रकाशित नहीं करता है, और यह पृष्ठ कभी भी अन्यथा नहीं होता है।

अपना CMS रखें। अपना फ्रंटएंड रखें। एक बेहतर विज़ुअल एडिटर जोड़ें।

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

• ST

  Strapi

  REST · GraphQL

  स्व-होस्ट किया गया, आपके द्वारा परिभाषित सामग्री प्रकारों के साथ। संपादक दस्तावेज़ आमतौर पर पृष्ठ संग्रह प्रकार पर JSON फ़ील्ड बन जाता है।

• CF

  Contentful

  REST · GraphQL

  अलग वितरण और प्रबंधन APIs। संपादक प्रबंधन के माध्यम से लिखता है API; आपका फ्रंटएंड डिलीवरी को पढ़ता रहता है।

• SN

  Sanity

  GROQ · GraphQL

  Portable Text और एक दस्तावेज़ स्टोर। संपादक दस्तावेज़ आपके मौजूदा फ़ील्ड को बदलने के बजाय उनके साथ बैठता है।

• DR

  Directus

  REST · GraphQL

  इस सूची में एकमात्र प्लेटफ़ॉर्म सामुदायिक भंडारण प्लगइन पहले से ही GJS.Market पर प्रकाशित है।

  प्लगइन देखें
• HG

  Hygraph

  GraphQL

  GraphQL-पहले, इसलिए एडेप्टर दो URL के बजाय एक क्वेरी और एक उत्परिवर्तन है।

• PX

  Prismic

  REST

  स्लाइस-आधारित सामग्री। जब आप ब्लॉक सेट को उनके साथ संरेखित रखते हैं तो संपादक स्लाइस पर मैप को साफ-सुथरा ब्लॉक करता है।

• PL

  Payload

  REST · GraphQL

  कोड-परिभाषित संग्रह, इसलिए संपादक जिस फ़ील्ड को लिखता है, उसे संपादक के समान भंडार में घोषित किया जाता है।

• API

  कस्टम CMS

  REST · GraphQL · रिवाज

  कुछ भी जो लोड अनुरोध का उत्तर दे सकता है और सेव अनुरोध स्वीकार कर सकता है। दो समापन बिंदु संपूर्ण अनुबंध है।

एक विज़ुअल एडिटर हेडलेस सेटअप में केवल तभी उपयोगी होता है जब यह जो पैदा करता है वह अभी भी आपके द्वारा डिज़ाइन किए गए स्कीमा में फिट बैठता है। GrapesJS में, एक कस्टम घटक प्रकार अपने स्वयं के संपादन योग्य traits घोषित करता है - और वे traits वे हैं जहां आपके CMS फ़ील्ड नाम जाते हैं।

editor.DomComponents.addType('hero-section', {
  model: {
    defaults: {
      // Traits become the fields your CMS entry already has.
      traits: [
        { name: 'title',    label: 'Title' },
        { name: 'subtitle', label: 'Subtitle' },
        { name: 'image',    type: 'image' },
        { name: 'ctaHref',  label: 'Button link' },
      ],
    },
  },
});

विज़ुअल एडिटर को आपके कंटेंट मॉडल के अनुकूल होना चाहिए - अपने CMS को संपादक के अनुकूल होने के लिए मजबूर नहीं करना चाहिए।

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

• परियोजना दस्तावेज़

  1. परियोजना/घटक डेटा
  2. →संपादन योग्य स्रोत
  3. →बाद में खोलें
  editor.getProjectData()

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

  इसका उपयोग तब करें जब: कोई इस पेज को फिर से एडिटर में खोलेगा।

• प्रदान किया गया मार्कअप

  1. HTML + CSS
  2. →रेंडर किया गया आउटपुट
  3. →पूर्वावलोकन/प्रकाशित करें
  editor.getHtml() + editor.getCss()

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

  इसका उपयोग तब करें जब: कुछ डाउनस्ट्रीम को इसे संपादक के बिना प्रस्तुत करना पड़ता है।

भविष्य के संपादन के लिए आपके संपादक को आवश्यक प्रतिनिधित्व संग्रहीत करें, और अपने फ्रंटएंड या प्रकाशन पाइपलाइन के लिए आवश्यक आउटपुट उत्पन्न करें।

इंजन के साथ क्या आता है, एक प्लगइन क्या जोड़ता है, और आपके एप्लिकेशन का काम क्या रहता है। अंतर तब मायने रखता है जब आप फीचर सूची पढ़ने के बजाय काम कर रहे हों।

• खींचें और छोड़ें — GrapesJS कोर
• अवयव — GrapesJS कोर
• ब्लॉक — GrapesJS कोर
• शैली प्रबंधक — GrapesJS कोर
• उत्तरदायी संपादन — GrapesJS कोर
• लेयरिंग — GrapesJS कोर
• संपत्ति — Plugin
• टेम्पलेट्स — Plugin
• पूर्वसमीक्षा — आपका आवेदन

GrapesJS कोई CMS नहीं, कोई होस्टिंग नहीं, कोई उपयोगकर्ता खाता नहीं और कोई अनुमति मॉडल नहीं। वे आपके CMS और आपके एप्लिकेशन के साथ रहते हैं।

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

• संरचित सामग्री संपादक

  आपके CMS का अपना फॉर्म-आधारित संपादन, स्कीमा द्वारा संचालित।

  के लिए सबसे अच्छा

  • आर्टिकल्स
  • टेक्स्ट
  • संरचित क्षेत्र
  • सरल सामग्री

• विज़ुअल पेज बिल्डर

  एक कैनवास, जहां व्यवस्था सामग्री है।

  के लिए सबसे अच्छा

  • लैंडिंग पृष्ठ
  • विपणन पृष्ठ
  • कस्टम लेआउट
  • दृश्य वेबसाइटें
  • जटिल पृष्ठ संरचना

संरचित फ़ील्ड का उपयोग करें जहां संरचना मायने रखती है। विज़ुअल संपादन का उपयोग करें जहां लेआउट और संरचना मायने रखती है।

संपादन और प्रकाशन अलग-अलग ईवेंट हैं, और एक हेडलेस सेटअप इसे लागू करना आसान बनाता है: ड्राफ्ट दस्तावेज़ और प्रकाशित दस्तावेज़ अलग-अलग पंक्तियाँ हैं, जिन्हें अलग-अलग टोकन द्वारा पढ़ा जाता है।

संपादन को प्रकाशन से अलग करें।

यह वह लाभ है जिसे आपने पहले ही खरीदा था जब आपने एक हेडलेस CMS चुना था, और एक विज़ुअल एडिटर जोड़ने से इसे खर्च नहीं होता है - जब तक कि संपादक जो लिखता है वह टेम्पलेट के बजाय सामग्री API में रहता है।

एक हेडलेस आर्किटेक्चर एक ही सामग्री के बुनियादी ढांचे को अलग-अलग फ्रंटएंड की सेवा करने देता है।

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

GrapesJS अपनी खुद की कोई बहु-किरायेदारी प्रदान नहीं करता है। किरायेदार अलगाव, प्रति-किरायेदार ब्रांडिंग और प्रकाशन नियम आपके आवेदन की जिम्मेदारी हैं, और प्रत्येक भंडारण कॉल को सर्वर-साइड का स्कोप करना होगा।

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

• कस्टम लोगो
• कस्टम रंग
• कस्टम इंटरफ़ेस
• कस्टम ब्लॉक
• कस्टम टेम्पलेट्स
• भूमिकाएं
• अनुमतियां

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

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

1. GrapesJS कोरखुला स्रोत
2. CMS एकीकरणआपका काम
3. ब्लॉकGJS.Market
4. टेम्पलेट्सGJS.Market
5. संपत्तिGJS.Market
6. भंडारGJS.Market
7. फार्मGJS.Market
8. SEOGJS.Market
9. निर्यातित मालGJS.Market
10. प्रकाशन-व्‍यवसायGJS.Market
11. अनुमतियां और लेखा परीक्षाआपका काम

दो पायदानों को उद्देश्य पर आपके अपने काम के रूप में चिह्नित किया गया है। CMS एकीकरण आपके सामग्री मॉडल के लिए विशिष्ट है, और कैटलॉग में कोई अनुमति या ऑडिट-लॉग प्लगइन नहीं है - एक कार्यान्वयन भागीदार दोनों का निर्माण कर सकता है, लेकिन यहां कोई भी उत्पाद नहीं होगा।

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

भंडारण और दृढ़ता

प्रोजेक्ट दस्तावेज़ कहां जाता है, और क्या होता है जब कोई ब्राउज़र वहां पहुंचने से पहले मर जाता है।

इस श्रेणी को ब्राउज़ करें

Directus Storage

Directus के लिए एक मुफ्त, समुदाय-प्रकाशित भंडारण प्लगइन - कैटलॉग में एक CMS-नामित एडाप्टर, और अपना खुद का लिखने के लिए एक पठनीय मॉडल।

निःशुल्कलिस्टिंग खोलें

Cloud Firestore

क्लाउड Firestore के लिए एक भंडारण आवरण जब प्रोजेक्ट दस्तावेज़ आपके CMS के बजाय किसी होस्ट किए गए दस्तावेज़ डेटाबेस में होता है।

निःशुल्कलिस्टिंग खोलें

IndexedDB Storage

ब्राउज़र-साइड दृढ़ता, एक ऑफ़लाइन बफर के रूप में या एक डेमो के लिए उपयोगी है जो किसी भी API मौजूद होने से पहले चलना चाहिए।

निःशुल्कलिस्टिंग खोलें

Autosave & Restore — Crash Recovery for GrapesJS

ऑटोसेव और क्रैश रिकवरी। इसके बिना, टैब बंद होने पर एक सहेजा न गया सत्र चला जाता है और आपके संपादक को दोष मिलता है।

US$12,00लिस्टिंग खोलें

ब्लॉक और घटक

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

इस श्रेणी को ब्राउज़ करें

Plugin Basic Blocks

मूल ब्लॉक पहले दिन एक खाली ब्लॉक पैनल के बजाय एक पुस्तकालय शुरू करने के लिए सेट किया गया है।

निःशुल्कलिस्टिंग खोलें

Plugin Forms

वास्तविक घटकों के रूप में इनपुट, चयन, चेकबॉक्स और बटन बनाते हैं, इसलिए प्रपत्र वाला पृष्ठ अभी भी एक दस्तावेज़ है.

निःशुल्कलिस्टिंग खोलें

Symbols

पृष्ठों में एक तत्व का पुनः उपयोग करें ताकि किसी साझा अनुभाग में परिवर्तन को हाथ से दोहराना न पड़े।

निःशुल्कलिस्टिंग खोलें

GrapesJS Components Farmer

प्रत्येक प्रकार के लिए बॉयलरप्लेट को हाथ से लिखे बिना एक कस्टम घटक पुस्तकालय को पंजीकृत और प्रबंधित करें।

निःशुल्कलिस्टिंग खोलें

पेज, टेम्पलेट और एसेट

बहु-पृष्ठ परियोजनाएं, पुनः प्रयोज्य शुरुआती बिंदु और एक मीडिया पाइपलाइन।

इस श्रेणी को ब्राउज़ करें

Pages Manager

पृष्ठों को जोड़ें, नाम बदलें, डुप्लिकेट करें और निर्यात करें — बहु-पृष्ठ संरचना एक CMS-समर्थित साइट की आवश्यकता है।

US$25,00लिस्टिंग खोलें

Templates Manager

पूर्व-डिज़ाइन किए गए टेम्पलेट जिनसे आपके संपादक एक पृष्ठ शुरू कर सकते हैं और फिर अनुकूलित कर सकते हैं।

US$39,00लिस्टिंग खोलें

MJML Preset

MJML कैनवास में लाइव संकलित घटक, ईमेल टेम्प्लेट के लिए एक सामग्री टीम अंततः मांगेगी।

निःशुल्कलिस्टिंग खोलें

Grapesjs Cloudinary

डिफ़ॉल्ट अपलोडर के बजाय परिसंपत्ति प्रबंधक को Cloudinary पर तार करें।

निःशुल्कलिस्टिंग खोलें

आउटपुट, SEO और प्रकाशन

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

इस श्रेणी को ब्राउज़ करें

GrapesJS NodeJS JSON Converter to HTML/CSS

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

निःशुल्कलिस्टिंग खोलें

Grapesjs A11Y Seo — Accessibility auditor + SEO for GrapesJS

संपादक के अंदर एक लाइव एक्सेसिबिलिटी ऑडिट और एक SEO मेटाडेटा पैनल, जिसमें प्रत्येक खोज उस घटक से बंधी होती है जिसके कारण यह होता है।

निःशुल्कलिस्टिंग खोलें

Export Zip

हैंडओवर, बैकअप या एक स्थिर होस्ट के लिए एक ज़िप संग्रह के रूप में पूरी परियोजना निर्यात करें।

निःशुल्कलिस्टिंग खोलें

Grapesjs Netlify

संपादक के अंदर से तैनात करें जब प्रकाशित कलाकृति CMS प्रविष्टि के बजाय एक साइट हो।

निःशुल्कलिस्टिंग खोलें

ऊपर की सीढ़ी पर हर क्षमता निर्माण योग्य है। सवाल यह है कि कौन सा आपकी टीम के समय के लायक है जब एक अनुरक्षित विस्तार पहले से मौजूद है।

विज़ुअल एडिटर से शुरू करें। जैसे-जैसे आपका उत्पाद बढ़ता है, क्षमताओं को जोड़ें।

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

"एक्स्टेंसिबल" का अर्थ है कि सबसिस्टम मौजूद है और इसमें एक एक्सटेंशन बिंदु है - ब्लॉक सेट, टेम्पलेट लाइब्रेरी, एसेट बैकएंड, स्टोरेज लक्ष्य और निर्यात प्रारूप कैटलॉग या आपके स्वयं के कोड से आपूर्ति करने के लिए आपका है। कैटलॉग के दावे सत्यापित 2026-09-03।

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

• पृष्ठ पर ही समृद्ध दृश्य संपादन
• कस्टम ब्लॉक जो आपके डिज़ाइन सिस्टम से मेल खाते हैं
• प्रत्येक डिवाइस की चौड़ाई पर उत्तरदायी लेआउट की जाँच की गई
• कस्टम घटक आपके स्वयं के सामग्री प्रकारों से बंधे हैं
• आपके बाकी उत्पाद के साथ गहरा एकीकरण
• एक व्हाइट-लेबल इंटरफ़ेस जिसका उपयोग आपके ग्राहक कर सकते हैं
• कस्टम समीक्षा और प्रकाशन वर्कफ़्लोज़
• किसी एक मोर्चे से स्वतंत्रता

यह दावा नहीं है कि अंतर्निहित संपादक हीन हैं। यह दावा है कि संपादन सतह और सामग्री अवसंरचना अलग-अलग निर्णय हैं।

अपना CMS रखें। अपना संपादन अनुभव चुनें।

सबसे छोटा संपादक जो किसी सामग्री से बात करता है API। दो समापन बिंदु, एक autosave नीति, और दो कॉल जो आपको प्रत्येक प्रतिनिधित्व देते हैं।

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container: '#editor',
  height: '100vh',
  // Load and save the project through your CMS API. Both endpoints are
  // yours: GrapesJS only decides when to call them.
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
    options: {
      remote: {
        urlLoad: '/api/cms/pages/home',
        urlStore: '/api/cms/pages/home',
        // Send the session the CMS already issued — never a CMS admin token
        // that reached the browser.
        fetchOptions: (opts) => ({ ...opts, credentials: 'include' }),
      },
    },
  },
});

// The two representations, whenever you need them.
const project = editor.getProjectData();          // re-openable source
const output = { html: editor.getHtml(), css: editor.getCss() };

अपना CMS पहले से जारी किया गया सत्र भेजें। एक CMS व्यवस्थापक टोकन जो ब्राउज़र तक पहुंचता है, वह आपके आगंतुकों के पास CMS व्यवस्थापक टोकन है।

GrapesJS को इस बात की परवाह नहीं है कि दूसरा सिरा REST, GraphQL है या आपकी टीम ने आविष्कार किया है। एक स्टोरेज एडाप्टर एक लोड फ़ंक्शन और एक स्टोर फ़ंक्शन है, और नीचे दी गई हर चीज़ आपके अंदर एक विकल्प है।

एडॉप्टर को क्या कवर करना है

• लोड प्रोजेक्ट

  संग्रहीत दस्तावेज़ को एक पृष्ठ के लिए प्राप्त करें और इसे स्टार्ट-अप पर संपादक को सौंप दें।

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

  इसे वापस लिखें, आदर्श रूप से प्रकाशित प्रविष्टि के बजाय मसौदे के अपडेट के रूप में।

• स्वतः सेव

  परिवर्तन गणना या टाइमर पर बचत करें, और समापन बिंदु को अक्सर कॉल किए जाने को सहन करें।

• संपत्ति

  अपनी मीडिया पाइपलाइन के माध्यम से अपलोड करें और वह URL लौटाएं जिसे एसेट मैनेजर को दिखाना चाहिए।

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

  ड्राफ्ट को टोकन के पीछे अपने फ्रंटएंड पर उजागर करें, और किसी और के लिए।

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

  एक अलग, अधिकृत समापन बिंदु। सेव के रूप में कभी भी एक ही कॉल नहीं।

// A storage adapter is just two functions, so GraphQL needs no extra plugin.
editor.Storage.add('cms', {
  async load() {
    const res = await gql(`query Page($id: ID!) { page(id: $id) { project } }`);
    return res.page.project;
  },
  async store(data) {
    await gql(`mutation Save($id: ID!, $project: JSON!) {
      updatePage(id: $id, data: { project: $project }) { id }
    }`, { project: data });
  },
});

कोई GraphQL एडाप्टर पैकेज GJS.Market पर प्रकाशित नहीं हुआ है - ऊपर दिया गया स्निपेट संपूर्ण एकीकरण है, यही कारण है कि किसी की आवश्यकता नहीं है।

दो कार्य एक दृश्य संपादक और एक सामग्री API के बीच संपूर्ण अनुबंध है।

एक टीम जिस सूची के माध्यम से काम करती है वह एक कार्यशील प्रोटोटाइप और ग्राहकों द्वारा स्पर्श की जाने वाली किसी चीज़ के बीच काम करती है। यहां कुछ भी विदेशी नहीं है; यह सब कम से कम एक बार छोड़ दिया जाता है।

• Editor

  • ✓संपादक जीवनचक्र: मार्ग परिवर्तन पर साफ-सुथरी शुरुआत और नष्ट करें
  • ✓किसी भी प्रोजेक्ट लोड से पहले पंजीकृत कस्टम घटक प्रकार
  • ✓केवल इस संपादक द्वारा वास्तव में उपयोग किए जाने वाले प्लगइन्स को बंडल किया जाता है

• डाटा

  • ✓परियोजना की दृढ़ता एक वास्तविक API के खिलाफ साबित हुई, नकली नहीं
  • ✓ऑटोसेव अंतराल ट्यून किया गया, और एक दृश्यमान सहेजी गई स्थिति
  • ✓संशोधन रखे गए, इसलिए एक खराब बचत पुनर्प्राप्त करने योग्य है

• सामग्री

  • ✓कुछ भी लिखने से पहले सर्वर पर स्कीमा सत्यापन
  • ✓सामग्री मॉडल को घटक प्रकारों के साथ प्रलेखित और संस्करण किया गया है
  • ✓संरचित आउटपुट को प्रकाशित करने पर पुनः उत्पन्न किया गया, संपादक से कैश नहीं किया गया

• प्रतिभूति

  • ✓API प्रत्येक लोड पर प्रमाणीकरण, सहेजें और अपलोड करें
  • ✓विशिष्ट पृष्ठ के लिए सर्वर-साइड की जाँच की गई प्राधिकरण
  • ✓अपलोड सत्यापन: प्रकार, आकार और गंतव्य
  • ✓क्वेरी में लागू किया गया टेनेंट अलगाव इंटरफ़ेस में नहीं

• कार्यप्रवाह

  • ✓CMS में प्रकाशित राज्य से अलग ड्राफ्ट राज्य
  • ✓पूर्वावलोकन मार्ग प्रमाणित और अनुक्रमण से बाहर रखा गया
  • ✓किसके साथ और कब रिकॉर्ड किए गए चरण की समीक्षा करें
  • ✓समापन बिंदु को अलग, अधिकृत और ऑडिट करने योग्य प्रकाशित करना

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

• सर्वर पर अधिकृत करें

  प्रत्येक लोड, सहेजें, अपलोड करें और प्रकाशित करें की जाँच सत्र के खिलाफ, उस विशिष्ट पृष्ठ के लिए, सर्वर पर की जाती है।

• क्वेरी में किरायेदारों को अलग करें

  डेटाबेस क्वेरी में ही टेनेंट द्वारा स्कोप। पढ़ने के बाद लागू किया गया फ़िल्टर अलगाव नहीं है।

• API प्रमाणित करें

  संपादक आपके CMS द्वारा जारी किए गए सत्र का उपयोग करता है। ब्राउज़र कोड में कोई प्रबंधन या व्यवस्थापक टोकन नहीं है।

• अपलोड की पुष्टि करें

  प्रकार, आकार और गंतव्य सर्वर-साइड की जाँच करें, और उपयोगकर्ता मीडिया को एक अलग मूल से परोसें जहाँ आप कर सकते हैं।

• सामग्री को साफ करें

  संपादक कस्टम कोड रख सकते हैं। जानबूझकर तय करें कि कौन कर सकता है, और आगंतुकों को जो प्रदान किया जाता है उसे साफ करें।

• प्रकाशन को सुरक्षित रखें

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

कभी भी केवल क्लाइंट-साइड अनुमतियों पर भरोसा न करें। पैनल छिपाना एक उपयोगकर्ता-इंटरफ़ेस निर्णय है, सुरक्षा नियंत्रण नहीं।

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

• संपादक को आलस्य से लोड करें

  इसे संपादन मार्ग पर आयात करें। विज़िटर-फ़ेसिंग पेज के बारे में कुछ भी संपादन बंडल की आवश्यकता नहीं है।

• पृष्ठ बड़ी संपत्ति लाइब्रेरी

  एक मीडिया लाइब्रेरी बिना किसी सीमा के बढ़ती है। इसे पूरा लोड करने के बजाय इसे सर्वर-साइड पर खोजें।

• केवल आपके द्वारा उपयोग किए जाने वाले प्लगइन्स को बंडल करें

  प्रत्येक प्लगइन स्टार्ट-अप पर घटकों, कमांड और पैनलों को पंजीकृत करता है। अप्रयुक्त लोगों को हर खुले पर समय लगता है।

• रनटाइम को प्रकाशित पृष्ठों से बाहर रखें

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

• कैश API जानबूझकर प्रतिक्रियाएँ

  डिलीवरी API को कड़ी मेहनत से कैश किया जा सकता है; पूर्वावलोकन के पीछे पढ़ा गया मसौदा आमतौर पर नहीं हो सकता। उनके साथ अलग से व्यवहार करें।

यहां कोई समय उद्धृत नहीं किया गया है क्योंकि इस पृष्ठ के लिए कोई भी मापा नहीं गया है। अपने स्वयं के ब्लॉक सेट के साथ अपने स्वयं के संपादक को मापें - ब्लॉक लाइब्रेरी और संपत्ति की संख्या संख्याओं पर हावी है।