GrapesJS लारवेल क्यों फिट बैठता है
GrapesJS एक फ्रेमवर्क-अज्ञेयवादी, एमआईटी-लाइसेंस प्राप्त संपादक है जो पूरी तरह से ब्राउज़र, इसलिए यह Laravel के साथ सफाई से जुड़ता है: Laravel संपादक पृष्ठ की सेवा करता है और सामग्री को लोड करने और संग्रहीत करने के लिए कुछ मार्गों को उजागर करता है, जबकि GrapesJS क्लाइंट पर ड्रैग-एंड-ड्रॉप यूआई। यह मार्गदर्शिका एक कार्यशील सेटअप बनाती है - एक ब्लेड दृश्य जो संपादक को होस्ट करता है, एक नियंत्रक जो सीएसआरएफ सुरक्षा के साथ सामग्री को बनाए रखता है, और एचटीएमएल/सीएसएस निर्यात।
1. ब्लेड दृश्य में GrapesJS लोड करें
सबसे तेज़ शुरुआत एक सीडीएन शामिल है। बनाना resources/views/editor.blade.php
और एक CSRF मेटा टैग जोड़ें ताकि सहेजें अनुरोध प्रमाणित कर सके।
<!doctype html>
<html>
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
</head>
<body>
<div id="gjs"><h1>Edit me in GrapesJS</h1></div>
<script src="https://unpkg.com/grapesjs"></script>
<script src="/js/editor.js"></script>
</body>
</html>बंडल एसेट पाइपलाइन पसंद करते हैं? npm install grapesjs और इसे आयात करें
सीडीएन के बजाय वाइट के माध्यम से - संपादक कोड समान है।
2. रिमोट स्टोरेज के साथ संपादक को इनिशियलाइज़ करें
में public/js/editor.js, मेटा टैग से CSRF टोकन पढ़ें और
स्टोरेज मैनेजर को लारवेल पर पोस्ट करने के लिए कॉन्फ़िगर करें।
const csrf = document
.querySelector('meta[name="csrf-token"]')
.getAttribute('content');
const editor = grapesjs.init({
container: '#gjs',
height: '100vh',
fromElement: true,
storageManager: {
type: 'remote',
stepsBeforeSave: 3,
options: {
remote: {
urlStore: '/editor/save',
urlLoad: '/editor/load',
headers: { 'X-CSRF-TOKEN': csrf },
},
},
},
});3. Laravel मार्ग और नियंत्रक जोड़ें
पृष्ठ के साथ-साथ लोड/स्टोर समापन बिंदुओं को पंजीकृत करें routes/web.php:
use App\Http\Controllers\EditorController;
Route::get('/editor', [EditorController::class, 'show']);
Route::get('/editor/load', [EditorController::class, 'load']);
Route::post('/editor/save', [EditorController::class, 'save']);नियंत्रक GrapesJS प्रोजेक्ट JSON (और वैकल्पिक रूप से प्रदान किए गए को संग्रहीत करता है HTML/CSS) एक मॉडल पर:
class EditorController extends Controller
{
public function show()
{
return view('editor');
}
public function load()
{
$page = Page::firstOrCreate(['key' => 'home']);
// GrapesJS expects the stored project data back as JSON.
return response()->json($page->project ?? []);
}
public function save(Request $request)
{
$data = $request->all();
Page::updateOrCreate(
['key' => 'home'],
[
'project' => $data, // full editable project
'html' => $data['gjs-html'] ?? null,
'css' => $data['gjs-css'] ?? null,
]
);
return response()->json(['status' => 'ok']);
}
}क्योंकि अनुरोध हेडर को X-CSRF-TOKEN वहन करता है, Laravel का
web मिडलवेयर समूह CSRF को अक्षम किए बिना POST स्वीकार करता है
हिफ़ाज़त। JSON/'json' कॉलम के रूप में स्टोर करें project ताकि यह राउंड-ट्रिप हो
साफ-सुथरा।
4. निर्यात किए गए पृष्ठ को प्रस्तुत करें
प्रकाशित करने के लिए, संग्रहीत HTML और CSS को Blade दृश्य में पढ़ें:
<style>{!! $page->css !!}</style>
{!! $page->html !!}संग्रहीत मार्कअप को केवल तभी विश्वसनीय मानें जब आपके संपादकों पर भरोसा किया जाए; सैनिटाइज़ करें आउटपुट यदि अंतिम उपयोगकर्ता पृष्ठों को संपादित कर सकते हैं।
आवश्यक शर्तें
आपको PHP 8.1+ और Laravel 10 या 11 एप्लिकेशन की आवश्यकता होगी। Node.js वैकल्पिक है - आप GrapesJS सीडीएन से लोड कर सकते हैं ब्लेड दृश्य, या इसे वाइट के माध्यम से बंडल कर सकते हैं यदि आप एक परिसंपत्ति पाइपलाइन पसंद करते हैं। कोई लारवेल-विशिष्ट GrapesJS पैकेज की आवश्यकता नहीं है; संपादक सादा ब्राउज़र JavaScript है जो HTTP पर आपके मार्गों से बात करता है। A ब्लेड, मार्गों, नियंत्रकों और सीएसआरएफ की कामकाजी समझ जहाज के लिए पर्याप्त है यह एकीकरण।
संपादक में कस्टम ब्लॉक जोड़ें
अपने संपादकों को ब्लॉक पंजीकृत करके कैनवास पर खींचने के लिए कुछ दें
ब्लॉक प्रबंधक के बाद grapesjs.init:
editor.BlockManager.add('hero', {
label: 'Hero section',
category: 'Sections',
content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});
editor.BlockManager.add('cta', {
label: 'Call to action',
category: 'Sections',
content: '<div class="cta"><a href="#">Get started</a></div>',
});उत्पादन-तैयार ब्लॉकों, प्रीसेट और भंडारण सहायकों के एक समृद्ध सेट के लिए, खींचें हाथ से सामान्य पैटर्न के पुनर्निर्माण के बजाय GJS.Market से प्लगइन्स।
प्रोजेक्ट को JSON कॉलम में स्टोर करें
पूर्ण संपादन योग्य परियोजना को जारी रखें ताकि एक पृष्ठ संपादक में ठीक उसी तरह फिर से खुल जाए जैसे वह था, और तेजी से सेवा करने के लिए प्रदान किए गए HTML/CSS को अपने स्वयं के कॉलम में रखें। A प्रवासन:
Schema::create('pages', function (Blueprint $table) {
$table->id();
$table->string('key')->unique();
$table->json('project')->nullable(); // full GrapesJS project
$table->longText('html')->nullable();
$table->longText('css')->nullable();
$table->timestamps();
});public function save(Request $request)
{
$data = $request->all();
Page::updateOrCreate(
['key' => 'home'],
[
'project' => $data,
'html' => $data['gjs-html'] ?? null,
'css' => $data['gjs-css'] ?? null,
]
);
Cache::forget('page:home'); // bust the published cache
return response()->json(['status' => 'ok']);
}सहेजें मार्ग को अधिकृत करें
CSRF जाली अनुरोधों से सुरक्षा करता है, लेकिन आपको अभी भी प्राधिकरण की आवश्यकता है सही उपयोगकर्ता किसी पृष्ठ को संपादित कर सकते हैं. नीति या मिडलवेयर के साथ मार्ग को गेट करें:
Route::post('/editor/save', [EditorController::class, 'save'])
->middleware(['auth', 'can:edit-pages']);प्रकाशित पृष्ठ को रेंडर करें (कैश्ड)
कैश से संग्रहीत HTML/CSS की सेवा करें ताकि विज़िटर कभी भी संपादक के रेंडर का भुगतान न करें लागत, और इसे बचाने पर अमान्य करें:
public function show()
{
$page = Cache::remember('page:home', 3600, fn () =>
Page::where('key', 'home')->first()
);
return view('page', ['page' => $page]);
}प्रदर्शन युक्तियाँ
GrapesJS केवल संपादक स्क्रीन पर लोड करें, साइट-व्यापी नहीं, और इसकी स्क्रिप्ट को स्थगित करें
यह कभी भी पहले पेंट को ब्लॉक नहीं करता है। प्रदान किए गए आउटपुट को कैश करें (Laravel कैश या CDN)
और इसे सेव करने पर बस्ट करें। यदि HTML को निर्यात या पोस्ट-प्रोसेसिंग भारी है, तो इसे एक पर धकेलें
कतारबद्ध कार्य इसलिए सहेजें अनुरोध तुरंत वापस आ जाता है। के रूप में स्टोर करें project
एक वास्तविक json/ कॉलमjsonb इसलिए आंशिक पढ़ता है सस्ता रहता है।
सुरक्षा के मनन
CSRF सुरक्षा चालू रखें - हेडर में X-CSRF-TOKEN टोकन भेजें
अक्षम करने के VerifyCsrfTokenबजाय . प्रत्येक राज्य-परिवर्तन को अधिकृत करें
रूट. अगर गैर-व्यवस्थापक पेज संपादित कर सकते हैं, तो स्टोर किए गए मार्कअप को अविश्वसनीय मानें: इसे सैनिटाइज़ करें
कच्चे HTML को प्रतिध्वनित करने के बजाय आउटपुट (उदाहरण mews/purifierके लिए) पर।
आने वाले पेलोड आकार को मान्य करें ताकि एक विशाल परियोजना स्मृति को समाप्त न कर सके।
सामान्य त्रुटियों का समस्या निवारण
419 पृष्ठ समाप्त होने का मतलब है कि CSRF टोकन गायब है - पुष्टि करें
csrf-token मेटा टैग मौजूद है और इस रूप में X-CSRF-TOKENभेजा जाता है।
एक अनस्टाइल कैनवास का मतलब है कि GrapesJS स्टाइलशीट लोड नहीं हुई।
एक खाली संपादक का आमतौर पर मतलब होता है कि कंटेनर चयनकर्ता मेल नहीं खाता था
पृष्ठ पर एक तत्व। 413 पेलोड बहुत बड़ा का मतलब परियोजना है
JSON आपके अपलोड/बॉडी लिमिट से अधिक है — बढ़ाएँ post_max_size या
फ्रेमवर्क सीमा।
लारवेल के साथ GrapesJS का उपयोग कब करें
GrapesJS तब फिट बैठता है जब आपके Laravel ऐप को आपके उपयोगकर्ताओं को एम्बेडेड विज़ुअल एडिटर की आवश्यकता होती है नियंत्रण — लैंडिंग पृष्ठ, ईमेल टेम्प्लेट, एक व्हाइट-लेबल पेज बिल्डर — द्वारा समर्थित आपका अपना डेटाबेस और आपके अपने बुनियादी ढांचे से सेवा की जाती है। सरल समृद्ध-पाठ के लिए एक फॉर्म फ़ील्ड के अंदर, एक हल्का WYSIWYG पर्याप्त है; पूर्ण-पृष्ठ रचना के लिए लेआउट, स्टाइलिंग और स्वच्छ HTML/CSS निर्यात के साथ, GrapesJS अधिक मजबूत है, एमआईटी-लाइसेंस प्राप्त, स्व-होस्टेड विकल्प।
उत्पादन युक्तियाँ
कुछ विकल्प Laravel + GrapesJS सेटअप उत्पादन-तैयार बनाते हैं। संपादक प्रोजेक्ट को एक json कॉलम (या PostgreSQL jsonb पर) में स्टोर करें ताकि यह दोषरहित रूप से राउंड-ट्रिप हो, और रेंडर / htmlcss कैश जो आउटपुट (Laravel कैश या एक CDN) प्रदान करता है और इसे सहेजने पर बस्ट करता है, इसलिए आगंतुक कभी भी संपादक पर प्रतीक्षा नहीं करते हैं। CSRF सुरक्षा चालू रखें - टोकन को अक्षम करने VerifyCsrfTokenके बजाय हेडर में X-CSRF-TOKEN भेजें। अंत में, यदि संपादकों पर भरोसा नहीं किया जा सकता है, तो कच्चे HTML को प्रतिध्वनित करने के बजाय आउटपुट (उदाहरण के लिएmews/purifier) पर संग्रहीत मार्कअप को साफ करें, क्योंकि GrapesJS ईमानदारी से जो कुछ भी चिपकाया गया था उसे संग्रहीत करता है।
अगले चरण
अपने डिज़ाइन सिस्टम से मेल खाने के लिए ब्लॉक और प्लगइन्स जोड़ें। संबंधित देखें GrapesJS + React और GrapesJS + Vue गाइड, ब्राउज़ करें स्टोरेज एडाप्टर प्लगइन्स और पूर्ण GrapesJS मार्केटप्लेस, या से शुरू करें GJS.Market होम पेज।
अक्सर पूछे जाने वाले प्रश्न
मैं GrapesJS सामग्री को Laravel बैकएंड में कैसे सहेजूं?
संग्रहण प्रबंधक को कॉन्फ़िगर type: 'remote' करें और बिंदु
urlStoreurlLoad Laravel मार्गों पर। CSRF टोकन भेजें
हेडर मेंX-CSRF-TOKEN, फिर HTML, CSS और प्रोजेक्ट को स्टोर करें
एक मॉडल पर JSON ।
क्या GrapesJS Laravel में बिल्ड स्टेप की आवश्यकता है?
नहीं। इसे सीडीएन से लोड करें ब्लेड सबसे सरल सेटअप के लिए दृश्य, या इसे इसके माध्यम से आयात करें Vite/Laravel मिक्स यदि आप एक बंडल पाइपलाइन पसंद करते हैं। संपादक सादा ब्राउज़र है JavaScript किसी भी तरह से।
जब GrapesJS Laravel पर पोस्ट करते हैं तो मैं CSRF को कैसे संभालूं?
अपने लेआउट में एक csrf-token मेटा टैग जोड़ें और इसके मान को इस प्रकार पास करें
X-CSRF-TOKEN भंडारण प्रबंधक headers में शीर्ष लेख
विकल्प। Laravel का वेब मिडलवेयर तब सेव अनुरोध स्वीकार करता है।