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

हाँ। GrapesJS फ्रेमवर्क-अज्ञेयवादी है और इसे सीधे Vue 3 अनुप्रयोगों में एकीकृत किया जा सकता है। आप संपादक को Vue जीवनचक्र हुक के साथ प्रारंभ कर सकते हैं, संपादक इंस्टेंस को कंपोजेबल या घटक में रख सकते हैं, GrapesJS ईवेंट को अपने Vue एप्लिकेशन से कनेक्ट कर सकते हैं, और अपने स्वयं के बैकएंड के माध्यम से प्रोजेक्ट डेटा को बनाए रख सकते हैं।

इसे करने के दो तरीके

GrapesJS React के लिए एक आधिकारिक फ्रेमवर्क रैपर, @grapesjs/react प्रकाशित करता है। Vue परियोजना से कोई समतुल्य GrapesJS पैकेज नहीं है, इसलिए कोई भी Vue रैपर जो आपको npm पर मिलता है, वह एक सामुदायिक परियोजना है। इसे अपनाने से पहले इसकी Vue और GrapesJS सहकर्मी श्रेणियों की जाँच करें।

Vue 3 एक एप्लिकेशन फ्रेमवर्क है। GrapesJS एक विज़ुअल एडिटिंग इंजन है। वे विभिन्न समस्याओं को हल करते हैं, और एकीकरण ठीक से साफ है क्योंकि वे ओवरलैप नहीं होते हैं।

इनमें से पांच आपके हैं। बाकी पहले से मौजूद हैं, और शेष दो निर्माण के बजाय कॉन्फ़िगरेशन हैं।

एक निर्भरता। GrapesJS अपनी TypeScript परिभाषाएँ भेजता है, इसलिए जोड़ने के लिए कोई अलग @types पैकेज नहीं है।

इसे एक घटक में कॉपी करें और यह चलता है। इस खंड के बाद सब कुछ इसके अतिरिक्त है, न कि इसका पुनर्लेखन।

<template>
  <div ref="editorContainer" class="editor-shell"></div>
</template>

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

// A template ref: the name matches the ref="" attribute above.
const editorContainer = ref<HTMLDivElement | null>(null);

// shallowRef, not ref — see "Performance" further down the page.
const editor = shallowRef<Editor | null>(null);

onMounted(() => {
  if (!editorContainer.value) return;

  editor.value = grapesjs.init({
    container: editorContainer.value,
    height: '100%',
    fromElement: false,
    storageManager: false,
  });
});

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

<style scoped>
.editor-shell {
  height: 100vh;
}
</style>

संपूर्ण एकीकरण एक जीवनचक्र मानचित्रण है। Vue आपको बताता है कि DOM नोड कब मौजूद है और यह कब गायब होने वाला है; GrapesJS को बिल्कुल उन्हीं दो क्षणों की आवश्यकता है।

ऊपर से नीचे पढ़ें, यह दो पुस्तकालयों के बीच का पूरा अनुबंध है।

सर्वर पर न तो onMounted और न ही onUnmounted चलता है, यही वजह है कि एक सादे Vue एसपीए को अतिरिक्त कुछ भी नहीं चाहिए। एक सर्वर-रेंडर किए गए ऐप को एक और गार्ड की आवश्यकता होती है - Nuxt अनुभाग इसे कवर करता है।

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

// composables/useGrapesJS.ts
import { onMounted, onUnmounted, shallowRef, type Ref } from 'vue';
import grapesjs, { type Editor, type EditorConfig } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

type EditorOptions = Omit<EditorConfig, 'container'>;

export function useGrapesJS(
  container: Ref<HTMLElement | null>,
  options: EditorOptions = {},
) {
  const editor = shallowRef<Editor | null>(null);

  const init = (): Editor | undefined => {
    if (editor.value || !container.value) return;

    editor.value = grapesjs.init({
      container: container.value,
      height: '100%',
      fromElement: false,
      storageManager: false,
      ...options,
    });

    return editor.value;
  };

  const destroy = (): void => {
    editor.value?.destroy();
    editor.value = null;
  };

  onMounted(init);
  onUnmounted(destroy);

  return { editor, init, destroy };
}

