GrapesJS Angular:Angular के साथ एक विज़ुअल एडिटर बनाएं

स्टॉक GrapesJS बिल्ड - वह संपादक जो आपको मानक प्रीसेट के साथ 'grapesjs.init()' से मिलता है, इससे पहले कि कोई प्लगइन जोड़ा जाए। दाएं पैनल से एक ब्लॉक खींचें, उसका चयन करें, और स्टाइल मैनेजर में इसकी टाइपोग्राफी और रिक्ति को संपादित करें।

GrapesJS विज़ुअल एडिटिंग इंजन है। Angular एप्लिकेशन फ्रेमवर्क है। लगभग हर एकीकरण समस्या जो लोगों को मिलती है, वह उनमें से एक से दूसरे का काम करने की उम्मीद करने से आती है, इसलिए उनके बीच की रेखा के बारे में स्पष्ट होना उचित है।

Angular आपका आवेदन है। GrapesJS आपका विज़ुअल एडिटिंग इंजन है।

एक निर्भरता और एक स्टाइलशीट। GrapesJS अपने स्वयं के CSS को शिप करता है, और इसके बिना संपादक माउंट करता है लेकिन अनस्टाइल मार्कअप के रूप में प्रस्तुत करता है - जो कि पहला एकीकरण टूटा हुआ दिखने का सबसे आम कारण है।

1 - निर्भरता जोड़ें

2 - स्टाइलशीट रजिस्टर करें

// angular.json → projects.<app>.architect.build.options
{
  "styles": [
    "src/styles.css",
    "node_modules/grapesjs/dist/css/grapes.min.css"
  ]
}

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

इससे पहले कि आप घटक लिखें

तीन फ़ाइलें, कुछ भी उत्पन्न नहीं हुआ, कुछ भी छिपा नहीं है। उन्हें Angular एप्लिकेशन में कॉपी करें और आपके पास एक मार्ग पर एक कार्यशील दृश्य संपादक है। इस पृष्ठ पर बाद में सब कुछ - भंडारण, संपत्ति, कस्टम घटक, प्लगइन्स - इस घटक के अतिरिक्त है, न कि इसका पुनर्लेखन।

// editor.component.ts
import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  ViewChild,
} from '@angular/core';
import grapesjs, { type Editor } from 'grapesjs';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrl: './editor.component.css',
})
export class EditorComponent implements AfterViewInit, OnDestroy {
  // Resolved by the time ngAfterViewInit runs — that is the whole reason
  // initialisation lives there and not in ngOnInit.
  @ViewChild('editorHost') private host!: ElementRef<HTMLDivElement>;

  private editor?: Editor;

  ngAfterViewInit(): void {
    this.editor = grapesjs.init({
      container: this.host.nativeElement,
      height: '100%',
      width: 'auto',
      fromElement: false,
      // No persistence yet. Wire your own API before shipping — see Storage.
      storageManager: false,
      blockManager: {
        blocks: [
          {
            id: 'section',
            label: 'Section',
            category: 'Layout',
            content: '<section class="section"><h2>Headline</h2></section>',
          },
          {
            id: 'text',
            label: 'Text',
            category: 'Basic',
            content: { type: 'text', content: 'Edit me' },
          },
          { id: 'image', label: 'Image', category: 'Basic', content: { type: 'image' } },
        ],
      },
    });
  }

  ngOnDestroy(): void {
    // GrapesJS owns DOM nodes, document listeners and an undo stack. Angular
    // removes the host element; only destroy() releases the rest.
    this.editor?.destroy();
    this.editor = undefined;
  }
}

<!-- editor.component.html -->
<!-- GrapesJS takes this element over completely. Do not render Angular
     content inside it — the editor owns everything below #editorHost. -->
<div class="editor-shell">
  <div #editorHost class="editor-host"></div>
</div>

/* editor.component.css */
.editor-shell {
  display: block;
  block-size: 100dvh;
}

/* GrapesJS measures its container at init. A host with no resolved height
   produces an editor that mounts successfully and renders nothing. */
.editor-host {
  block-size: 100%;
}

