Angular पेज बिल्डर के साथ GrapesJS

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

पेज बिल्डर बनाने में कुछ Angular घटकों से कहीं अधिक समय लगता है। एक उत्पादन-तैयार विज़ुअल एडिटर को इनमें से हर एक की आवश्यकता होती है, इससे पहले कि कोई भी इसके साथ एक पेज शिप कर सके:

• खींचें और छोड़ें
• कैंवस
• अवयव
• ब्लॉक
• लेयरिंग
• शैलियों
• उत्तरदायी संपादन
• संपत्ति प्रबंधन
• टेम्पलेट्स
• परियोजना भंडारण
• निर्यातित माल
• प्रकाशन-व्‍यवसाय

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

GrapesJS कोर BSD-3-Clause लाइसेंस, संस्करण 0.23.6 के तहत खुला स्रोत है, जिसमें किसी भी पैमाने पर कोई लाइसेंस शुल्क नहीं है।

संपादक आपके एप्लिकेशन के अंदर एक मार्ग है, इसके लिए प्रतिस्थापन नहीं। संपादन परत के ऊपर सब कुछ ठीक वहीं रहता है जहां Angular टीमें पहले से ही इसे रखती हैं।

1. 01

   Angular आवेदन

   वह सब कुछ जो आपके उत्पाद को आपका बनाता है, अपरिवर्तित है।

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

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

   एक आलसी-भारित मार्ग, एक घटक जो कंटेनर का मालिक है, और एक सेवा जो संपादक उदाहरण का मालिक है।

   • संपादक मार्ग
   • संपादक घटक
   • संपादक सेवा
   ↓
3. 03

   GrapesJS

   दृश्य संपादन इंजन, आपके घटक द्वारा प्रदान किए जाने वाले कंटेनर के अंदर चल रहा है।

   • कैंवस
   • अवयव
   • ब्लॉक
   • लेयरिंग
   • शैलियों
   • संपत्ति
   • आदेश
   ↓
4. 04

   आपका बैकएंड

   जहां प्रोजेक्ट डेटा, अपलोड और प्रकाशित आउटपुट वास्तव में रहते हैं।

   • आपका API
   • आपका डेटाबेस
   • फ़ाइल भंडारण

Angular आपके एप्लिकेशन का मालिक है। GrapesJS दृश्य संपादन परत को शक्ति प्रदान करता है।

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

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

// Your content model, not a generic website element.
editor.Components.addType('pricing-table', {
  isComponent: (el) => el.dataset?.gjsType === 'pricing-table',
  model: {
    defaults: {
      tagName: 'section',
      droppable: false,
      traits: ['plan', 'currency', 'billingPeriod'],
    },
  },
});

editor.Blocks.add('pricing-table', {
  label: 'Pricing',
  category: 'Your design system',
  content: { type: 'pricing-table' },
});

एक संपादक जो लोग उपयोग करते हैं और जिसे वे छोड़ देते हैं, के बीच का अंतर आमतौर पर पहले दिन पैलेट में होता है।

GrapesJS एक प्रोजेक्ट को JSON पर क्रमबद्ध करता है और इसे स्टोरेज एडाप्टर को सौंप देता है। वह एडाप्टर जो करता है वह पूरी तरह से आपका है।

editor.Storage.add('angular-backend', {
  async load() {
    return firstValueFrom(this.http.get(`/api/pages/${this.pageId}`));
  },
  async store(data) {
    return firstValueFrom(this.http.put(`/api/pages/${this.pageId}`, data));
  },
});

grapesjs.init({
  container,
  storageManager: { type: 'angular-backend', autosave: true, stepsBeforeSave: 5 },
});

• परियोजना डेटा

  घटक, शैलियाँ, पृष्ठ और परिसंपत्तियाँ किसी JSON दस्तावेज़ के लिए क्रमबद्ध होती हैं, जिसे आप किसी भी स्तंभ या संग्रह में संग्रहीत कर सकते हैं.

