GrapesJS 3 Nuxt क्यों फिट बैठता है
GrapesJS को DOM की आवश्यकता होती है, इसलिए Nuxt 3 में आप इसे onMounted
(केवल क्लाइंट) जबकि नाइट्रो सर्वर रूट बचत को संभालते हैं। यह मार्गदर्शिका माउंट करती है
संपादक, सामग्री को बनाए रखता है, और HTML/CSS निर्यात करता है।
1. संपादक क्लाइंट-साइड को माउंट करें
बनाएँ pages/editor.vue। GrapesJS को गतिशील रूप से अंदर आयात करें
onMounted इसलिए यह SSR के दौरान कभी नहीं चलता है।
<template>
<div>
<button @click="save">Save</button>
<div ref="el"><h1>Edit me in GrapesJS</h1></div>
</div>
</template>
<script setup>
import 'grapesjs/dist/css/grapes.min.css';
const el = ref(null);
let editor;
onMounted(async () => {
const grapesjs = (await import('grapesjs')).default;
editor = grapesjs.init({
container: el.value,
height: '100vh',
fromElement: true,
storageManager: false,
});
});
onBeforeUnmount(() => editor?.destroy());
async function save() {
await $fetch('/api/page', {
method: 'POST',
body: {
html: editor.getHtml(),
css: editor.getCss(),
project: editor.getProjectData(),
},
});
}
</script>2. नाइट्रो सर्वर मार्ग जोड़ें
बनाना server/api/page.post.ts:
export default defineEventHandler(async (event) => {
const data = await readBody(event);
await savePage('home', data); // your DB write
return { status: 'ok' };
});सहेजे गए प्रोजेक्ट को वापस करने के लिए एक मिलान server/api/page.get.ts जोड़ें,
फिर इसे फिर से खोलने के लिए init के बाद कॉल करें editor.loadProjectData(saved) ।
3. मार्कअप निर्यात करें
const html = editor.getHtml();
const css = editor.getCss();
// `<style>${css}</style>${html}`Nuxt 3 में आम नुकसान
Nuxt का एसएसआर सामान्य अपराधी है। सर्वर रेंडरिंग और थ्रो window is not defined के दौरान एक शीर्ष-स्तरीय import grapesjs from 'grapesjs' चलता है - इसे गतिशील रूप से अंदर onMountedआयात करें, या संपादक को लपेटें<ClientOnly>। सर्वर पर डीबी कोड रखते हुए, नाइट्रो सर्वर रूट server/api के माध्यम $fetchसे बने रहें। यदि कोई निर्भरता अभी भी निर्माण के दौरान शिकायत करती है, तो इसे में जोड़ें build.transpile nuxt.config। और कॉल editor.destroy() करें onBeforeUnmount ताकि मार्ग परिवर्तन संपादक के उदाहरणों को लीक न करें।
आवश्यक शर्तें
आपको Node.js 18+ और एक Nuxt 3 ऐप की आवश्यकता होगी। कोई Nuxt-विशिष्ट GrapesJS पैकेज नहीं है
आवश्यक - संपादक केवल ब्राउज़र है और नाइट्रो सर्वर मार्ग बचत को संभालते हैं।
कंपोजिशन एपीआई से परिचित होना, onMounted, और
server/api मार्ग पर्याप्त हैं।
संपादक में कस्टम ब्लॉक जोड़ें
इनिट (अंदर) onMountedके बाद ब्लॉक मैनेजर के साथ ड्रैग करने योग्य ब्लॉक पंजीकृत करें:
editor.BlockManager.add('hero', {
label: 'Hero section',
category: 'Sections',
content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});एक समृद्ध सेट के लिए तैयार ब्लॉक पुस्तकालयों और प्रीसेट को GJS.Market से खींचें।
भंडारण गहरा-गोता: नाइट्रो मार्ग
नाइट्रो सर्वर मार्गों के माध्यम से बने रहें ताकि डीबी कोड सर्वर पर रहे:
// server/api/page.post.ts
export default defineEventHandler(async (event) => {
const data = await readBody(event);
await savePage('home', data);
return { status: 'ok' };
});
// server/api/page.get.ts returns the saved project; then
// editor.loadProjectData(saved) after init reopens it.प्रदर्शन युक्तियाँ
GrapesJS को गतिशील रूप से अंदर onMounted आयात करें ताकि यह बाहर रहे
सर्वर रेंडर पथ और मुख्य बंडल, और कॉल editor.destroy() इन करें
onBeforeUnmount इसलिए मार्ग परिवर्तन उदाहरणों को लीक नहीं करते हैं। यदि कोई निर्भरता
निर्माण समय पर शिकायत करता है, इसे में जोड़ें build.transpile
nuxt.config.
सुरक्षा के मनन
लिखने से पहले नाइट्रो सेव मार्ग को प्रमाणित और अधिकृत करें। सैनिटाइज संग्रहीत आउटपुट पर मार्कअप यदि गैर-व्यवस्थापक संपादित कर सकते हैं। पेलोड आकार को इतना बड़ा मान्य करें प्रोजेक्ट मेमोरी को समाप्त नहीं कर सकता है।
सामान्य त्रुटियों का समस्या निवारण
"विंडो परिभाषित नहीं है" का अर्थ है GrapesJS SSR के दौरान चलाया गया - इसे आयात करें
गतिशील रूप से अंदर या onMounted संपादक को लपेटें
<ClientOnly>. निर्भरता के बारे में एक बिल्ड त्रुटि
आमतौर पर इसे build.transpileजोड़कर तय किया जाता है। एक अनस्टाइल
या खाली कैनवास का मतलब है कि स्टाइलशीट लोड नहीं हुई या रेफरी तैयार नहीं था।
Nuxt 3 के साथ GrapesJS का उपयोग कब करें
GrapesJS फिट बैठता है जब आपका Nuxt ऐप एक वास्तविक विज़ुअल पेज या ईमेल बिल्डर को एम्बेड करता है उपयोगकर्ता अपने स्वयं के संग्रहण और HTML आउटपुट के साथ नियंत्रण करते हैं। इनलाइन रिच टेक्स्ट के लिए, एक हल्का संपादक पर्याप्त है; लेआउट, स्टाइल और साफ के साथ पूर्ण-पृष्ठ रचना के लिए निर्यात, GrapesJS मजबूत, एमआईटी-लाइसेंस प्राप्त, स्व-होस्टेड विकल्प है।
अगले चरण
संबंधित GrapesJS + Vue और देखें GrapesJS + Svelte गाइड, ब्राउज़ करें GrapesJS बाज़ार, या से शुरू करें GJS.Market होम पेज।
अक्सर पूछे जाने वाले प्रश्न
क्या GrapesJS Nuxt 3 SSR के साथ काम करता है?
हाँ - इसे onMounted इनिशियलाइज़ करें या इसे लपेटें
<ClientOnly> इसलिए यह केवल ब्राउज़र में चलता है।
मैं Nuxt 3 में GrapesJS सामग्री कैसे सहेजूँ?
एक नाइट्रो मार्ग के साथ $fetch परियोजना डेटा पोस्ट करें
server/api.
"विंडो परिभाषित नहीं है" के साथ मेरा निर्माण विफल क्यों होता है?
GrapesJS मॉड्यूल शीर्ष स्तर पर आयात किया जा रहा है और एसएसआर के दौरान चल रहा है। इसे आयात करें
इसके बजाय गतिशील रूप से अंदर onMounted ।