यही संपूर्ण एकीकरण है। फिर से पढ़ने लायक हिस्से दो जीवनचक्र हुक हैं: ngAfterViewInit में आरंभीकरण क्योंकि कंटेनर को पहले मौजूद होना चाहिए, और destroy() ngOnDestroy में क्योंकि Angular होस्ट तत्व को हटाने से दस्तावेज़ से जुड़ा GrapesJS जारी नहीं होता है।

संपादक को अपने मार्ग पर लोड करें

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

// app.routes.ts — the editor is the heaviest route in the app. Load it last.
import type { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', loadComponent: () => import('./home/home.component').then((m) => m.HomeComponent) },
  {
    path: 'pages/:id/edit',
    loadComponent: () => import('./editor/editor.component').then((m) => m.EditorComponent),
  },
];

संपादक का जीवनकाल घटक से बंधा होना चाहिए। चार टुकड़े उस काम को करते हैं, और उनमें से प्रत्येक गायब होने पर पहचानने योग्य तरीके से विफल हो जाता है।

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

// editor.component.ts (excerpt)
import { Component, NgZone, inject, signal } from '@angular/core';

export class EditorComponent {
  private readonly zone = inject(NgZone);

  readonly selectedTag = signal('');
  readonly savedAt = signal<Date | null>(null);

  private mount(host: HTMLElement): void {
    // The canvas fires pointer events continuously while a block is being
    // dragged. Creating the editor outside the zone keeps those from
    // scheduling a change-detection pass on every frame.
    this.zone.runOutsideAngular(() => {
      const editor = grapesjs.init({ container: host, height: '100%' });

      // Re-enter only where editor state has to become Angular state.
      editor.on('component:selected', (component) => {
        this.zone.run(() => this.selectedTag.set(component.get('tagName') ?? ''));
      });

      editor.on('storage:end:store', () => {
        this.zone.run(() => this.savedAt.set(new Date()));
      });

      this.editor = editor;
    });
  }
}

// Zoneless applications (provideZonelessChangeDetection) have no zone to
// leave. Set signals from the same editor events and drop NgZone entirely.

• NgZone.runOutsideAngular() के अंदर संपादक बनाएं ताकि कैनवास गतिविधि परिवर्तन का पता लगाने को प्रेरित न करे।
• केवल उन हैंडलर्स में NgZone.run() के साथ पुनः दर्ज करें जहां संपादक स्थिति को Angular स्थिति बनना है - एक चयन, एक सेव टाइमस्टैम्प, एक सत्यापन त्रुटि।
• यदि आपके UI में कुछ भी संपादक की स्थिति को दर्शाता नहीं है, तो आपको कभी भी फिर से प्रवेश करने की आवश्यकता नहीं है।
• एक ज़ोनलेस एप्लिकेशन (provideZonelessChangeDetection) में छोड़ने के लिए कोई क्षेत्र नहीं है: एक ही संपादक घटनाओं से संकेतों को लिखें और NgZone को पूरी तरह से छोड़ दें।

संपादक ब्राउज़र में चलता है। GrapesJS वास्तविक DOM से अपना कैनवास बनाता है - यह तत्वों को मापता है, एक iframe बनाता है और दस्तावेज़ श्रोताओं को संलग्न करता है - इसलिए आरंभीकरण ब्राउज़र संदर्भ में होना चाहिए और सर्वर रेंडर के दौरान नहीं चलना चाहिए। वे मार्ग जो केवल प्रकाशित आउटपुट प्रदर्शित करते हैं, अप्रभावित हैं: यह सादा HTML और CSS है और सर्वर पर किसी और चीज़ की तरह रेंडर करता है।

// editor.component.ts — browser-only initialisation
import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  PLATFORM_ID,
  ViewChild,
  inject,
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import type { Editor } from 'grapesjs';

export class EditorComponent implements AfterViewInit, OnDestroy {
  @ViewChild('editorHost') private host!: ElementRef<HTMLDivElement>;

  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  private editor?: Editor;

