GrapesJS का उपयोग करके Angular में ड्रैग-एंड-ड्रॉप पेज बिल्डर कैसे बनाएं (चरण-दर-चरण मार्गदर्शिका + कोड)

Angular में ड्रैग-एंड-ड्रॉप पेज बिल्डर बनाना जितना आप सोच सकते हैं उससे कहीं अधिक आसान है GrapesJS धन्यवाद . GrapesJS एक ओपन-सोर्स वेब बिल्डर फ्रेमवर्क है जो आपको विज़ुअल ड्रैग-एंड-ड्रॉप संपादक के साथ HTML पेज बनाने की सुविधा देता है। इस ट्यूटोरियल में, हम न्यूनतम कोड के साथ पेज बिल्डर बनाने के लिए GrapesJS को एक Angular एप्लिकेशन में एकीकृत करेंगे। आप सीखेंगे कि Angular में GrapesJS कैसे सेट अप करें, आधिकारिक GrapesJS का उपयोग करें बेसिक ब्लॉक तैयार सामग्री ब्लॉक के लिए प्लगइन, डिज़ाइन किए गए HTML/CSS को निर्यात करें, और यहां तक कि इसे बैकएंड में भी सहेजें। हम Angular v20 (अक्टूबर 2025 तक नवीनतम स्थिर संस्करण और नवीनतम GrapesJS लाइब्रेरी का उपयोग करेंगे ताकि यह सुनिश्चित हो सके कि आप अप-टू-डेट हैं।

इस चरण-दर-चरण मार्गदर्शिका के अंत तक, आपके पास Angular में एक कार्यशील पृष्ठ बिल्डर होगा जहां उपयोगकर्ता मूल ब्लॉक (पाठ, चित्र, कॉलम, आदि) को कैनवास पर खींच सकते हैं, GrapesJS के अंतर्निहित संपादकों का उपयोग करके उन्हें स्टाइल कर सकते हैं, और परिणामों को सहेज सकते हैं। आएँ शुरू करें!

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

सुनिश्चित करें कि आपने आगे बढ़ने से पहले निम्नलिखित स्थापित और सेट अप किया है:

• Node.js और एनपीएम - Node.js का नवीनतम एलटीएस संस्करण स्थापित करें जो एनपीएम के साथ आता है।
• Angular सीएलआई - एनपीएम इंस्टॉल -जी @angular/सीएलआई के साथ विश्व स्तर पर स्थापित करें। यह ट्यूटोरियल सीएलआई 20 Angular उपयोग करता है।
• बुनियादी Angular ज्ञान - Angular में घटकों, मॉड्यूल और सेवाओं की समझ।
• एक कोड संपादक - जैसे, वीएस कोड, वेबस्टॉर्म, आदि, आपकी प्रोजेक्ट फ़ाइलों को संपादित करने के लिए।
• इंटरनेट कनेक्शन - GrapesJS एनपीएम के माध्यम से स्थापित किया जाएगा।

चरण 1: Angular प्रोजेक्ट सेट करना

सबसे पहले, Angular CLI का उपयोग करके एक नया Angular प्रोजेक्ट बनाएं। हम प्रोजेक्ट का नाम grapesjs देंगे -pagebuilder (आप कोई भी नाम चुन सकते हैं):

एनजी नई grapesjs-पेजबिल्डर

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

सीडी grapesjs-पेजबिल्डर
एनजी सर्व -ओ

यह http://localhost:4200/ पर डिफ़ॉल्ट Angular स्वागत पृष्ठ खोलेगा। इसके बाद, हम अपने पेज बिल्डर के लिए संरचना स्थापित करेंगे। एक नया Angular घटक उत्पन्न करें जो GrapesJS संपादक को होस्ट करेगा। हम इसे PageBuilderComponent कहेंगे:

ng घटक पृष्ठ-बिल्डर उत्पन्न करें

यह page-builder.component.ts, इसकी HTML/CSS फ़ाइलें बनाएगा और ऐप मॉड्यूल को अपडेट करेगा। इस ट्यूटोरियल के लिए, हम चाहते हैं कि हमारा पेज बिल्डर घटक संपूर्ण ऐप ले ले। src/app/app.component.html खोलें और इसकी सामग्री को <app-page-builder></app-page-builder> चयनकर्ता से बदलें (और डिफ़ॉल्ट टेम्पलेट टेक्स्ट को हटा दें)। यह सुनिश्चित करता है कि हमारा पेज बिल्डर घटक मुख्य पृष्ठ के रूप में प्रस्तुत किया गया है।

अब हमारे पास GrapesJS एकीकरण के लिए एक नया Angular ऐप तैयार है।

चरण 2: GrapesJS और बेसिक ब्लॉक प्लगइन स्थापित करना

हमारे Angular प्रोजेक्ट तैयार होने के साथ, आइए GrapesJS और आधिकारिक बेसिक ब्लॉक प्लगइन इंस्टॉल करें। बेसिक ब्लॉक प्लगइन पूर्व-निर्मित सामग्री ब्लॉक (पाठ, चित्र, कॉलम, आदि) का एक सेट प्रदान करता है जिसे हम खींच और छोड़ सकते हैं। अपनी प्रोजेक्ट निर्देशिका में एक टर्मिनल खोलें और चलाएं:

npm install grapesjs grapesjs-blocks-basic --save

यह आपकी परियोजना निर्भरता में GrapesJS और मूल ब्लॉक प्लगइन जोड़ देगा। एक बार स्थापित होने के बाद, हमें यह सुनिश्चित करने की आवश्यकता है कि Angular GrapesJS संपत्ति (सीएसएस/जेएस फ़ाइलें) के बारे में जानता है और TypeScript परिभाषाओं को संभालता है।

angular.json में GrapesJS एसेट शामिल करें

GrapesJS अपने स्वयं के सीएसएस के साथ आता है और हमारे पास शामिल करने के लिए एक प्लगइन जेएस भी है। angular.json खोलें और अपने ऐप के लिए बिल्ड विकल्पों का पता लगाएं (प्रोजेक्ट -> YOUR_APP_NAME -> आर्किटेक्ट - > बिल्ड -> विकल्प के तहत)। GrapesJS फ़ाइलों को शैलियों और स्क्रिप्ट सरणियों में जोड़ें, उदाहरण के लिए:

"शैलियाँ": [
 "node_modules/grapesjs/dist/css/grapes.min.css", 
"src/styles.css"]
,
"स्क्रिप्ट": [ 
"node_modules/grapesjs/dist/grapes.min.js",
 "node_modules/grapesjs-blocks-basic/dist/index.js"]

यह सुनिश्चित करेगा कि ऐप चलने पर GrapesJS कोर सीएसएस और स्क्रिप्ट (मूल ब्लॉक प्लगइन स्क्रिप्ट सहित) लोड हो जाएं। सीएसएस GrapesJS संपादक (कैनवास, पैनल, आदि) को स्टाइल करेगा, और जेएस स्क्रिप्ट grapesjs और प्लगइन को विश्व स्तर पर उपलब्ध कराएगा।

TypeScript परिभाषाएँ सेट करें

यदि आप Angular TypeScript फ़ाइल में GrapesJS आयात करने का प्रयास करते हैं, तो आपको त्रुटियों का सामना करना पड़ सकता है क्योंकि GrapesJS TypeScript प्रकार की परिभाषाओं के साथ शिप नहीं होता है। किसी भी TypeScript संकलन त्रुटियों से बचने के लिए (उदाहरण के लिए, "मॉड्यूल के लिए घोषणा फ़ाइल नहीं मिल सकी "grapesjs"), एक परिभाषा फ़ाइल बनाएं। प्रोजेक्ट src/फ़ोल्डर में, निम्न सामग्री के साथ grapesjs.d.ts नाम की एक नई फ़ाइल जोड़ें:

मॉड्यूल 'grapesjs'घोषित करें;
मॉड्यूल 'grapesjs-ब्लॉक-बेसिक' घोषित करें;

यह मॉड्यूल की घोषणा करता है ताकि TypeScript उन्हें किसी भी तरह से मानें और जब हम उन्हें आयात करते हैं तो शिकायत नहीं करेंगे। अब हम अपने Angular कोड में GrapesJS का उपयोग करने के लिए तैयार हैं।

(यदि आप TypeScript का उपयोग कर रहे हैं और मजबूत टाइपिंग पसंद करते हैं, तो GrapesJS प्रकार की सुरक्षा में सुधार करने के लिए प्लगइन्स के लिए एक usePlugin सहायक प्रदान करता है। सरलता के लिए, हम बुनियादी सेटअप के साथ आगे बढ़ेंगे।

चरण 3: GrapesJS को एक Angular घटक में एकीकृत करना

अब मुख्य भाग आता है: GrapesJS संपादक को हमारे Angular घटक में एम्बेड करना। हम अपने द्वारा बनाए गए PageBuilderComponent में GrapesJS संपादक को प्रारंभ करेंगे।

3.1 घटक टेम्पलेट सेटअप

page-builder.component.html खोलें। GrapesJS एडिटर को माउंट करने के लिए हमें एक कंटेनर एलिमेंट की आवश्यकता है। एक div जोड़ें जो एडिटर कैनवास कंटेनर के रूप में कार्य करेगा। हम प्रारंभिक सामग्री के रूप में अंदर एक साधारण शीर्षक भी शामिल करते हैं (GrapesJS कंटेनर के अंदर मौजूदा HTML आयात कर सकते हैं)। इसके अतिरिक्त, हम एक सहेजें बटन जोड़ेंगे जो सामग्री निर्यात को ट्रिगर करेगा:

<बटन (क्लिक)="savePage()">पेज सहेजें</बटन>

<div #gjsContainer>
 <h2>मेरा पहला GrapesJS पृष्ठ</h2>
</div>

यहाँ:

• #gjsContainer एक टेम्पलेट संदर्भ है जिसका उपयोग हम अपने घटक वर्ग में DOM तत्व प्राप्त करने के लिए करेंगे।
• कंटेनर के अंदर <h2>My First GrapesJS Page</h2> उदाहरण सामग्री है जिसे GrapesJS शुरू में लोड करेगा (आप यहां कोई भी प्लेसहोल्डर सामग्री डाल सकते हैं).

3.2 घटक वर्ग: GrapesJS प्रारंभ करना

page-builder.component.ts खोलें। हम GrapesJS और प्लगइन आयात करेंगे, फिर संपादक को घटक के जीवनचक्र हुक में प्रारंभ करेंगे।

सबसे पहले, आवश्यक मॉड्यूल आयात करें और संपादक उदाहरण के लिए एक संपत्ति घोषित करें:

'@angular/core' से { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } आयात करें;
'grapesjs' से grapesjs आयात करें;
'grapesjs-blocks-basic' से basicBlocks आयात करें;  बेसिक ब्लॉक प्लगइन
... (अन्य आयात जैसे सेवा और Angular सामान)

@Component({
 चयनकर्ता: 'ऐप-पेज-बिल्डर',
 टेम्पलेटयूआरएल: './page-builder.component.html', 
स्टाइलयूआरएल: ['./page-builder.component.css']}
)निर्यात
वर्ग PageBuilderComponent AfterViewInit, OnDestroy { 
@ViewChild('gjsContainer', { static: false }) editorContainer!: ElementRef<HTMLDivElement>; 
संपादक: कोई भी;  हम GrapesJS संपादक इंस्टेंस को यहां संग्रहीत

 करेंगे कंस्ट्रक्टर (निजी पृष्ठ सेवा: पेज सेवा) { }

ख़ुलासा:

• हम अपने टेम्पलेट में <div #gjsContainer> के संदर्भ को कैप्चर करने के लिए @ViewChild('gjsContainer') का उपयोग करते हैं
• . यह हमें वास्तविक DOM तत्व तक पहुंच प्रदान करता है जहां हम GrapesJS प्रस्तुत करना चाहते हैं।
• हम दृश्य तैयार होने के बाद GrapesJS को प्रारंभ करने के लिए AfterViewInit को लागू करते हैं (ताकि editorContainer पॉप्युलेट हो) और घटक नष्ट होने पर संपादक को साफ करने के लिए OnDestroy करें।
• हम grapesjs और प्लगइन (grapesjs-blocks-basic) को शीर्ष पर आयात करते हैं। प्लगइन आयात हमें एक फ़ंक्शन देता है जिसे हम GrapesJS पास कर सकते हैं।

अब, कक्षा के भीतर:

ngAfterViewInit(): void {
   संपादक GrapesJS
  प्रारंभ करें this.editor = grapesjs.init({
    संपादक को div तत्व
   कंटेनर से बांधें: this.editorContainer.nativeElement, ViewChild  तत्व:contentReference[oaicite:9]{index=9}:contentReference[oaicite:10]{index=10}
का उपयोग करके   Element: true,  कंटेनर के आंतरिक HTML से प्रारंभिक सामग्री आयात करें: contentReference[oaicite:11]{index=11}
   ऊंचाई: '700px',
   चौड़ाई: 'ऑटो', अभी   
के लिए स्थानीय भंडारण अक्षम करें (कोई ऑटोसेव नहीं)   
storageManager: false, बेसिक   
ब्लॉक प्लगइन
   प्लगइन्स शामिल करें: [basicBlocks], प्लगइन्सऑप्ट्स: {
    [बेसिकब्लॉक्स]: {     
आप यहां प्लगइन विकल्पों को अनुकूलित कर सकते हैं (उदाहरण के लिए, कौन से ब्लॉक शामिल करने हैं) }
    }
   
  });

       GrapesJS संपादक अब घुड़सवार और दृश्यमान है।
 }

आइए उन महत्वपूर्ण कॉन्फ़िगरेशन विकल्पों को तोड़ें जिन्हें हमने grapesjs.init() पर पास किया था:

• कंटेनर – संपादक को माउंट करने के लिए तत्व या चयनकर्ता। यहां हम अपने ViewChild (this.editorContainer.nativeElement) से मूल DOM तत्व पास करते हैं।
• . यह हमारे टेम्पलेट में <div #gjsContainer> से GrapesJS जोड़ता है।
• fromElement - GrapesJS कंटेनर तत्व के अंदर HTML से संपादक सामग्री लोड करने के लिए कहता है
• . क्योंकि हम div में एक <h2>My First GrapesJS Page</h2> डालते हैं, इसलिए संपादक कैनवास पर एक घटक के रूप में इसके साथ शुरू करेगा।
• ऊंचाई/चौड़ाई - संपादक के आयाम सेट करता है। हम कंटेनर की चौड़ाई को भरने के लिए 700px ऊंचाई (आप इसे समायोजित कर सकते हैं या '100vh' का उपयोग कर सकते हैं) और 'ऑटो' चौड़ाई का उपयोग करते हैं।
• storageManager - GrapesJS पास एक स्टोरेज मैनेजर है (उदाहरण के लिए, लोकलस्टोरेज में सहेजने के लिए)। हमने अभी के लिए ऑटोसेविंग को अक्षम करने के लिए इसे गलत पर सेट किया है
• . यह GrapesJS को स्वचालित रूप से राज्य को सहेजने का प्रयास करने से रोकता है (हम मैन्युअल रूप से सहेजने को संभालेंगे)।
• प्लगइन्स - उपयोग करने के लिए प्लगइन्स की एक सरणी। हम यहां अपने आयातित बेसिकब्लॉक्स प्लगइन को शामिल करते हैं
• . यह प्लगइन GrapesJS ब्लॉक मैनेजर में बुनियादी सामग्री ब्लॉक (टेक्स्ट, लिंक, छवि, वीडियो, कॉलम, आदि) का एक सेट जोड़ता है।
• प्लगइन्सऑप्ट्स - प्लगइन्स के लिए विकल्प। हमने बेसिकब्लॉक्स के लिए एक खाली विकल्प ऑब्जेक्ट प्रदान किया (कुंजी के रूप में प्लगइन फ़ंक्शन का उपयोग करके)। डिफ़ॉल्ट रूप से, मूल ब्लॉक प्लगइन अपने सभी ब्लॉक जोड़ देगा (कॉलम, टेक्स्ट, इमेज, आदि) डिफ़ॉल्ट सेटिंग्स के साथ
• . (आप इसे अनुकूलित कर सकते हैं- उदाहरण के लिए, मानचित्र जैसे ब्लॉक को बाहर करने के लिए, आप ब्लॉक निर्दिष्ट कर सकते हैं: ['कॉलम 1', 'कॉलम 2',...,'वीडियो'] विकल्पों में 'मैप' को छोड़कर
• . हमारे मामले में, हम सभी डिफ़ॉल्ट ब्लॉक का उपयोग करेंगे।

नीचे हमारे द्वारा उपयोग किए जाने वाले कॉन्फ़िगरेशन विकल्पों GrapesJS कुंजी की सारांश तालिका दी गई है और वे क्या करते हैं:

grapesjs.init(...) पर कॉल करने के बाद, GrapesJS संपादक UI हमारे घटक के अंदर दिखाई देगा। डिफ़ॉल्ट रूप से, GrapesJS पैनल और बटन के एक सेट के साथ लोड होता है। उदाहरण के लिए, आपको विकल्पों के साथ एक शीर्ष बार दिखाई देगा (जैसे ब्लॉक पैनल को टॉगल करना, पूर्ववत करना/फिर से करना, आदि), बीच में एक कैनवास (जहां <h2> दिखाई देता है), और दाईं ओर एक स्टाइल/सेटिंग पैनल। बाईं ओर, एक ब्लॉक पैनल होगा जिसमें प्लगइन (टेक्स्ट, लिंक, छवि, वीडियो, आदि) द्वारा प्रदान किए गए बेसिक ब्लॉक होंगे। आप अपना पेज बनाने के लिए इन ब्लॉकों को कैनवास पर खींच सकते हैं।

युक्ति: डिफ़ॉल्ट रूप से, GrapesJS में ब्लॉक पैनल तब तक छिपा रहता है जब तक आप "ब्लॉक" बटन (ऊपरी-बाएँ टूलबार पर) पर क्लिक नहीं करते। ब्लॉक पैनल को टॉगल करने के लिए ब्लॉक आइकन पर क्लिक करें और उपलब्ध ड्रैग-एंड-ड्रॉप ब्लॉक देखें। GrapesJS के डिफ़ॉल्ट UI में यह टॉगल बटन शामिल है। यदि आवश्यक हो, तो आप डिफ़ॉल्ट रूप से ब्लॉक पैनल दिखाने के लिए GrapesJS कॉन्फ़िगर कर सकते हैं (उदाहरण के लिए, ब्लॉकमैनेजर कॉन्फ़िगरेशन में कस्टम पैनल या एपेंडटू विकल्प का उपयोग करके), लेकिन अभी के लिए डिफ़ॉल्ट व्यवहार का उपयोग करना ठीक है।

3.3 सफाई: घटक नष्ट करने पर संपादक को नष्ट करना

स्मृति लीक या समस्याओं को रोकने के लिए यदि हमारा घटक अनलोड हो जाता है, तो घटक नष्ट होने पर GrapesJS संपादक उदाहरण को नष्ट करना अच्छा अभ्यास है। हम अपने घटक के लिए ngOnDestroy लागू करते हैं:

 ngOnDestroy(): void {
  if (this.editor) {
   this.editor.destroy();
  }
 }}

यह ईवेंट श्रोताओं और मुफ्त संसाधनों को ठीक से उतारने के लिए संपादक की नष्ट () विधि को कॉल करता है। GrapesJS इस उद्देश्य के लिए editor.destroy() प्रदान करता है (यह साफ करने के लिए आंतरिक रूप से घटनाओं को नष्ट करने के लिए ट्रिगर करता है)। अब हमारा GrapesJS उदाहरण सफाई से समाप्त हो जाएगा यदि उपयोगकर्ता घटक से दूर नेविगेट करता है।

इस बिंदु पर, हमने GrapesJS पूरी तरह से Angular में एकीकृत किया है। आप एनजी सर्व चला सकते हैं और सत्यापित करने के लिए ऐप पर नेविगेट कर सकते हैं: आपको GrapesJS संपादक इंटरफ़ेस देखना चाहिए, जिसमें आपका नमूना कैनवास और एक टूलबार में है। यह सुनिश्चित करने के लिए कि सब कुछ काम करता है, ब्लॉक पैनल से एक ब्लॉक (जैसे, एक टेक्स्ट या इमेज ब्लॉक) को कैनवास में खींचने का प्रयास करें।

चरण 4: GrapesJS से HTML और CSS निर्यात करना

GrapesJS की शक्तिशाली विशेषताओं में से एक यह है कि यह आपको उपयोगकर्ता द्वारा बनाए गए पृष्ठ को स्वच्छ HTML और CSS के रूप में निर्यात करने की अनुमति देता है। हमने अपने टेम्पलेट में एक "पेज सहेजें" बटन जोड़ा है; अब हम इस बटन पर क्लिक करने पर GrapesJS से HTML/CSS निकालने के लिए तर्क को लागू करेंगे।

हमारे PageBuilderComponent क्लास में, हमारे पास पहले से ही बटन से जुड़ी एक savePage() विधि है। आइए इसे लागू करें:

 savePage(): void {  
GrapesJS संपादक  
const html = this.editor.getHtml() से HTML और CSS प्राप्त करें;
  स्थिरांक सीएसएस = this.editor.getCss();
  console.log('निर्यात किया गया HTML:', html);
  console.log('निर्यात किया गया सीएसएस:', सीएसएस);

   वैकल्पिक रूप से, सामग्री को बैकएंड
  this.pageService.savePage(html, css).subscribe ({   
next: response => console.log('पेज सफलतापूर्वक सहेजा गया!', प्रतिक्रिया),
   त्रुटि: err => console.error('त्रुटि पृष्ठ सहेजने में त्रुटि:', त्रुटि) }  
); }
 

यहां हम कैनवास से वर्तमान HTML मार्कअप और CSS शैलियों को पुनः प्राप्त करने के लिए संपादक GrapesJS API विधियों getHtml() और getCss() का उपयोग करते हैं। GrapesJS कैनवास (डिज़ाइन किए गए पृष्ठ) के अंदर क्या है, इसकी HTML स्ट्रिंग और लागू की गई सभी शैलियों (कक्षाओं सहित, आदि) के लिए CSS स्ट्रिंग लौटाएगा। हम उन्हें अभी के लिए कंसोल पर लॉग इन करते हैं, और फिर वास्तव में उन्हें सहेजने के लिए एक सेवा को कॉल करते हैं।

इस स्तर पर, यदि आप चल रहे ऐप में "पृष्ठ सहेजें" बटन पर क्लिक करते हैं, तो आपको ब्राउज़र कंसोल में जेनरेट किए गए HTML और CSS मुद्रित दिखाई देने चाहिए। उदाहरण के लिए, HTML आपके ब्लॉक और सामग्री के साथ एक <div> संरचना दिखा सकता है, और CSS में स्टाइल के लिए बनाई गई कक्षाएं शामिल हो सकती GrapesJS ।

चरण 5: पृष्ठ सामग्री को बैकएंड पर पोस्ट करना (Angular सेवा)

वास्तविक दुनिया के ऐप में, आप संभवतः उपयोगकर्ता के पेज डिज़ाइन को बैकएंड सर्वर पर सहेजना चाहेंगे (उदाहरण के लिए, डेटाबेस या फ़ाइल सिस्टम में स्टोर करने के लिए)। हम HTML/CSS को बैकएंड API एंडपॉइंट पर भेजने के लिए एक Angular सेवा बनाकर इसका अनुकरण करेंगे।

5.1 सेवा तयार करणे

PageService नामक एक नई सेवा (यदि आपने पहले से नहीं की है) उत्पन्न करें:

एनजी जनरेट सर्विस पेज

यह page.service.ts बनाता है। इस सेवा में, हम पृष्ठ सामग्री को एपीआई पर पोस्ट करने के लिए Angular के HttpClient का उपयोग करेंगे। सुनिश्चित करें कि आप अपने AppModule (app.module.ts में) में HttpClientModule आयात करते हैं ताकि HttpClient उपलब्ध हो।

अब, page.service.ts खोलें और पृष्ठ को सहेजने के लिए एक विधि लागू करें:

'@angular/core' से { इंजेक्टेबल } आयात करें;
'@angular/common/http' से { HttpClient } आयात करें;
'rxjs' से { अवलोकन योग्य} आयात करें;

@Injectable({ 
प्रदान किया गया: 'रूट'}
)निर्यात
वर्ग PageService {
 निजी apiUrl = '/api/pages';   बैकएंड एंडपॉइंट के लिए URL (आवश्यकतानुसार बदलें)

 कंस्ट्रक्टर (निजी http: HttpClient) { } 

savePage (html: string, css: string): अवलोकन योग्य<कोई भी> {
  const पेलोड = { html, css };
   HTML/CSS को बैकएंड पर पोस्ट करें (अपने वास्तविक API एंडपॉइंट से बदलें)
  रिटर्न this.http.post(this.apiUrl, पेलोड);
 }}

इस कोड में:

• हम एक apiUrl (उदाहरण के लिए, '/api/pages') को परिभाषित करते हैं जो आपके बैकएंड एंडपॉइंट को इंगित करना चाहिए जो पृष्ठ डेटा को सहेजने का काम करेगा। एक वास्तविक ऐप में, इसे एक वास्तविक URL (उदाहरण के लिए, आपके सर्वर पर एक एपीआई मार्ग) से बदलें। प्रदर्शन के लिए, हम एक सापेक्ष पथ का उपयोग करते हैं।
• सेवपेज विधि HTML और CSS स्ट्रिंग्स को स्वीकार करती है, उन्हें JSON पेलोड में पैक करती है, और सर्वर पर डेटा भेजने के लिए HttpClient.post का उपयोग करती है।
• हम एक अवलोकन योग्य लौटाते हैं ताकि कॉल करने वाला प्रतिक्रिया या त्रुटियों की सदस्यता ले सके और संभाल सके।

सुनिश्चित करें कि यह सेवा रूट में प्रदान की जाती है (जो कि प्रदान की गई @Injectable संपत्ति के माध्यम से है)। हमने इस सेवा को कंस्ट्रक्टर के माध्यम से पहले अपने PageBuilderComponent में इंजेक्ट किया था।

5.2 घटक में सेवा का उपयोग करना

हमने पहले ही PageService को घटक में इंजेक्ट कर दिया है और savePage() विधि में this.pageService.savePage(html, css).subscribe (...) कहा है। बटन पर क्लिक करने पर यह अनुरोध भेजेगा। एक वास्तविक कार्यान्वयन में, आप एक सफल बचत के बाद एक सफलता संदेश या नेविगेट आदि दिखा सकते हैं। हमारे उद्देश्यों के लिए, हम केवल परिणाम लॉग करते हैं।

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

निष्कर्ष

बधाई हो! आपने GrapesJS का उपयोग करके Angular में एक बुनियादी ड्रैग-एंड-ड्रॉप पेज बिल्डर बनाया है। 🎉

इस गाइड में, हम:

• पेज बिल्डर के लिए एक Angular प्रोजेक्ट और घटक सेट करें (v20Angular उपयोग करके)।
• GrapesJS स्थापित किया गया और उपयोग के लिए तैयार ब्लॉकों के लिए आधिकारिक grapesjs-blocks-basic प्लगइन।
• GrapesJS को उचित जीवनचक्र प्रबंधन के साथ एक Angular घटक में एकीकृत किया गया (ngAfterViewInit में प्रारंभ करना और ngOnDestroy में नष्ट करना)।
• आवश्यक विकल्पों के साथ GrapesJS कॉन्फ़िगर किया गया और ड्रैग करने योग्य सामग्री ब्लॉक प्रदान करने के लिए बेसिक ब्लॉक प्लगइन लोड किया।
• GrapesJS एपीआई का उपयोग करके पृष्ठ के HTML और CSS को निर्यात किया और इस डेटा को बैकएंड पर भेजने के लिए एक Angular सेवा लागू की।

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

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

हमें उम्मीद है कि यह ट्यूटोरियल मददगार था। हैप्पी कोडिंग, और Angular और GrapesJS के साथ भयानक पेज बिल्डरों के निर्माण का आनंद लें! 🚀