<template>
  <div ref="editorContainer" class="editor-shell"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useGrapesJS } from '~/composables/useGrapesJS';

const editorContainer = ref<HTMLElement | null>(null);

const { editor } = useGrapesJS(editorContainer, {
  blockManager: {
    blocks: [
      {
        id: 'hero',
        label: 'Hero',
        category: 'Sections',
        content: '<section>…</section>',
      },
    ],
  },
});
</script>

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

GrapesJS संपादक स्थिति का प्रबंधन करता है। Vue आवेदन स्थिति का प्रबंधन करता है। घटनाएँ सीम हैं: उन कुछ की सदस्यता लें जो आपका UI वास्तव में प्रतिबिंबित करता है, और उन्हें सामान्य रेफ में लिखें।

import { onMounted, ref, shallowRef } from 'vue';
import type { Editor, Component } from 'grapesjs';

const isReady = ref(false);
const isDirty = ref(false);
const saveState = ref<'idle' | 'saving' | 'saved' | 'error'>('idle');
const selectedName = ref<string | null>(null);

function bindEditorEvents(editor: Editor): void {
  editor.on('load', () => {
    isReady.value = true;
  });

  editor.on('component:selected', (component: Component) => {
    selectedName.value = component?.getName?.() ?? null;
  });

  editor.on('component:update', () => {
    isDirty.value = true;
  });

  editor.on('storage:start:store', () => {
    saveState.value = 'saving';
  });

  editor.on('storage:end:store', () => {
    saveState.value = 'saved';
    isDirty.value = false;
  });

  editor.on('storage:error', () => {
    saveState.value = 'error';
  });
}

आप जो प्रदर्शित करते हैं उसे मिरर करें, न कि संपादक के पास क्या है। घटक ट्री को Vue स्टोर में कॉपी करने से आपको सत्य के दो स्रोत और एक सिंक्रनाइज़ेशन बग मिलता है।

GrapesJS ब्राउज़र DOM APIs पर निर्भर करता है, इसलिए संपादक आरंभीकरण केवल ब्राउज़र संदर्भ में होना चाहिए। Nuxt में इसका मतलब है कि संपादक को सर्वर रेंडर से बाहर रखना - बाकी सब कुछ वही एकीकरण है जो आपके पास पहले से है।

<!-- pages/editor.vue -->
<template>
  <ClientOnly>
    <VisualEditor />

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

<!-- components/VisualEditor.client.vue -->
<template>
  <div ref="editorContainer" class="editor-shell"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useGrapesJS } from '~/composables/useGrapesJS';

// Reached only in the browser: the .client suffix keeps this
// component out of the server render, and onMounted never runs
// on the server anyway.
const editorContainer = ref<HTMLElement | null>(null);
const { editor } = useGrapesJS(editorContainer);
</script>

दो सही विकल्प

दोनों मान्य हैं, और वे गठबंधन करते हैं। GrapesJS द्वारा न तो आवश्यक है - GrapesJS की आवश्यकता केवल यह है कि init() वहां चलता है जहां दस्तावेज़ मौजूद है।

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

आज Vue 3 के लिए, ऊपर दिया गया कंपोजेबल रैपर है। यह बीस विषम पंक्तियाँ हैं, यह सीधे GrapesJS API का उपयोग करता है, और यह उस रिलीज़ के पीछे नहीं रह सकता जिस पर आप निर्भर हैं।

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

• Canvas

  संपादन योग्य सतह और उसके डिवाइस की चौड़ाई।

• Components

  आपके उपयोगकर्ता किस प्रकार रख सकते हैं, और उनके लक्षण।

• Blocks

  जिस पैलेट से वे खींचते हैं।

• Style Manager

  कौन से CSS गुण उजागर होते हैं, और किसके लिए।

• Asset Manager

  छवियाँ और मीडिया, आपके संग्रहण से।

• Storage Manager

  जहां प्रोजेक्ट डेटा लोड और सहेजा जाता है।