  async ngAfterViewInit(): Promise<void> {
    if (!this.isBrowser) return;

    // A dynamic import keeps the editor out of the server bundle and off the
    // critical path of every route that never opens it.
    const { default: grapesjs } = await import('grapesjs');
    this.editor = grapesjs.init({ container: this.host.nativeElement });
  }

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

• गार्ड आरंभीकरण इसलिए यह केवल ब्राउज़र में चलता है - प्लेटफ़ॉर्म चेक और नीचे रेंडर हुक दोनों ऐसा करते हैं।
• लाइब्रेरी को गतिशील रूप से आयात करें ताकि यह कभी भी सर्वर बंडल में प्रवेश न करे।
• सर्वर पास के दौरान एक ही आकार के प्लेसहोल्डर को रेंडर करें ताकि संपादक के प्रकट होने पर लेआउट शिफ्ट से बचा जा सके।
• उन मार्गों को प्रकाशित करें जो केवल संग्रहीत HTML और CSS को प्रस्तुत करते हैं, उन्हें किसी गार्ड की आवश्यकता नहीं है।

रेंडर-हुक विकल्प

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

// The same guard, expressed with the render hook instead of a platform check.
import { Component, ElementRef, afterNextRender, viewChild } from '@angular/core';
import type { Editor } from 'grapesjs';

@Component({ selector: 'app-editor', template: '<div #editorHost></div>' })
export class EditorComponent {
  private readonly host = viewChild.required<ElementRef<HTMLDivElement>>('editorHost');
  private editor?: Editor;

  constructor() {
    // afterNextRender callbacks run on browser platforms only — they never
    // execute on the server, so no isPlatformBrowser check is needed.
    afterNextRender(async () => {
      const { default: grapesjs } = await import('grapesjs');
      this.editor = grapesjs.init({ container: this.host().nativeElement });
    });
  }
}

चुनने से पहले जांचें कि आपका Angular संस्करण इनमें से किसका समर्थन करता है। दोनों पैटर्न एक ही नियम को लागू करने के लिए मौजूद हैं - संपादक ब्राउज़र में इनिशियलाइज़ करता है और कहीं और नहीं। angular.dev

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

• GrapesJS

  कैंवस

  संपादन योग्य सतह, अपने स्वयं के iframe में प्रस्तुत की गई है ताकि पृष्ठ शैलियाँ आपके व्यवस्थापक UI में लीक न हो सकें।

• GrapesJS

  अवयव

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

• GrapesJS

  ब्लॉक प्रबंधक

  पैलेट उपयोगकर्ता खींचते हैं। एक ब्लॉक एक घटक प्रकार में मैप की गई सामग्री का एक नामित टुकड़ा है।

• GrapesJS

  शैली प्रबंधक

  CSS संपादन पैनल, कॉन्फ़िगर करने योग्य है कि किसी दिए गए उपयोगकर्ता को किस गुण को बदलने की अनुमति है।

• Plugin

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

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

• आपका Angular ऐप

  भंडारण प्रबंधक

  लोड करें और सहेजें। GrapesJS अनुबंध को परिभाषित करता है और आपके API को कॉल करता है - दृढ़ता ही आपके आवेदन का है।

• GrapesJS

  आदेश

  नामित, कॉल करने योग्य क्रियाएं — पूर्ववत करें, पूर्वावलोकन करें, निर्यात करें, और कुछ भी जो आप टूलबार बटन के लिए स्वयं को पंजीकृत करते हैं।

• GrapesJS

  डिवाइस मैनेजर

  कैनवास के उत्तरदायी ब्रेकपॉइंट का पूर्वावलोकन और स्टाइल किया जा सकता है।

• GrapesJS

  पैनलों

