GrapesJS को WordPress में कैसे एकीकृत करें (पूरी गाइड 2026)

WordPress के साथ GrapesJS का उपयोग कब करें

GrapesJS एक स्टैंडअलोन, एमआईटी-लाइसेंस प्राप्त संपादक है - Gutenberg ब्लॉक नहीं। इसे एम्बेड करें WordPress में जब आपको पूरी तरह से कस्टम, ढांचा-अज्ञेयवादी ड्रैग-एंड-ड्रॉप की आवश्यकता होती है संपादक अपने स्वयं के भंडारण और निर्यात पाइपलाइन के साथ। यह मार्गदर्शिका एक छोटा सा बनाती है प्लगइन: एक व्यवस्थापक पृष्ठ जो संपादक को होस्ट करता है, एक आरईएसटी समापन बिंदु जो सामग्री को सहेजता है एक नॉन के साथ, और एक शोर्ट जो इसे सामने के छोर पर प्रस्तुत करता है।

1. प्लगइन बनाएं और GrapesJS को कतार में लगाएं

में wp-content/plugins/gjs-editor/gjs-editor.php, एक व्यवस्थापक पंजीकृत करें पृष्ठ और एनक्यू GrapesJS केवल उस स्क्रीन पर। स्क्रिप्ट के लिए एक REST nonce पास करें।

<?php
/* Plugin Name: GJS Editor */

add_action('admin_menu', function () {
    add_menu_page('GrapesJS', 'GrapesJS', 'edit_pages', 'gjs-editor', function () {
        echo '<div id="gjs"><h1>Edit me</h1></div>';
    });
});

add_action('admin_enqueue_scripts', function ($hook) {
    if ($hook !== 'toplevel_page_gjs-editor') {
        return;
    }
    wp_enqueue_style('grapesjs', 'https://unpkg.com/grapesjs/dist/css/grapes.min.css');
    wp_enqueue_script('grapesjs', 'https://unpkg.com/grapesjs', [], null, true);
    wp_enqueue_script('gjs-init', plugins_url('editor.js', __FILE__), ['grapesjs'], null, true);
    wp_localize_script('gjs-init', 'GJS', [
        'root'  => esc_url_raw(rest_url('gjs/v1/page')),
        'nonce' => wp_create_nonce('wp_rest'),
    ]);
});

2. रिमोट स्टोरेज के साथ GrapesJS आरंभ करें

में editor.js, REST मार्ग पर भंडारण प्रबंधक को इंगित करें और भेजें हेडर के रूप में X-WP-Nonce नहीं।

const editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  fromElement: true,
  storageManager: {
    type: 'remote',
    stepsBeforeSave: 3,
    options: {
      remote: {
        urlStore: GJS.root,
        urlLoad: GJS.root,
        headers: { 'X-WP-Nonce': GJS.nonce },
      },
    },
  },
});

3. REST समापन बिंदु पंजीकृत करें

प्रोजेक्ट (और रेंडर किए गए html/css) को स्टोर update_optionकरें। A यदि आपको कई पृष्ठों की आवश्यकता है तो कस्टम पोस्ट प्रकार भी काम करता है।

add_action('rest_api_init', function () {
    register_rest_route('gjs/v1', '/page', [
        [
            'methods'             => 'GET',
            'permission_callback' => '__return_true',
            'callback'            => function () {
                return get_option('gjs_project', []);
            },
        ],
        [
            'methods'             => 'POST',
            'permission_callback' => function () {
                return current_user_can('edit_pages');
            },
            'callback'            => function (WP_REST_Request $req) {
                $data = $req->get_json_params();
                update_option('gjs_project', $data);
                update_option('gjs_html', $data['gjs-html'] ?? '');
                update_option('gjs_css', $data['gjs-css'] ?? '');
                return ['status' => 'ok'];
            },
        ],
    ]);
});

हेडर WordPress X-WP-Nonce लॉग-इन को प्रमाणित करने देता है उपयोगकर्ता, और permission_callback क्षमता जांच लागू करता है।

4. शोर्ट के साथ सामने के छोर पर रेंडर करें

add_shortcode('gjs_page', function () {
    $css  = get_option('gjs_css', '');
    $html = get_option('gjs_html', '');
    return '<style>' . $css . '</style>' . $html;
});

किसी भी पोस्ट या पेज पर जाएं [gjs_page] . स्टोर किए गए मार्कअप को सैनिटाइज़ करें आउटपुट यदि गैर-व्यवस्थापक इसे संपादित कर सकते हैं।

सुरक्षा और प्रदर्शन युक्तियाँ

एकीकरण को दुबला और सुरक्षित रखें। GrapesJS को केवल अपनी संपादक स्क्रीन (हुक admin_enqueue_scripts चेक) पर पंक्तिबद्ध करें, कभी भी साइट-वाइड नहीं, इसलिए फ्रंट एंड तेज रहता है। उस कॉल current_user_can('edit_pages') के साथ permission_callback आरईएसटी सेव रूट को लॉक करें और हमेशा हेडर भेजें X-WP-Nonce - नॉनस एक्सपायर (~ 24 एच), इसलिए लंबे सत्रों के लिए नॉनस को ताज़ा करें या फिर से जारी करें। शॉर्टकोड आउटपुट को कच्चा प्रतिध्वनित करने के बजाय रेंडर wp_kses_post() करें। कई पृष्ठों के लिए, प्रत्येक को विकल्पों के बजाय एक कस्टम पोस्ट प्रकार में स्टोर करें ताकि संशोधन और क्षमताएं मुफ्त में आएं।

