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 प्लगइन्स आते हैं। नीचे दी गई प्रत्येक सूची एक वास्तविक उत्पाद है, जिसकी कीमत दिखाए गए अनुसार है।

ब्लॉक

समस्या: एक नए संपादक के पास एक खाली पैलेट होता है, और कोई भी नंगे <div> से एक पृष्ठ नहीं बनाता है।

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

ब्लॉक

Plugin Basic Blocks

प्रारंभिक पैलेट: कॉलम, टेक्स्ट, चित्र, लिंक और वीडियो, इसलिए कैनवास पहले दिन प्रयोग करने योग्य है।

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

ब्लॉक

Grapesjs Tailwind

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

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

ब्लॉक

GrapesJS Bootstrap v5 Blocks

Bootstrap उन टीमों के लिए 5 ग्रिड और घटक ब्लॉक जिनकी डिज़ाइन प्रणाली पहले से ही Bootstrap है।

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

ब्लॉक

Super Header for GrapesJS

एक हेडर को एक बार संपादित किया गया और प्रतियों को अलग करने के बजाय हर पृष्ठ पर पुनः उपयोग किया गया।

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

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

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

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

टेम्पलेट्स

Templates Manager

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

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

पेज

Pages Manager

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

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

ब्लॉक

Users Blocks

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

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

परियोजनाओं

Grapesjs Project Manager

संपादक के चारों ओर प्रोजेक्ट ब्राउज़िंग और प्रबंधन, एक समय में एक से अधिक चीजों पर काम करने वाली टीमों के लिए।

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

पाठ और प्रपत्र

समस्या: हर कोई मानता है कि समृद्ध पाठ और काम करने वाले रूप अंतर्निहित हैं। न तो बुनियादी बातों से परे है।

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

फार्म

Plugin Forms

इनपुट, चयन और सत्यापन traits के साथ घटकों को बनाएं, जो आपके समापन बिंदुओं पर सबमिट करने के लिए तैयार हैं।

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

RTE

GrapesJS Inline Text Editor — Compatible with CKEditor 5

उन टीमों के लिए अंतर्निहित समृद्ध टेक्स्ट एडिटर को CKEditor 5 से बदल देता है जिन्हें गंभीर टेक्स्ट एडिटिंग की आवश्यकता होती है।

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

RTE

TinyMCE 8 Inline Text Editor

वही, TinyMCE 6 के साथ - पारंपरिक CMS से आने वाले किसी भी व्यक्ति से परिचित है।

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

RTE

Grapesjs RTE Extensions

तृतीय-पक्ष निर्भरता जोड़े बिना डिफ़ॉल्ट रिच टेक्स्ट एडिटर पर अतिरिक्त स्वरूपण नियंत्रण।

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

भंडारण और उत्पादन

समस्या: प्रोटोटाइप जो कभी भी कुछ भी नहीं बना रहा, वह वह है जिसे कभी शिप नहीं किया गया।

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

भंडार

IndexedDB Storage

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

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

भंडार

Directus Storage

परियोजनाओं को Directus में संग्रहीत करता है, यदि हेडलेस बैकएंड पहले से ही आपके स्टैक का हिस्सा है।

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

निर्यातित माल

Export Zip

ZIP, HTML और संपत्ति के CSS के रूप में एक पृष्ठ डाउनलोड करता है - सबसे सरल संभव निर्यात पथ।

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

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

Grapesjs Netlify

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

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

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

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

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