Vue Page Builder GrapesJS के साथ

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

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

• GrapesJS कोर

  कैनवास का संपादन

  एक पृथक दस्तावेज़ उपयोगकर्ता सीधे संपादित करते हैं, अपनी शैलियों के साथ और स्क्रॉल करते हैं।

• GrapesJS कोर

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

  ड्रॉप लक्ष्य, सम्मिलन बिंदु, पुनः व्यवस्थित करने और नेस्टिंग नियम।

• GrapesJS कोर

  घटक मॉडल

  टाइप किए गए तत्वों को उनकी अपनी सेटिंग्स, बाधाओं और व्यवहार के साथ।

• GrapesJS कोर

  चयन और टूलबार

  चयन करने के लिए क्लिक, होवर रूपरेखा, प्रति-तत्व टूलबार और बैज।

• GrapesJS कोर

  Style Manager

  टाइपोग्राफी, रंग, रिक्ति और लेआउट नियंत्रण चयनकर्ताओं के लिए बाध्य हैं।

• GrapesJS कोर

  उत्तरदायी संपादन

  डिवाइस की चौड़ाई और ब्रेकपॉइंट-स्कोप शैलियाँ एक ही कैनवास में।

• GrapesJS कोर

  Layer Manager

  पृष्ठ का एक पेड़ इतनी गहरी संरचनाएं नौगम्य रहती हैं।

• GrapesJS कोर

  पूर्ववत करें और फिर से करें

  प्रत्येक संपादन में एक कमांड इतिहास, न कि केवल पाठ।

• GrapesJS कोर

  HTML और CSS निर्यात

  वर्तमान दस्तावेज़ से उत्पन्न मार्कअप और स्टाइलशीट को साफ़ करें।

• प्लगइन्स

  ब्लॉक लाइब्रेरी

  तैयार किए गए अनुभाग उपयोगकर्ता खींचते हैं। आपका, या स्थापित।

• प्लगइन्स

  टेम्पलेट्स

  पूरे शुरुआती लेआउट इसलिए कोई भी खाली कैनवास से नहीं मिलता है।

• प्लगइन्स

  संपत्ति प्रबंधन

  अपलोड, मीडिया लाइब्रेरी और इमेज हैंडलिंग।

• प्लगइन्स

  रिच टेक्स्ट एडिटिंग

  अंतर्निहित संपादक से परे इनलाइन पाठ स्वरूपण।

• प्लगइन्स

  बहु-पृष्ठ परियोजनाएं

  एक ही प्रोजेक्ट के अंदर एक से अधिक पृष्ठ।

• आपका Vue ऐप

  भंडार

  जहां प्रोजेक्ट डेटा लिखा और पढ़ा जाता है। आपका API, आपका डेटाबेस।

• आपका Vue ऐप

  प्रमाणीकरण और भूमिकाएं

  कौन कौन सा प्रोजेक्ट खोल सकता है, संपादित कर सकता है और प्रकाशित कर सकता है।

• आपका Vue ऐप

  बहु-किरायेदारी

  एक ग्राहक के पृष्ठों, संपत्तियों और टेम्पलेट्स को दूसरे के पृष्ठों से अलग करना.

• आपका Vue ऐप

  प्रकाशन और होस्टिंग

  स्वीकृत आउटपुट को अपने बुनियादी ढांचे पर एक लाइव पेज में बदलना।

• आपका Vue ऐप

  योजनाएं और बिलिंग

  प्रत्येक ग्राहक का क्या अधिकार है, और वे इसके लिए क्या भुगतान करते हैं।

मध्य कॉलम GJS.Market का बिंदु है: यह वास्तविक क्षमता है जिसे आप शेड्यूल के बजाय स्थापित करते हैं। दाहिने हाथ का कॉलम कभी भी किसी और की समस्या नहीं बनता है - यह आपका उत्पाद है, और यह पृष्ठ हर उस अनुभाग में इसके बारे में स्पष्ट है जो इसे छूता है।

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

1. 01

   आपका Vue/Nuxt आवेदन

   वह सब कुछ जो उत्पाद को आपका बनाता है। GrapesJS की इसमें से किसी के बारे में कोई राय नहीं है।

   • प्रमाणीकरण
   • उपयोगकर्ता
   • रूटिंग
   • बिलिंग
   • व्यापार तर्क
   • APIs
   ↓