  संपादक का अपना क्रोम - बटन, टूलबार और क्षेत्र, सभी बदली जा सकती हैं यदि संपादक मौजूदा शेल के अंदर बैठता है।

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

तीन कलाकृतियाँ, और उन्हें मिलाने से वास्तविक डेटा हानि होती है। प्रोजेक्ट डेटा संपादन योग्य दस्तावेज़ है; HTML और CSS प्रकाशित परिणाम हैं। वे विनिमेय नहीं हैं, क्योंकि निर्यात डिजाइन द्वारा हानिपूर्ण है।

// Three outputs, three different jobs. Do not use one where you need another.

const projectData = editor.getProjectData(); // editable state → store this
const html = editor.getHtml();               // markup         → publish this
const css = editor.getCss();                 // styles         → publish this

// Reopening a saved project restores components, styles, pages and assets.
// Re-parsing exported HTML does not — it loses everything not in the markup.
editor.loadProjectData(projectData);

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

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

// Assets go to your endpoint, under your auth — GrapesJS only POSTs files.
grapesjs.init({
  container: host,
  assetManager: {
    upload: `/api/projects/${projectId}/assets`,
    uploadName: 'files',
    multiUpload: true,
    credentials: 'include',
    headers: { 'X-Requested-With': 'XMLHttpRequest' },
    // Off by default is the safer choice: base64 images end up inside saved
    // markup and make every page row grow without limit.
    embedAsBase64: false,
    // Returning false aborts the upload before the request leaves the browser.
    beforeUpload: (files: File[]) =>
      files.every((file) => file.size <= MAX_UPLOAD_BYTES && ALLOWED_TYPES.has(file.type)),
  },
});

editor.on('asset:upload:start', () => this.uploading.set(true));
editor.on('asset:upload:end', () => this.uploading.set(false));
editor.on('asset:upload:error', (error) => this.uploadError.set(String(error)));

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

इनमें से कोई भी एक विशेष बैकएंड निर्धारित नहीं करता है। S3, Cloudinary, एक लारवेल डिस्क या सर्वर पर एक फ़ोल्डर सभी एक ही अनुबंध को पूरा करते हैं: एक फ़ाइल स्वीकार करें, एक यूआरएल लौटाएं।

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

// pricing-table.type.ts — an application-specific building block.
import type { Editor } from 'grapesjs';

export function registerPricingTable(editor: Editor): void {
  editor.Components.addType('pricing-table', {
    // Lets the editor recognise the type again when a saved page is reparsed.
    isComponent: (el) => el.classList?.contains('pricing-table'),
    model: {
      defaults: {
        tagName: 'section',
        attributes: { class: 'pricing-table' },
        droppable: false,
        // Traits become the right-hand settings panel for this component.
        traits: [
          { type: 'text', name: 'plan', label: 'Plan name' },
          { type: 'number', name: 'price', label: 'Price' },
          { type: 'checkbox', name: 'featured', label: 'Highlight' },
        ],
        components: `
          <h3 data-gjs-type="text">Team</h3>
          <p data-gjs-type="text">$29 / month</p>
        `,
      },
    },
  });

  // A block is how the component reaches the user: one entry in the palette.
  editor.Blocks.add('pricing-table', {
    label: 'Pricing table',
    category: 'Commerce',
    content: { type: 'pricing-table' },
  });
}

विशिष्ट अनुप्रयोग-विशिष्ट घटक

• Hero अनुभाग
• मूल्य निर्धारण तालिका
• उत्पाद कार्ड
• फार्म
• नेविगेशन
• प्रशंसापत्र
• फ़ीचर ग्रिड
• आपके लिए कुछ भी विशिष्ट SaaS

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

एक प्लगइन एक फ़ंक्शन है जो संपादक उदाहरण प्राप्त करता है, इसलिए यहां कुछ भी Angular-विशिष्ट नहीं है - GrapesJS के लिए प्रकाशित कुछ भी Angular घटक के अंदर काम करता है। ये चार अंतराल हैं जो संपादक माउंट के बाद पहले टीमें हिट करती हैं।

ब्लॉक और प्रीसेट

उपयोगकर्ता क्या खींचते हैं। एक नंगे संपादक के पास पैलेट में लगभग कुछ भी नहीं होता है, इसलिए यह पहली चीज है जो हर एकीकरण जोड़ता है।

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

Plugin Basic Blocks

शुरुआती पैलेट - ब्लॉक एक नया संपादक पहली बार चलाने पर गायब है।

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

Grapesjs Tailwind

संपादक में Tailwind कक्षाएं, यदि आपका Angular ऐप पहले से ही Tailwind शिप करता है।

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

GrapesJS Bootstrap v5 Blocks

Bootstrap 5 घटकों को खींचने योग्य ब्लॉक के रूप में देखें।

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

Super Header for GrapesJS

हाथ से निर्मित मार्कअप के बजाय कॉन्फ़िगर करने योग्य हेडर अनुभाग।

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

भंडारण और परियोजनाएं

दृढ़ता, autosave और बहु-परियोजना प्रबंधन - ऊपर के अनुभाग से भंडारण अनुबंध के चारों ओर की परत।

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

Grapesjs Project Manager

एक संपादक में कई परियोजनाएँ, एक परियोजना सूची UI के साथ।

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

IndexedDB Storage

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

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

Autosave & Restore — Crash Recovery for GrapesJS

दुर्घटना या आकस्मिक नेविगेशन के बाद सहेजे न गए कार्य को पुनर्प्राप्त करता है।

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

Directus Storage

भंडारण एक bespoke समापन बिंदु के बजाय एक Directus उदाहरण द्वारा समर्थित।

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

समृद्ध पाठ और रूप

बेहतर इनलाइन टेक्स्ट एडिटिंग और वास्तविक फॉर्म घटक। दोनों ऐसी क्षमताएं हैं जो उपयोगकर्ता मानते हैं कि वे अंतर्निहित हैं।

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

GrapesJS Inline Text Editor — Compatible with CKEditor 5

अंतर्निहित समृद्ध टेक्स्ट एडिटर को CKEditor 5 से बदल देता है।

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

TinyMCE 8 Inline Text Editor

अंतर्निहित समृद्ध टेक्स्ट एडिटर को TinyMCE 6 से बदल देता है।

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

Grapesjs RTE Extensions

डिफ़ॉल्ट रिच टेक्स्ट टूलबार पर अतिरिक्त स्वरूपण नियंत्रण.

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

Plugin Forms

वास्तविक इनपुट, सत्यापन traits और सबमिशन सेटिंग्स के साथ घटकों को बनाएं।

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

संपत्ति, निर्यात और ईमेल

मीडिया प्रदाता, निर्यात प्रारूप और ईमेल प्रीसेट, उन सतहों के लिए जिनमें एक बिल्डर बढ़ता है।

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

Grapesjs Cloudinary

Cloudinary परिसंपत्ति बैकएंड के रूप में, जिसमें परिवर्तन भी शामिल हैं।

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

Export Zip

पृष्ठ को ZIP, HTML, CSS और संपत्ति के रूप में निर्यात करता है।

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

MJML Preset

MJML ब्लॉक करता है ताकि वही संपादक ईमेल-सुरक्षित मार्कअप तैयार कर सके।

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

Grapesjs A11Y Seo — Accessibility auditor + SEO for GrapesJS

अभिगम्यता और SEO संपादक के अंदर जांच, किसी पृष्ठ के प्रकाशित होने से पहले।

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

Angular में एक विज़ुअल एडिटर बनाना संभव है - यह एक ज्ञात मात्रा में काम है, असंभव नहीं। सवाल यह है कि आप उत्पाद के जीवनकाल के लिए इसके कौन से हिस्से रखना चाहते हैं।

"बिल्ड" कोई आलोचना नहीं है - इनमें से हर एक निर्माण योग्य है। यह एक बयान है कि बाद में इसे कौन बनाए रखता है।
इस तालिका में तथ्यों को फिर से सत्यापित किया गया 2026-09-02।

नहीं, और यह समझने योग्य है कि सवाल क्यों आता है। GrapesJS एक आधिकारिक React रैपर प्रकाशित करता है, इसलिए डेवलपर्स यथोचित रूप से Angular समकक्ष की उम्मीद करते हैं। एक नहीं है। यह तीन दृष्टिकोण छोड़ देता है, और अधिकांश टीमों के लिए पहला सही उत्तर है।

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

1. 01