• Commands

  नामित क्रियाएं, आपके स्वयं के UI के लिए बाध्यकारी।

• Device Manager

  संपादन और आउटपुट के लिए उत्तरदायी ब्रेकपॉइंट।

• Plugins

  ऊपर सब कुछ, पैक और पुनः प्रयोज्य।

एक ही संपादक कोर, अलग तरह से कॉन्फ़िगर किया गया है। इनमें से प्रत्येक ब्लॉक का एक अलग सेट, एक अलग भंडारण लक्ष्य और एक अलग प्रकाशन चरण है।

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

1. User edits
2. ↓→
3. GrapesJS project data
4. ↓→
5. Your API / database
6. ↓→
7. HTML + CSS
8. ↓→
9. Preview / publish

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

// Editable state — store this, it is what the editor reloads.
const projectData = editor.getProjectData();

// Rendered output — regenerate this whenever you publish.
const html = editor.getHtml();
const css = editor.getCss();

await fetch(`/api/projects/${projectId}/publish`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ projectData, html, css }),
});

// Sanitize `html` on the server before it is served to anyone.

GrapesJS को परवाह नहीं है कि आपका बैकएंड क्या है। एक स्टोरेज एडाप्टर दो एसिंक फ़ंक्शन हैं - एक जो प्रोजेक्ट डेटा लौटाता है, एक जो इसे स्वीकार करता है - इसलिए संपादक आपके पास पहले से मौजूद API से बात करता है।

1. Vue
2. ↓→
3. GrapesJS storage
4. ↓→
5. REST API
6. ↓→
7. Backend
8. ↓→
9. Database

import grapesjs, { type ProjectData } from 'grapesjs';

// Wherever your app keeps it — a route param, a prop, a store.
const projectId = props.projectId;