आवश्यक शर्तें

आपको WordPress 6+ और PHP 7.4+ की आवश्यकता होगी। यह मार्गदर्शिका एक छोटा प्लगइन बनाती है, इसलिए बुनियादी प्लगइन एपीआई (हुक, एनक्यूइंग स्क्रिप्ट, आरईएसटी एपीआई, नॉनस, और क्षमताएं) पर्याप्त है। किसी निर्माण चरण की आवश्यकता नहीं है - सीडीएन से GrapesJS लोड या एक बंडल संपत्ति।

संपादक में कस्टम ब्लॉक जोड़ें

इसके बाद grapesjs.initब्लॉक मैनेजर के साथ ड्रैग करने योग्य ब्लॉक पंजीकृत करें:

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

एक समृद्ध सेट के लिए तैयार ब्लॉक पुस्तकालयों और प्रीसेट GJS.Market से खींचें।

पृष्ठों को कस्टम पोस्ट प्रकार में संग्रहीत करें

विकल्प एक पृष्ठ के लिए काम करते हैं, लेकिन एक कस्टम पोस्ट प्रकार आपको कई पृष्ठ प्लस देता है संशोधन और क्षमताएं मुफ्त में। इसे पंजीकृत करें और प्रोजेक्ट को पोस्ट में स्टोर करें मेटा पर टैप करें, फिर इसे पहले दिखाए गए REST कॉलबैक में वापस पढ़ें. प्रोजेक्ट को बनाए रखें, HTML, और CSS को एक साथ प्रदान किया गया है, इसलिए एक पृष्ठ सहेजे गए के रूप में फिर से खुलता है।

प्रदर्शन युक्तियाँ

GrapesJS को केवल अपनी संपादक स्क्रीन पर पंक्तिबद्ध करें (admin_enqueue_scripts हुक चेक), कभी भी साइट-वाइड नहीं, इसलिए फ्रंट एंड तेज रहता है। शोर्ट को कैश करें आउटपुट करें और इसे सहेजें पर बस्ट करें। संपादक स्क्रिप्ट को स्थगित करें ताकि यह व्यवस्थापक को कभी भी ब्लॉक न करे यूआई।

सुरक्षा के मनन

उस कॉल के साथ permission_callback REST सेव रूट को लॉक करें current_user_can('edit_pages') और हमेशा भेजें X-WP-Nonce हेडर - nonces समाप्त हो जाते हैं (~ 24h), इसलिए उन्हें ताज़ा करें या फिर से जारी करें लंबे सत्रों के लिए। फ्रंट-एंड आउटपुट के माध्यम से wp_kses_post() रेंडर करें कच्चे मार्कअप को प्रतिध्वनित करने के बजाय।

सामान्य त्रुटियों का समस्या निवारण

403 (rest_cookie_invalid_nonce) का अर्थ है कि नॉनस गायब है या समय सीमा समाप्त हो गई। एक अनस्टाइल कैनवास का मतलब है कि स्टाइलशीट पंक्तिबद्ध नहीं थी। एक खाली संपादक का मतलब है कि कंटेनर तत्व व्यवस्थापक पर नहीं था पृष्ठ। यदि सहेजा जाता है चुपचाप विफल हो जाता है, तो वर्तमान के लिए क्षमता जांच पास की पुष्टि करें उपभोक्ता।

WordPress के साथ GrapesJS का उपयोग कब करें

GrapesJS आपके अंदर एम्बेडेड पूरी तरह से कस्टम, फ्रेमवर्क-अज्ञेयवादी दृश्य संपादक के अनुरूप है स्वयं का व्यवस्थापक या उत्पाद — जब आप अपने स्वयं के भंडारण और HTML आउटपुट के बजाय चाहते हैं Gutenberg का विस्तार करना . यदि आपको केवल इसके साथ WordPress के अंदर सामग्री संपादित करने की आवश्यकता है ब्लॉक मॉडल, Gutenberg मूल पसंद है; एक स्व-स्वामित्व, एम्बेड करने योग्य पृष्ठ के लिए बिल्डर, GrapesJS मजबूत फिट है।

अगले चरण

अपनी थीम से मेल खाने के लिए ब्लॉक और प्लगइन्स जोड़ें। संबंधित देखें GrapesJS + लारवेल गाइड, GrapesJS बनाम Builder.ioपर संपादकों की तुलना करें, GrapesJS मार्केटप्लेस ब्राउज़ करें, या GJS.Market होम पेज।

अक्सर पूछे जाने वाले प्रश्न

मैं WordPress में GrapesJS सामग्री कैसे सहेजूँ?

एक आरईएसटी मार्ग पंजीकृत करें, हेडर के साथ X-WP-Nonce अनुरोध भेजें, और प्रोजेक्ट/html/css को (या एक कस्टम पोस्ट के साथ update_option संग्रहित करें) प्रकार)।

क्या GrapesJS WordPress ब्लॉक एडिटर को बदल सकते हैं?

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

मैं सहेजें अनुरोध को कैसे प्रमाणित करूं?

के माध्यम से एक wp_create_nonce('wp_rest') नॉन्स पास करें wp_localize_script, फिर इसे इस रूप में X-WP-Nonce भेजें हेडर ताकि आरईएसटी permission_callback सफल हो।