2. 02

   GrapesJS संपादक

   एक घुड़सवार उदाहरण, एक घटक के अंदर, एक मार्ग पर। यह वह परत है जिसे आप नहीं बना रहे हैं।

   • कैंवस
   • ब्लॉक
   • अवयव
   • शैलियों
   • लेयरिंग
   • संपत्ति
   ↓
3. 03

   आपका बैकएंड

   संपादक आपको दो कलाकृतियाँ और एक मीडिया स्ट्रीम सौंपता है। आगे क्या होता है यह आपके API का निर्णय है।

   • परियोजना JSON
   • HTML + CSS
   • मीडिया
   • भूमिकाएं
   ↓
4. 04

   आपका डेटाबेस

   आपके द्वारा डिज़ाइन की गई स्कीमा में साधारण पंक्तियाँ। यहां कुछ भी GrapesJS प्रारूप नहीं है जिसे आपको अपनाना है।

   • परियोजनाओं
   • संस्करणों
   • किरायेदार
   • पेज

इसे ऊपर से नीचे पढ़ें: आपका Vue एप्लिकेशन उपयोगकर्ता को प्रमाणित करता है और उन्हें एक संपादक पृष्ठ पर रूट करता है; संपादक प्रोजेक्ट डेटा तैयार करता है; आपका API इसे आपके डेटाबेस में लिखता है। संपादक कभी भी आपके डेटाबेस से बात नहीं करता है, और आपके डेटाबेस को कभी भी संपादक को समझने की आवश्यकता नहीं होती है।

नहीं। यह पहला प्रश्न है जो अधिकांश Vue डेवलपर्स पूछते हैं, और उत्तर बदल देता है कि बाकी पृष्ठ कैसे पढ़ता है। दो परतें ओवरलैप नहीं होती हैं: एक आपके एप्लिकेशन को चलाती है, दूसरी इसके अंदर एक संपादन सतह चलाती है।

जब हम यहां हैं तो एक ईमानदार चेतावनी: कैनवास DOM को iframe के अंदर प्रस्तुत करता है, न कि Vue घटकों को माउंट करता है। आपका ऐप Vue है; आपके उपयोगकर्ता जो संपादित करते हैं वह HTML और CSS है जिसे आपका ऐप अपनी पसंद के अनुसार प्रस्तुत करता है।

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

// builder/registerProductBlocks.ts
import type { Editor } from 'grapesjs';

// A plugin is just a function that receives the editor, so everything below
// works identically in Vue, Nuxt, React or a plain HTML page.
export function registerProductBlocks(editor: Editor): void {
  // A custom component type: your own element, with your own settings.
  editor.DomComponents.addType('pricing-table', {
    isComponent: (el) => el.dataset?.gjsType === 'pricing-table',
    model: {
      defaults: {
        droppable: false,
        traits: [
          { name: 'plan', type: 'select', options: ['free', 'pro', 'team'] },
          { name: 'highlight', type: 'checkbox' },
        ],
      },
    },
  });

  // A block: what the user actually drags in from the panel.
  editor.BlockManager.add('pricing-table', {
    label: 'Pricing',
    category: 'Sections',
    content: { type: 'pricing-table' },
  });
}

• एक घटक प्रकार परिभाषित करता है कि एक तत्व क्या है: यह क्या स्वीकार करता है, यह क्या मना करता है, और यह किन सेटिंग्स को उजागर करता है।
• एक ब्लॉक वह है जो उपयोगकर्ता पैनल में देखते हैं - एक ही प्रकार अलग-अलग प्रीसेट के साथ कई ब्लॉकों का समर्थन कर सकता है।
• लक्षण सेटिंग साइडबार बन जाते हैं, इसलिए आपके उपयोगकर्ता मार्कअप संपादित करने के बजाय तत्वों को कॉन्फ़िगर करते हैं।
• 'droppable: गलत' और मिलान बाधाएं हैं कि आप एक डिज़ाइन किए गए घटक को अलग होने से कैसे बचाते हैं।
• Commands आपको अपने स्वयं के कार्यों को संलग्न करने देता है - प्रकाशित करें, किसी अन्य किरायेदार को डुप्लिकेट करें, समीक्षा का अनुरोध करें।
• इनमें से कोई भी Vue-विशिष्ट नहीं है: एक प्लगइन एक फ़ंक्शन है जो संपादक को प्राप्त करता है, इसलिए यह Nuxt, React या सादे HTML में भी काम करता है।

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