const editor = grapesjs.init({
  container: editorContainer.value!,
  fromElement: false,
  storageManager: {
    type: 'app-api',
    autosave: true,
    stepsBeforeSave: 10,
  },
  // Registered as a plugin so the adapter exists before
  // GrapesJS performs its first load.
  plugins: [
    (ed) => {
      ed.Storage.add('app-api', {
        async load(): Promise<ProjectData> {
          const res = await fetch(`/api/projects/${projectId}`);
          if (!res.ok) {
            throw new Error(`Load failed: ${res.status}`);
          }
          return await res.json();
        },

        async store(data: ProjectData) {
          const res = await fetch(`/api/projects/${projectId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ projectData: data }),
          });
          if (!res.ok) {
            throw new Error(`Save failed: ${res.status}`);
          }
        },
      });
    },
  ],
});

प्लगइन्स सरणी के माध्यम से एडॉप्टर को पंजीकृत करना मायने रखता है: यह गारंटी देता है कि भंडारण GrapesJS द्वारा अपना पहला लोड करने से पहले मौजूद है।

परिसंपत्ति प्रबंधक एक समापन बिंदु पर UI है। इसे अपने और हर मौजूदा नियम पर इंगित करें - प्रमाणीकरण, सत्यापन, कोटा, CDN - लागू होता रहता है।

// Fetched from your own API before the editor is created.
const assets = await fetch('/api/assets').then((res) => res.json());

const editor = grapesjs.init({
  container: editorContainer.value!,
  assetManager: {
    assets,

    // Uploads go to your endpoint, with your auth and
    // your validation.
    upload: '/api/assets',
    uploadName: 'files',
    multiUpload: true,
    autoAdd: true,
    headers: { Authorization: `Bearer ${token.value}` },
    credentials: 'same-origin',

    // Reject what the backend would reject anyway,
    // before the round trip.
    beforeUpload: (files: File[]) => {
      const limit = 5 * 1024 * 1024;
      const tooBig = files.some((f) => f.size > limit);
      if (tooBig) {
        toast.error('Images must be under 5 MB');
        return false;
      }
    },
  },
});

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

import type { Editor } from 'grapesjs';

export function pricingCardPlugin(editor: Editor): void {
  editor.Components.addType('pricing-card', {
    isComponent: (el) => el.dataset?.gjsType === 'pricing-card',
    model: {
      defaults: {
        tagName: 'section',
        attributes: { 'data-gjs-type': 'pricing-card' },
        // Traits become the settings panel for this component.
        traits: [
          { type: 'text', name: 'plan', label: 'Plan name' },
          { type: 'text', name: 'price', label: 'Price' },
          { type: 'checkbox', name: 'featured', label: 'Featured' },
        ],
        components: `
          <h3 data-gjs-type="text">Starter</h3>
          <p data-gjs-type="text">$0 / month</p>
          <a href="#">Choose plan</a>
        `,
      },
    },
  });

  editor.Blocks.add('pricing-card', {
    label: 'Pricing card',
    category: 'Marketing',
    content: { type: 'pricing-card' },
  });
}

// Pass it to the editor like any other plugin:
// grapesjs.init({ container, plugins: [pricingCardPlugin] })

एक प्लगइन एक फ़ंक्शन है जो संपादक प्राप्त करता है - वही फ़ंक्शन हस्ताक्षर चाहे वह npm से आया हो, GJS.Market से, या आपके अपने भंडार से। उनमें से किसी को भी इस बात की परवाह नहीं है कि होस्ट एप्लिकेशन Vue है।

import grapesjs from 'grapesjs';
import basicBlocks from 'grapesjs-blocks-basic';
import { pricingCardPlugin } from '~/editor/pricing-card';

const editor = grapesjs.init({
  container: editorContainer.value!,
  plugins: [
    // Options go through a wrapper function: `pluginsOpts`
    // is keyed by string, so it only reaches plugins that
    // were passed to `plugins` by name.
    (ed) => basicBlocks(ed, { flexGrid: true }),
    pricingCardPlugin,
  ],
});

यह तर्क नहीं है कि इमारत गलत है - इमारत का क्या मतलब है इसकी एक सूची। प्रत्येक पंक्ति एक सबसिस्टम है जो मौजूद है चाहे आपने इसके लिए योजना बनाई हो या नहीं।

Vue आपको एप्लिकेशन फ्रेमवर्क देता है। GrapesJS आपको विज़ुअल एडिटिंग इंजन देता है।

संपादक उस पेड़ में एक पत्ता है, जड़ नहीं। इसके ऊपर सब कुछ कोड है जिसे आपने वैसे भी लिखा होगा।

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

Vue 2 पर समान एकीकरण mounted()() और onUnmounted() के बजाय mounted() और beforeDestroy() का उपयोग करता है; GrapesJS पक्ष अपरिवर्तित है। नए कार्य को Vue 3 को लक्षित करना चाहिए - इस पृष्ठ पर सब कुछ इसे मानता है।

आदेश मोटे तौर पर इस पृष्ठ द्वारा पेश किए गए क्रम से मेल खाता है।

1. ✓GrapesJS स्थापित करें
2. ✓माउंट के बाद इनिशियलाइज़ करें
3. ✓अनमाउंट पर नष्ट करें
4. ✓GrapesJS CSS आयात करें
5. ✓हैंडल SSR/क्लाइंट-ओनली निष्पादन
6. ✓प्रत्यक्ष एकीकरण बनाम आवरण तय करें
7. ✓जहां उपयोगी हो वहां पुनः प्रयोज्य कंपोजेबल बनाएं
8. ✓उन संपादक ईवेंट को कनेक्ट करें जिन्हें आपका UI दर्शाता है
9. ✓भंडारण कॉन्फ़िगर करें
10. ✓एसेट कॉन्फ़िगर करें
11. ✓कस्टम घटक जोड़ें
12. ✓अपने उत्पाद की ज़रूरत के प्लगइन्स जोड़ें
13. ✓अनुमतियाँ सर्वर-साइड लागू करें
14. ✓प्रकाशित सामग्री को सैनिटाइज करें
15. ✓उत्तरदायी संपादन का परीक्षण करें
16. ✓उत्पादन निर्माण का परीक्षण करें