• स्वतः सेव

  भंडारण प्रबंधक केवल एक स्पष्ट कार्रवाई के बजाय परिवर्तनों की एक कॉन्फ़िगर करने योग्य संख्या के बाद सहेज सकता है।

• रिमोट स्टोरेज

  एक कस्टम एडाप्टर और रूट लोड पंजीकृत करें और अपने स्वयं के इंटरसेप्टर और प्रमाणीकरण हेडर के साथ Angular के HttpClient के माध्यम से स्टोर करें।

• संस्करण

  क्योंकि प्रत्येक सेव एक दस्तावेज़ है, इतिहास रखना एक बैकएंड निर्णय है - संपादक को यह जानने की आवश्यकता नहीं है कि यह हुआ था।

• HTML/CSS आउटपुट

  प्रोजेक्ट JSON के साथ रेंडर किए गए मार्कअप को निर्यात करें जब आपके डिलीवरी पथ को री-रेंडर के बजाय स्थिर आउटपुट की आवश्यकता होती है।

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

  एक प्रकाशित पृष्ठ अपने स्वयं के जीवनचक्र के साथ एक अलग रिकॉर्ड है। इसे उस मसौदे से अलग रखें जिसे संपादक लिखता है।

आप नियंत्रित करते हैं कि प्रोजेक्ट डेटा कहाँ संग्रहीत किया जाता है।

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

प्रकाशित आउटपुट कहां जा सकता है

• CMS

  आउटपुट को वापस उस सामग्री प्रणाली में लिखें जो आपका संगठन पहले से चलाता है।

• REST API

  प्रोजेक्ट या रेंडर किए गए मार्कअप को किसी ऐसे एंडपॉइंट पर पोस्ट करें जो सत्यापन और अनुमतियों का मालिक हो.

• स्थैतिक प्रकाशन

  प्रकाशन समय पर पृष्ठों को फ़ाइलों में प्रस्तुत करें ताकि लाइव पृष्ठ संपादक के रनटाइम में से कोई भी न हो।

• कस्टम बैकएंड

  आउटपुट को उसी पथ के माध्यम से स्टोर, रूपांतरित और परोसें जो आपका एप्लिकेशन पहले से ही अपने पृष्ठों की सेवा के लिए उपयोग करता है।

• CDN

  प्रकाशित संपत्तियों और मार्कअप को किनारे पर धकेलें, कैश अमान्यता के साथ आप नियंत्रित करते हैं।

• कस्टम परिनियोजन

  अपने मौजूदा बिल्ड को ट्रिगर करें या प्रकाशन क्रिया से पाइपलाइन परिनियोजित करें.

GrapesJS संलेखन को संभालता है। आपका बुनियादी ढांचा प्रकाशन को संभाल सकता है।

आपके Angular एप्लिकेशन की एक तैनाती, एक संपादक, और इसमें प्रत्येक ग्राहक के लिए पृष्ठों की एक अलग दुनिया।

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

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

एक विज़ुअल एडिटर को अपने Angular उत्पाद के मूल भाग में बदलें।

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

1. 1

   पदासीन करना

   संपादक को अपने आवेदन में जोड़ें। यह एक सादा npm पैकेज है जिसमें कोई Angular-विशिष्ट बिल्ड चरण नहीं है।

2. 2

   एक संपादक सेवा बनाएँ

   संपादक इंस्टेंस को इंजेक्टेबल सेवा में रखें ताकि घटक पतला रहे और इंस्टेंस को साझा करना, मजाक उड़ाना और फाड़ना आसान हो।

3. 3

   ngAfterViewInit में प्रारंभ करें

   संपादक बनाने से पहले कंटेनर तत्व DOM में होना चाहिए, क्योंकि GrapesJS इसे तुरंत मापता है।