एक अप्रतिबंधित कैनवास ऐसे पृष्ठ बनाता है जो उस उत्पाद को शर्मिंदा करते हैं जिसमें वे रहते हैं। संपादक दोनों दिशाओं में कॉन्फ़िगर करने योग्य है - उपयोगी सेटिंग अधिकतम स्वतंत्रता नहीं है, यह बाध्य स्वतंत्रता है।

उपयोगकर्ताओं को अपने उत्पाद के डिज़ाइन सिस्टम को तोड़ने की अनुमति दिए बिना रचनात्मक स्वतंत्रता दें।

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

• Hero

  शीर्षक, सहायक पंक्ति और एक प्राथमिक कार्रवाई।

• फ़ीचर ग्रिड

  क्षमताओं या लाभों का एक दोहराया जाने वाला ग्रिड।

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

  सुविधाओं और कार्रवाई के लिए कॉल के साथ स्तंभों की योजना बनाएं।

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

  एट्रिब्यूशन के साथ उद्धरण, एक पंक्ति या हिंडोला में।

• FAQ

  प्रश्न और उत्तर जोड़े, विस्तार योग्य या सपाट।

• संपर्क करें

  अपने स्वयं के समापन बिंदु पर पोस्ट करने वाला एक प्रपत्र अनुभाग।

• CTA पट्टी

  एक स्पष्ट कार्रवाई के साथ एक पूर्ण-चौड़ाई वाला बैंड।

• पाद लेख

  नेविगेशन कॉलम, कानूनी लिंक और ब्रांड मार्क.

GrapesJS कुछ भी होस्ट नहीं करता है और डेटाबेस नहीं चुनता है। आप दो तरीकों के साथ एक स्टोरेज एडाप्टर पंजीकृत करते हैं - लोड और स्टोर - और दोनों आपके API से बात करते हैं। आपके बुनियादी ढांचे को कुछ भी नहीं छोड़ता है।