   Angular आवेदन

   शेल, राउटर, और एक आलसी-लोड किया गया मार्ग जो संपादक का मालिक है।

   • ऐप शेल
   • राउटर
   • संपादक मार्ग (आलसी)
   ↓
2. 02

   GrapesJS उदाहरण

   एक बार कॉन्फ़िगर किया गया, आरंभीकरण पर: कौन से घटक मौजूद हैं, क्या खींचा जा सकता है, क्या स्टाइल किया जा सकता है।

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

   आवेदन सेवाएं

   संपादक और आपके Angular के बीच API परत - और एकमात्र स्थान प्राधिकरण निर्णय क्लाइंट-साइड किए जाते हैं।

   • प्रमाणीकरण
   • API ग्राहक
   • अनुमतियां
   • प्रकाशन-व्‍यवसाय
   ↓
4. 04

   बैकएंड

   कलाकृतियां कहां रहती हैं, और जहां हर अनुमति वास्तविक रूप से लागू की जाती है।

   • परियोजनाओं
   • संपत्ति
   • उपयोगकर्ता
   • संस्करणों

इस आरेख में दूसरे स्तर को छोड़कर कुछ भी GrapesJS-विशिष्ट नहीं है। यही बात है: संपादक एक साधारण Angular एप्लिकेशन में एक घटक है, और बाकी वह आर्किटेक्चर है जिसे आपने वैसे भी बनाया होगा।

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

बारह चीजें जो एक मार्ग से एक कार्यशील डेमो को अलग करती हैं, वास्तविक उपयोगकर्ताओं को दी जा सकती हैं।

1. ✓

