WordPress ब्लॉक के साथ सामग्री संपादन को आधुनिक बनाने के लिए Gutenberg पेश किया है, और कई वेबसाइटों के लिए यह अच्छी तरह से काम करता है। लेकिन अगर आप एक कस्टम पेज बिल्डर, एक SaaS संपादक, या पूर्ण HTML/CSS नियंत्रण के साथ एक विज़ुअल टूल बना रहे हैं, तो Gutenberg अक्सर समाधान के बजाय एक सीमा बन जाती है।
यह वह जगह है जहां GrapesJS तस्वीर में प्रवेश करता है।
इस लेख में, हम GrapesJS बनाम Gutenbergकी तुलना करेंगे, समझाएं कि प्रत्येक कब समझ में आता है, और फिर GrapesJS का उपयोग करके एक कस्टम WordPress पेज बिल्डर बनाने के लिए एक वास्तविक दुनिया, उत्पादन-तैयार दृष्टिकोण के माध्यम से चलें।
यह मार्गदर्शिका इसके लिए लिखी गई है:
- WordPress डेवलपर्स और एजेंसियां
- फ्रंटएंड इंजीनियर
- SaaS बिल्डर्स पेज, दस्तावेज़ या ईमेल संपादक बना रहे हैं
कोई फुलाना नहीं। कोई मार्केटिंग प्रचार नहीं। बस व्यावहारिक वास्तुकला और वास्तविक निर्णय।
Gutenberg बनाम GrapesJS - मुख्य अंतर
सुविधाओं की तुलना करने से पहले, यह समझना महत्वपूर्ण है कि Gutenberg और GrapesJS विभिन्न समस्याओं को हल करते हैं।
Gutenberg एक वाक्य में
Gutenberg एक ब्लॉक-आधारित सामग्री संपादक है जो WordPress के साथ कसकर जुड़ा हुआ है।
GrapesJS एक वाक्य में
GrapesJS एक फ्रेमवर्क-अज्ञेयवादी दृश्य HTML/CSS संपादक है जो WordPress विशुद्ध रूप से बैकएंड के रूप में उपयोग कर सकता है।
यह अंतर बाकी सब कुछ आकार देता है।
त्वरित तुलना: GrapesJS बनाम Gutenberg
Gutenberg सही विकल्प कब है
Gutenberg अच्छी तरह से काम करता है जब:
- आप सामग्री-भारी वेबसाइटें बना रहे हैं
- संपादक गैर-तकनीकी उपयोगकर्ता हैं
- आप WordPress कोर के साथ गहरा एकीकरण चाहते हैं
- लेआउट लचीलापन स्थिरता के लिए गौण है
यदि आप एक ब्लॉग, मार्केटिंग साइट या समाचार पोर्टल बना रहे हैं - तो Gutenberg आमतौर पर पर्याप्त है।
कब GrapesJS बेहतर विकल्प है
GrapesJS बेहतर विकल्प बन जाता है जब:
- आपको पूर्ण HTML और CSS नियंत्रण की आवश्यकता है
- आप एक कस्टम पेज बिल्डर बना रहे हैं
- आप WordPress के बाहर सामग्री निर्यात करना चाहते हैं
- आप एक SaaS-शैली संपादक का निर्माण कर रहे हैं
- आप दस्तावेज़, ईमेल, प्रस्ताव, लैंडिंग पृष्ठ डिज़ाइन करना चाहते हैं
दूसरे शब्दों में: यदि WordPress आपका बैकएंड है, आपका संपादक नहीं, तो GrapesJS पूरी तरह से फिट बैठता है।
वास्तविक दुनिया की वास्तुकला: WordPress + GrapesJS
आइए एक उत्पादन-तैयार सेटअप देखें, डेमो को नहीं।
उच्च स्तरीय वास्तुकला
WordPress व्यवस्थापक ↓कस्टम संपादक पृष्ठ ↓ GrapesJS (iframe) ↓ REST API ↓ डेटाबेस/मीडिया लाइब्रेरी
जिम्मेदारियां बंटती हैं
- WordPress
- प्रमाणीकरण और अनुमतियां
- भंडारण (एचटीएमएल, सीएसएस, जेएसओएन)
- मीडिया अपलोड
- आरईएसटी एपीआई
- GrapesJS
- दृश्य संपादन
- घटक और लेआउट
- शैलियों
- HTML/CSS निर्यात करना
यह पृथक्करण आपके सिस्टम को साफ और स्केलेबल रखता है।
चरण 1: WordPress व्यवस्थापक में GrapesJS एम्बेड करना
एक कस्टम व्यवस्थापक पृष्ठ या एक कस्टम पोस्ट प्रकार संपादक बनाएँ.
स्क्रिप्ट को सुरक्षित रूप से पंक्तिबद्ध करें
add_action('admin_enqueue_scripts', फ़ंक्शन () {
wp_enqueue_script( '
grapesjs',
'https://unpkg.com/grapesjs',
[],
शून्य,
सत्य
);
wp_enqueue_style( '
grapesjs-सीएसएस',
'https://unpkg.com/grapesjs/dist/css/grapes.min.css');
wp_enqueue_script(
'मेरा-संपादक',
plugin_dir_url(__FILE__)। 'editor.js', [
'grapesjs'],
'1.0',
सत्य);
wp_localize_script('मेरा-संपादक', 'WP_EDITOR', [
'nonce' => wp_create_nonce('wp_rest'),
'api' = > rest_url('कस्टम/v1'),
]);});
iframe क्यों मायने रखता है
GrapesJS iframe के अंदर सामग्री प्रस्तुत करता है:
- WordPress व्यवस्थापक CSS विरोधों को रोकता है
- फ्रंटएंड शैलियों को अलग-थलग रखता है
- आउटपुट को पूर्वानुमानित बनाता है
यह एक विशेषता है, कोई खामी नहीं।
चरण 2: GrapesJS प्रारंभ करना
editor.js में :
स्थिरांक संपादक = grapesjs.init ({
कंटेनर: '#editor',
ऊंचाई: '100vh', सेएलिमेंट
: गलत, भंडारण
प्रबंधक: झूठा, कैनवास
: {
शैलियाँ: [
'/wp-content/themes/your-theme/style.css'
] }
});
डिफ़ॉल्ट संग्रहण प्रबंधक को अक्षम करें — हम मैन्युअल रूप से बचत को संभालेंगे।
चरण 3: सामग्री को सही ढंग से सहेजना
आपको क्या बचाना चाहिए?
सिफारिश की:
- अंतिम आउटपुट → html
- सीएसएस → शैलियाँ
- JSON → GrapesJS projectData (पुन: संपादन के लिए)
REST API समापन बिंदु (PHP)
register_rest_route('कस्टम/v1', '/सहेजें', [
'तरीके' => 'पोस्ट', '
permission_callback' => फ़ंक्शन () {
वापसी current_user_can('edit_posts');
},
'कॉलबैक' = > फ़ंक्शन ($request) {
$post_id = intval($request['post_id']);
update_post_meta($post_id, '_gjs_html', $request['html']);
update_post_meta($post_आईडी, '_gjs_css', $request['सीएसएस']);
update_post_meta($post_आईडी, '_gjs_project', wp_json_encode($request ['प्रोजेक्ट']));
वापसी ['सफलता' = > सत्य];
}
]);
सेव बटन (JS)
async फ़ंक्शन savePage() {
await fetch('${WP_EDITOR.api}/save', {
विधि: 'POST', हेडर
: {
'सामग्री-प्रकार': 'application/json',
'X-WP-Nonce': WP_EDITOR.nonce
},
शरीर: JSON.stringify({
post_id: 123,
html: editor.getHtml(),
css: editor.getCss(),
परियोजना: editor.getProjectData()
})
;}
चरण 4: सामग्री को संपादक में वापस लोड करना
editor.loadProjectData (projectJson);
यह सच्चे राउंड-ट्रिप संपादन की अनुमति देता है, जिसे जटिल लेआउट के लिए संघर्ष करना Gutenberg है।
चरण 5: मीडिया लाइब्रेरी एकीकरण WordPress
देशी मीडिया पिकर का उपयोग करें:
स्थिरांक फ्रेम = wp.media ({
शीर्षक: 'छवि का चयन करें',
एकाधिक: गलत
});
frame.on('चयन', () => { स्थिरांक
फ़ाइल = frame.state().get('selection').first().toJSON();
संपादक। AssetManager.add({
src: file.url,
प्रकार: 'छवि'
});}
);
फ़्रेम.ओपन ();
अब WordPress में अपलोड की गई छवियां सीधे GrapesJS में दिखाई देती हैं।
सुरक्षा और अनुमतियाँ
इसे कभी न छोड़ें।
जाँचसूची:
- ✅ बाकी कुछ नहीं
- ✅ current_user_can() जाँच करता है
- ✅ रेंडर पर सैनिटाइज करें, सेव पर नहीं
- ✅ भूमिका के आधार पर संपादक पहुँच को प्रतिबंधित करें
महत्वपूर्ण:
यदि उपयोगकर्ता HTML निर्यात करते हैं, तो संग्रहीत सामग्री को अधिक सैनिटाइज़ न करें - केवल सार्वजनिक रूप से रेंडर करते समय ही सैनिटाइज़ करें।
प्रदर्शन सर्वोत्तम अभ्यास
- आलसी-लोड केवल तभी GrapesJS जब संपादक खुलता है
- कैनवास में केवल आवश्यक सीएसएस इंजेक्ट करें
- संपादक को पुनः प्रारंभ करने से बचें
- प्रति पृष्ठ एक संपादक आवृत्ति का उपयोग करें
- आक्रामक रूप से संपत्ति कैश करें
सामान्य नुकसान
❌ "मेरी शैलियाँ लागू नहीं होती हैं"
आप सीएसएस को आईफ्रेम (canvas.styles) में लोड करना भूल गए।
❌ "संपादक धीमा है"
बहुत सारे प्लगइन्स या ऑटोसेव सक्षम।
❌ "सामग्री पुनः लोड करने पर टूट जाती है"
आप केवल HTML सहेज रहे हैं, प्रोजेक्ट JSON नहीं।
अंतिम निर्णय: GrapesJS या Gutenberg?
Gutenberg चुनें यदि:
- आप सामग्री-प्रथम WordPress साइटें बना रहे हैं
- आप देशी WP UX चाहते हैं
GrapesJS चुनें यदि:
- आप एक कस्टम पेज बिल्डर बना रहे हैं
- आपको पूर्ण HTML/CSS नियंत्रण की आवश्यकता है
- WordPress आपका बैकएंड है, आपका संपादक नहीं
- आप एक SaaS या उन्नत संपादक का निर्माण कर रहे हैं
अंतिम विचार
Gutenberg एक बेहतरीन कंटेंट एडिटर है।
GrapesJS एक बिल्डर फ्रेमवर्क है।
यदि आपका लक्ष्य Webflow, एलिमेंटर, नोशन, या दस्तावेज़ संपादक के करीब कुछ बनाना है, तो WordPress के साथ जोड़ा गया GrapesJS एक शक्तिशाली और लचीला आधार है।
WordPress जो सबसे अच्छा करता है उसे संभालता है - उपयोगकर्ता, अनुमतियां, भंडारण।
GrapesJS वह संभालता है जो वह सबसे अच्छा करता है - दृश्य संपादन और लेआउट।
यह अलगाव स्केलेबल, पेशेवर बिल्डरों की कुंजी है।