const editor = grapesjs.init({
  container: host.value!,
  storageManager: {
    type: 'app-api',
    autosave: true,
    stepsBeforeSave: 10,
  },
  // Registered as a plugin so the adapter exists before the first load().
  plugins: [
    (ed) => {
      ed.Storage.add('app-api', {
        async load() {
          const res = await fetch(`/api/projects/${props.projectId}`);
          if (!res.ok) throw new Error(`Load failed: ${res.status}`);
          return await res.json();
        },
        async store(project) {
          const res = await fetch(`/api/projects/${props.projectId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(project),
          });
          if (!res.ok) throw new Error(`Save failed: ${res.status}`);
        },
      });
    },
  ],
});

• एडेप्टर को एक प्लगइन के रूप में पंजीकृत करें ताकि संपादक द्वारा अपना पहला लोड करने से पहले यह मौजूद रहे।
• 'autosave' बैचों के साथ 'stepsBeforeSave' प्रति कीस्ट्रोक एक फायरिंग के बजाय लिखता है।
• प्रोजेक्ट JSON को सत्य के स्रोत के रूप में संग्रहीत करें; यह वही है जो संपादक पुनः लोड करता है।
• संस्करणों को सामान्य पंक्तियों के रूप में रखें — संशोधन इतिहास एक स्कीमा निर्णय है, संपादक सुविधा नहीं.
• सर्वर पर प्रत्येक लोड और स्टोर को अधिकृत करें। अनुरोध में प्रोजेक्ट आईडी एक दावा है, अनुमति नहीं।
• संपादक के भंडारण कार्यक्रमों को सुनकर अपने स्वयं के Vue UI में सतह को बचाएं।

आप अपने डेटा और अपने बैकएंड को नियंत्रित करते हैं। संपादक आपके ऐप के किसी भी अन्य भाग की तरह आपके API का ग्राहक है।

संपादक से दो कलाकृतियाँ निकलती हैं और वे विनिमेय नहीं होती हैं। गलत को संग्रहीत करना वह गलती है जो छह महीने बाद पृष्ठों को असंपादित करने योग्य बना देती है।

// The source of truth. Store it; the editor reloads from it.
const projectData = editor.getProjectData();

// The output. Regenerate it every time you publish.
const html = editor.getHtml();
const css = editor.getCss();

await $fetch(`/api/projects/${projectId}/publish`, {
  method: 'POST',
  body: { projectData, html, css },
});

// Authorize the request and sanitize `html` on the server —
// never in the component that produced it.

संपादन के लिए प्रोजेक्ट डेटा संग्रहीत करें। जब आपको प्रकाशन योग्य आउटपुट की आवश्यकता हो तो HTML और CSS उत्पन्न करें।

लेखन और प्रकाशन अलग-अलग काम हैं। GrapesJS उस समय समाप्त होता है जब कोई उपयोगकर्ता किसी पृष्ठ से खुश होता है; उसके बाद सब कुछ आपका वर्कफ़्लो है, आपके बुनियादी ढांचे पर।

प्रत्येक ग्राहक को अपने स्वयं के पृष्ठ, अपनी संपत्ति, अपने स्वयं के टेम्पलेट और अपना स्वयं का ब्रांड मिलता है। वह अलगाव आपके डेटा मॉडल और आपके API की संपत्ति है - संपादक को बस सही प्रोजेक्ट सौंपा जाता है।

GJS.Market से वास्तविक लिस्टिंग, उनके द्वारा हटाई गई समस्या के आधार पर समूहीकृत। उनमें से हर एक उसी संपादक उदाहरण में स्थापित होता है जो आपका Vue घटक बनाता है।

ब्लॉक और टेम्पलेट

समस्या: पहले रन पर एक खाली ब्लॉक पैनल। वे क्या जोड़ते हैं: तैयार अनुभाग, टेम्पलेट प्रबंधन और बहु-पृष्ठ परियोजनाएं। उनकी आवश्यकता किसे है: कोई भी जिसके उपयोगकर्ता डेवलपर नहीं हैं।

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

Plugin Basic Blocks

एक शुरुआती ब्लॉक सेट, इसलिए पैनल उपयोगी है इससे पहले कि आप अपना खुद का लिखें।

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

Plugin Blocky for Tailwind CSS

Tailwind-आधारित अनुभाग उन उत्पादों के लिए जिनकी डिज़ाइन प्रणाली पहले से ही Tailwind है।

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

Templates Manager

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

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

Pages Manager

एक प्रोजेक्ट के अंदर कई पृष्ठ, उनके बीच नेविगेशन के साथ।

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

भंडारण एवं रिकवरी

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

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

Grapesjs Project Manager

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

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

Autosave & Restore — Crash Recovery for GrapesJS

क्रैश या बंद टैब के बाद सहेजे न गए काम को पुनर्प्राप्त करता है - विफलता उपयोगकर्ता कभी माफ नहीं करते हैं।

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

IndexedDB Storage

ब्राउज़र में स्थानीय दृढ़ता, ड्राफ्ट और ऑफ़लाइन संपादन के लिए उपयोगी।

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

Directus Storage

एक कस्टम Directus बैकएंड के बजाय एक कस्टम API के माध्यम से परियोजनाओं को पढ़ता और लिखता है।

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

परिसंपत्तियां और निर्यात

समस्या: छवि प्रबंधन और संपादक से आउटपुट प्राप्त करना। वे क्या जोड़ते हैं: विजेट, CDN एकीकरण, छवि संपादन और संग्रह निर्यात अपलोड करें। उनकी जरूरत किसे है: बिल्डर्स जहां उपयोगकर्ता अपना मीडिया लाते हैं।

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

Grapesjs Cloudinary

Cloudinary के माध्यम से संपादक मीडिया को अपलोड और परोसता है।

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

Grapesjs Uppy

एक पूर्ण अपलोड अनुभव - ड्रैग-इन, प्रगति, कई स्रोत।

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

TOAST UI Image Editor

पहले के बजाय संपादक के अंदर छवियों को क्रॉप करें, आकार बदलें और समायोजित करें।

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

Export Zip

वर्तमान प्रोजेक्ट को HTML/CSS संग्रह के रूप में डाउनलोड करता है।

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

संपादन और लेआउट

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

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

Grapesjs RTE Extensions

अंतर्निहित उपकरण पट्टी से परे इनलाइन पाठ संपादन का विस्तार करता है.

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

Plugin Forms

इनपुट एकत्र करने वाले बिल्डरों के लिए टाइप किए गए फ़ील्ड के साथ घटकों का निर्माण करें।

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

Responsive Pack — Breakpoint Manager for GrapesJS

तीन डिफ़ॉल्ट से परे ब्रेकपॉइंट और डिवाइस की चौड़ाई प्रबंधित करें।

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

Grapesjs Component Code Editor

प्रति-घटक HTML/CSS उन उपयोगकर्ताओं के लिए संपादन जो इसे चाहते हैं।

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

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

दिखाई गई कीमतें वर्तमान GJS.Market लिस्टिंग कीमतें हैं; मुफ्त प्लगइन्स चिह्नित हैं।

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

• ब्लॉकब्लॉक पैनल के लिए तैयार अनुभाग।
• अवयवनए तत्व अपनी सेटिंग्स के साथ प्रकार।
• प्रीसेटसंपूर्ण संपादक कॉन्फ़िगरेशन, थीम पर आधारित और तैयार।
• भंडारणप्रोजेक्ट डेटा को बनाए रखने के लिए एडेप्टर।
• संपत्तिअपलोड, मीडिया लाइब्रेरी और इमेज टूलींग।
• शैलियोंStyle Manager के लिए अतिरिक्त नियंत्रण।
• समृद्ध पाठडिफ़ॉल्ट उपकरण पट्टी से परे इनलाइन पाठ संपादन.
• वेब पेजपृष्ठ-स्तरीय सुविधाएँ और संपूर्ण पृष्ठ किट।
• न्यूज़लेटर्सईमेल आउटपुट, MJML और अभियान ब्लॉक।
• डेवलपर उपकरणडिबगिंग, निरीक्षण और बिल्ड-टाइम सहायक।
• एआईसंपादक के अंदर पीढ़ी और सहायता।

कोई भी कॉलम मुफ्त नहीं है। सवाल केवल यह है कि आपकी टीम को अपना समय किसमें बिताना चाहिए।

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

पंक्ति दर पंक्ति, आप स्वयं क्या लिख रहे होंगे और क्या पहले से मौजूद है। "एक्स्टेंसिबल" का अर्थ है कि इंजन हुक प्रदान करता है और आप व्यवहार की आपूर्ति करते हैं - आमतौर पर कुछ पंक्तियाँ, कभी-कभी एक प्लगइन।

शामिल = कोर के साथ जहाज। एक्स्टेंसिबल = एक प्रलेखित एक्सटेंशन बिंदु, प्लस प्लगइन्स जहां वे मौजूद हैं।
GrapesJS 0.23.6 पर 2026-09-02 के खिलाफ सत्यापित।

पांच चरण, एक घटक। कोई आधिकारिक Vue आवरण नहीं है और आपको इसकी आवश्यकता नहीं है: GrapesJS एक सादे तत्व में प्रस्तुत होता है, इसलिए एकमात्र Vue-विशिष्ट प्रश्न यह है कि कौन सा जीवनचक्र हुक 'init()' कहता है। grapesjs 0.23.6 स्थापित करें, घटक बनाएं, माउंट पर प्रारंभ करें, अपने प्लगइन्स पास करें, अनमाउंट पर नष्ट करें।

1. 01GrapesJS स्थापित करें
2. 02संपादक घटक बनाएँ
3. 03माउंट पर इनिशियलाइज़ करें
4. 04प्लगइन्स कॉन्फ़िगर करें
5. 05अनमाउंट पर नष्ट करें

<!-- components/PageBuilder.vue -->
<template>
  <div ref="host" class="page-builder" />
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
import grapesjs, { type Editor } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// shallowRef, not ref: the editor is a large non-reactive instance and
// deep-proxying it costs performance for nothing.
const editor = shallowRef<Editor | null>(null);
const host = ref<HTMLElement | null>(null);

onMounted(() => {
  editor.value = grapesjs.init({
    container: host.value!,
    height: '100%',
    fromElement: false,
    storageManager: false,
    plugins: [],          // GJS.Market plugins go here
    blockManager: { blocks: [] },
  });
});

onBeforeUnmount(() => {
  editor.value?.destroy();
  editor.value = null;
});
</script>

• 'shallowRef', 'रेफरी' नहीं: संपादक एक बड़ी गैर-प्रतिक्रियाशील वस्तु है और डीप-प्रॉक्सी करने से कुछ भी नहीं के लिए प्रदर्शन खर्च होता है।
• 'onMounted' कभी भी सर्वर पर नहीं चलता है, जो इसे बिना किसी अतिरिक्त मशीनरी के Nuxt में सुरक्षित बनाता है।
• अनमाउंट मैटर्स पर 'destroy()' - एक मार्ग परिवर्तन जो एक संपादक को अपने श्रोताओं और उसके iframe को लीक कर देता है।
• 'storageManager: गलत' जब आप चीजों को वायरिंग कर रहे हों, तो API तैयार होने पर अपने एडाप्टर में स्वैप करें।
• संपादक स्टाइलशीट को एक बार आयात करें; यह पैनलों को स्टाइल करता है, आपके एप्लिकेशन को नहीं।
• इस बिंदु से पहले सब कुछ - घटनाएं, रैपर, कंपोजेबल फॉर्म - एकीकरण गाइड पर है।

GrapesJS को एक ब्राउज़र DOM की आवश्यकता है। Nuxt के सर्वर रेंडर के तहत कोई 'दस्तावेज़' नहीं है, इसलिए क्लाइंट पर संपादक बनाना होगा - जो 'onMounted' पहले से ही गारंटी देता है। '<ClientOnly>' बेल्ट-एंड-ब्रेसिज़ संस्करण है, और यह वह जगह है जहां फ़ॉलबैक मार्कअप रहता है।

<!-- pages/editor.vue -->
<template>
  <ClientOnly>
    <PageBuilder :project-id="route.params.id" />

    <template #fallback>
      <p class="editor-placeholder">Loading the editor…</p>
    </template>
  </ClientOnly>
</template>

<script setup lang="ts">
const route = useRoute();
</script>

• जब आप संपादक के स्थान पर सर्वर-रेंडर फ़ॉलबैक चाहते हैं तो '<ClientOnly>' का उपयोग करें।
• '.client.vue' प्रत्यय Nuxt का एक पूरे घटक के लिए एक ही बात कहने का अपना तरीका है।
• SSR इस पृष्ठ का दिलचस्प हिस्सा नहीं है - यह एक सीमा है, और यह दो-पंक्ति है।
• संपादक मार्ग के बाहर सब कुछ सर्वर पर ठीक वैसा ही प्रस्तुत होता है जैसा आज होता है।

इनमें से प्रत्येक शुरुआत में सही हो सकता है और ग्राहकों के संपादक में आने के बाद इसे ठीक करना महंगा है।

• ✕गलती

  SSR के दौरान आरंभ करना

  सर्वर पर चलने वाले कहीं भी 'init()' को कॉल करना फेंकता है, क्योंकि कैनवास को प्रस्तुत करने के लिए कोई 'दस्तावेज़' नहीं है।

  ✓इसके बजाय क्या करें

  संपादक को केवल 'onMounted' में बनाएं, और यदि आप सर्वर-रेंडर फ़ॉलबैक चाहते हैं तो मार्ग को '<ClientOnly>' में लपेटें।

• ✕गलती

  केवल HTML की बचत

  रेंडर किए गए आउटपुट को वापस संपादन योग्य दस्तावेज़ में नहीं बदला जा सकता है। इस तरह से सहेजा गया प्रत्येक पृष्ठ प्रकाशित होते ही फ्रीज हो जाता है।

  ✓इसके बजाय क्या करें

  प्रोजेक्ट JSON को सत्य के स्रोत के रूप में संग्रहीत करें और जब भी आप प्रकाशित करें तो HTML और CSS को पुनर्जीवित करें।

• ✕गलती

  उपयोगकर्ताओं को असीमित खाली कैनवास देना

  कुल स्वतंत्रता ऐसे पृष्ठ तैयार करता है जो आपके डिज़ाइन सिस्टम को तोड़ते हैं, और पैनल में कुछ भी नहीं होने के साथ पहली बार चलने का अनुभव कोई पृष्ठ नहीं बनाता है।

  ✓इसके बजाय क्या करें

  क्यूरेटेड ब्लॉक और टेम्प्लेट शिप करें, और उन स्टाइल गुणों को बाधित करें जिन तक उपयोगकर्ता पहुंच सकते हैं।

• ✕गलती

  हर प्लगइन को स्थापित करना

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

  ✓इसके बजाय क्या करें

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

वे चीजें जो एक कार्यशील डेमो को किसी ऐसी चीज़ से अलग करती हैं जिसे आप भुगतान करने वाले ग्राहकों के सामने रख सकते हैं।

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

अपने एप्लिकेशन के लिए Vue और विज़ुअल संपादन अनुभव के लिए GrapesJS का उपयोग करें। अपने स्वयं के घटक, ब्लॉक, टेम्पलेट, भंडारण और प्रकाशन वर्कफ़्लो जोड़ें - फिर बिल्डर को GJS.Market प्लगइन्स के साथ विस्तारित करें जब आपको अधिक की आवश्यकता हो।