GrapesJS रूबी ऑन रेल्स ऐप में कैसे एकीकृत करें (पूरी गाइड 2026)

GrapesJS रेल में क्यों फिट बैठता है

GrapesJS केवल ब्राउज़र है, एमआईटी-लाइसेंस प्राप्त संपादक है, इसलिए रेल संपादक पृष्ठ की सेवा करता है और लोड/स्टोर एंडपॉइंट को उजागर करता है जबकि GrapesJS UI को संभालता है। यह गाइड बनाता है एक कार्यशील सेटअप: एक ईआरबी दृश्य जो संपादक को होस्ट करता है, एक नियंत्रक जो बना रहता है CSRF सुरक्षा और HTML/CSS निर्यात के साथ सामग्री।

1. संपादक को एक दृश्य में प्रस्तुत करें

आपके रेल लेआउट में पहले से ही शामिल है csrf_meta_tags। बनाएं app/views/editor/show.html.erb:

<div id="gjs"><h1>Edit me in GrapesJS</h1></div>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<%= javascript_include_tag "editor" %>

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

// app/javascript/editor.js
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. मार्ग और नियंत्रक

# config/routes.rb
get  "editor",      to: "editor#show"
get  "editor/load", to: "editor#load"
post "editor/save", to: "editor#save"

# app/controllers/editor_controller.rb
class EditorController < ApplicationController
  def show; end

  def load
    page = Page.find_or_create_by(key: "home")
    render json: (page.project || {})
  end

  def save
    page = Page.find_or_create_by(key: "home")
    page.update!(
      project: params.permit!.to_h,
      html: params["gjs-html"],
      css: params["gjs-css"]
    )
    render json: { status: "ok" }
  end
end

X-CSRF-Token हेडर रेल की डिफ़ॉल्ट जालसाजी को संतुष्ट करता है सुरक्षा, ताकि आप CSRF चालू रखें। एक के रूप में स्टोर करें project jsonb कॉलम।

4. निर्यात किए गए पृष्ठ को प्रस्तुत करें

<style><%= raw @page.css %></style>
<%= raw @page.html %>

केवल विश्वसनीय संपादकों के लिए उपयोग करें raw ; अन्यथा सैनिटाइज़ करें।

उत्पादन युक्तियाँ

एक ठोस रेल सेटअप के लिए, GrapesJS प्रोजेक्ट को एक jsonb कॉलम में स्टोर करें ताकि क्वेरी और आंशिक अपडेट सस्ते रहें, और तेजी से सेवा के लिए रेंडर /css htmlयदि आप सीडीएन के बजाय आयातमैप-रेल के माध्यम से GrapesJS लोड करते हैं, तो इसे bin/importmap pin grapesjs पिन करें और पुष्टि करें कि यह उत्पादन में हल हो जाता है जहां परिसंपत्ति होस्ट भिन्न होता है। रेल की जालसाजी सुरक्षा चालू रखें - X-CSRF-Token हेडर इसे csrf_meta_tags संतुष्ट करता है। और प्रकाशित पृष्ठ (टुकड़ा कैश या सीडीएन) को कैश करें, सहेजने पर अमान्य करें, इसलिए संपादक की रेंडर लागत कभी भी अंतिम उपयोगकर्ताओं तक नहीं पहुंचती है।

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

आपको रूबी 3.x और एक रेल 7 एप्लिकेशन की आवश्यकता होगी। 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 से खींचें।

भंडारण गहरा-गोता: एक कस्टम एडाप्टर

एक कस्टम स्टोरेज एडाप्टर मेटा टैग से CSRF टोकन पढ़ता है और आपके मार्गों पर पोस्ट करता है:

const csrf = document.querySelector('meta[name="csrf-token"]').content;
editor.Storage.add('rails-store', {
  async load() {
    const res = await fetch('/editor/load');
    return res.ok ? res.json() : {};
  },
  async store(data) {
    await fetch('/editor/save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify(data),
    });
  },
});
// then: storageManager: { type: 'rails-store' }

प्रोजेक्ट को एक jsonb कॉलम में स्टोर करें ताकि यह संपादक में बिल्कुल फिर से लोड हो जाए।

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

GrapesJS को केवल संपादक स्क्रीन पर लोड करें और स्क्रिप्ट को स्थगित करें। प्रकाशित को कैश करें रेल फ्रैगमेंट कैशिंग या सीडीएन के साथ पृष्ठ और सहेजने पर अमान्य करें। यदि आप लोड करते हैं GrapesJS importmap-rails के माध्यम से, पिन उत्पादन में हल होने की पुष्टि करें जहां एसेट होस्ट अलग है।

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

जालसाजी सुरक्षा चालू रखें — X-CSRF-Token हेडर से csrf_meta_tags इसे संतुष्ट करता है। एक वह before_action जोड़ें सहेजने से पहले वर्तमान उपयोगकर्ता को अधिकृत करता है। केवल उपयोग करें raw/html_safe संग्रहीत मार्कअप पर जब संपादकों पर भरोसा किया जाता है; अन्यथा आउटपुट पर स्वच्छता करें। मान्य करें पेलोड का आकार।

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

422 असंसाधित इकाई का आमतौर पर मतलब है कि सीएसआरएफ टोकन गायब है या बासी। एक अनस्टाइल कैनवास का मतलब है कि स्टाइलशीट लोड नहीं हुई। एक खाली संपादक का मतलब है कि कंटेनर चयनकर्ता कुछ भी मेल नहीं खाता है। 413 का मतलब है कि प्रोजेक्ट पेलोड शरीर की सीमा से अधिक है।

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

GrapesJS तब फिट बैठता है जब आपके रेल ऐप को आपके उपयोगकर्ताओं को एम्बेडेड विज़ुअल एडिटर की आवश्यकता होती है नियंत्रण - लैंडिंग पृष्ठ, ईमेल, एक व्हाइट-लेबल बिल्डर - आपके स्वयं के द्वारा समर्थित डाटाबेस। इनलाइन समृद्ध पाठ के लिए, एक हल्का WYSIWYG पर्याप्त है; पूरे पृष्ठ के लिए लेआउट, स्टाइलिंग और HTML/CSS निर्यात के साथ रचना, GrapesJS मजबूत है, एमआईटी-लाइसेंस प्राप्त, स्व-होस्टेड विकल्प।

अगले चरण

संबंधित GrapesJS + लारवेल देखें और GrapesJS + Django गाइड, GrapesJS मार्केटप्लेस ब्राउज़ करें, या GJS.Market होम पेज।

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

मैं GrapesJS सामग्री को रेल बैकएंड में कैसे सहेजूं?

स्टोरेज मैनेजर को कॉन्फ़िगर type: 'remote' करें और इसे इंगित करें रेल मार्ग। मेटा मान को csrf-token इस रूप में भेजें X-CSRF-Token हेडर, फिर प्रोजेक्ट JSON को एक मॉडल पर स्टोर करें।

मैं भारी निर्माण चरण के बिना GrapesJS कैसे लोड करूं?

इसे CDN से ERB दृश्य में शामिल करें, या इसे importmap-rails के साथ पिन करें - दोनों काम करते हैं क्योंकि GrapesJS सादा ब्राउज़र JavaScript है।

मुझे परियोजना को कहां स्टोर करना चाहिए?

पूर्ण प्रोजेक्ट के लिए एक jsonb कॉलम का उपयोग करें, साथ ही वैकल्पिक टेक्स्ट कॉलम का उपयोग करें प्रदान किए गए HTML और CSS के लिए।