   GrapesJS स्थापित करें

   निर्भरता जोड़ी गई और स्टाइलशीट पंजीकृत, विश्व स्तर पर या संपादक घटक में।

   अनुभाग पढ़ें
2. ✓

   दृश्य निर्माण के बाद प्रारंभ करें

   grapesjs.init() ngAfterViewInit में चलता है, एक हल की गई ऊंचाई वाले कंटेनर के खिलाफ।

   अनुभाग पढ़ें
3. ✓

   संपादक को सही ढंग से नष्ट करें

   editor.destroy() में ngOnDestroy, बिना लीक के दूर और वापस नेविगेट करके सत्यापित किया जाता है।

   अनुभाग पढ़ें
4. ✓

   केवल ब्राउज़र आरंभीकरण को संभालें

   संरक्षित इसलिए सर्वर रेंडर के दौरान कुछ भी नहीं चलता है, इसके स्थान पर एक प्लेसहोल्डर होता है।

   अनुभाग पढ़ें
5. ✓

   स्टोरेज कनेक्ट करें

   एक नामित भंडारण पंजीकृत, autosave ट्यून किया गया, और प्रोजेक्ट JSON HTML और CSS के साथ संग्रहीत किया गया।

   अनुभाग पढ़ें
6. ✓

   एसेट कॉन्फ़िगर करें

   अपलोड आपके समापन बिंदु पर इंगित किया गया है, base64 एम्बेडिंग बंद, दोनों तरफ सत्यापन।

   अनुभाग पढ़ें
7. ✓

   कस्टम घटक जोड़ें

   आपके उत्पाद के अपने बिल्डिंग ब्लॉक्स traits और पैलेट प्रविष्टियों के साथ प्रकारों के रूप में पंजीकृत हैं।

   अनुभाग पढ़ें
8. ✓

   अपनी ज़रूरत के प्लगइन्स जोड़ें

   Blocks, समृद्ध पाठ और निर्यात को संचित करने के बजाय जानबूझकर चुना गया।

   अनुभाग पढ़ें
9. ✓

   अनुमतियाँ लागू करें

   कौन संपादित कर सकता है, कौन प्रकाशित कर सकता है - सर्वर पर लागू, UI में परिलक्षित होता है।

   अनुभाग पढ़ें
10. ✓

    प्रकाशित सामग्री को सैनिटाइज़ करें

    किसी पृष्ठ को सहेजने और आगंतुकों को सेवा देने के बीच सर्वर-साइड सैनिटाइजेशन।

    अनुभाग पढ़ें
11. ✓

    मॉनिटर संपादक त्रुटियाँ

    Editor अपवादों को आपकी बाकी Angular त्रुटियों के समान स्थान पर रिपोर्ट किया गया है।

12. ✓

    उत्तरदायी संपादन का परीक्षण करें

    डिवाइस मैनेजर ने न केवल डेस्कटॉप ब्राउज़र विंडो में बल्कि टच डिवाइस पर व्यायाम किया।

    अनुभाग पढ़ें

ओपन-सोर्स विज़ुअल एडिटर से शुरुआत करें, इसे अपने Angular एप्लिकेशन से कनेक्ट करें, और इसे प्लगइन्स और अपने उत्पाद की ज़रूरत के एकीकरण के साथ विस्तारित करें।