4. 4

   ngOnDestroy में सही ढंग से नष्ट करें

   मार्ग छोड़ने पर नष्ट करें को कॉल करें। इसके बिना संपादक अपने DOM श्रोताओं को रखता है और अगला नेविगेशन एक उदाहरण लीक करता है।

import { Injectable, NgZone, inject } from '@angular/core';
import grapesjs, { type Editor } from 'grapesjs';

@Injectable({ providedIn: 'root' })
export class PageBuilderService {
  private readonly zone = inject(NgZone);
  private editor?: Editor;

  create(container: HTMLElement): Editor {
    // GrapesJS binds its own DOM listeners to the canvas. Creating it outside
    // Angular keeps every drag frame from scheduling change detection.
    this.editor = this.zone.runOutsideAngular(() =>
      grapesjs.init({
        container,
        height: '100%',
        fromElement: false,
        storageManager: false,
      })
    );

    return this.editor;
  }

  destroy(): void {
    this.editor?.destroy();
    this.editor = undefined;
  }
}

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  inject,
  viewChild,
} from '@angular/core';
import { PageBuilderService } from './page-builder.service';

@Component({
  selector: 'app-page-builder',
  standalone: true,
  template: '<div #canvas class="builder"></div>',
  styles: '.builder { height: 100vh; }',
})
export class PageBuilderComponent implements AfterViewInit, OnDestroy {
  private readonly builder = inject(PageBuilderService);
  private readonly canvas = viewChild.required<ElementRef<HTMLElement>>('canvas');

  ngAfterViewInit(): void {
    // The container has to be in the DOM first: GrapesJS measures it on init.
    this.builder.create(this.canvas().nativeElement);
  }

  ngOnDestroy(): void {
    // Without this the editor keeps its listeners after the route changes.
    this.builder.destroy();
  }
}

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

editor.on('storage:end:store', () => {
  // Editor events fire outside Angular because the editor was created there.
  // Re-enter the zone before touching state the template renders.
  this.zone.run(() => this.lastSavedAt.set(new Date()));
});

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

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

import { PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export class PageBuilderComponent implements AfterViewInit {
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  ngAfterViewInit(): void {
    // There is no DOM on the server and GrapesJS needs one, so the editor is
    // created in the browser only. The rest of the route still renders on the
    // server as usual.
    if (!this.isBrowser) return;
    this.builder.create(this.canvas().nativeElement);
  }
}

एकीकरण साधारण Angular कोड है, जो इसके बारे में कहने लायक मुख्य बात है।

• TypeScript के अनुकूल

  संपादक अपनी स्वयं की प्रकार की परिभाषाएँ शिप करता है, इसलिए इंस्टेंस, उसका कॉन्फ़िगरेशन और उसके ईवेंट कॉल साइट पर टाइप किए जाते हैं।

• Angular जीवनचक्र

  निर्माण और टियरडाउन ngAfterViewInit और ngOnDestroy - घटक वृक्ष के बाहर कोई मैन्युअल बूटस्ट्रैपिंग नहीं।

• एओटी-संगत

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

• ब्राउज़र के लिए आरंभीकरण

  जहां SSR चलन में है, केवल संपादक निर्माण ब्राउज़र-संरक्षित है; बाकी घटक सामान्य रूप से संकलित और प्रस्तुत करता है।

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

प्लगइन कैटलॉग अस्थायी रूप से अनुपलब्ध है। इसे सीधे बाज़ार में ब्राउज़ करें।

दोनों कॉलम एक काम करने वाले बिल्डर के साथ समाप्त होते हैं। वे इस बात में भिन्न हैं कि आप अभी भी दो वर्षों में इसका कितना रखरखाव कर रहे हैं।

GrapesJS दृश्य संपादन नींव प्रदान करता है। GJS.Market प्लगइन्स आपको आंतरिक रूप से हर सुविधा का निर्माण करने के बजाय अतिरिक्त क्षमताओं के साथ अपने बिल्डर का विस्तार करने देते हैं।

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