GrapesJS के साथ एक WYSIWYG पेज बिल्डर बनाएं

नीचे दिए गए किसी भी तत्व पर क्लिक करें, उसे फिर से टाइप करें, फिर यह कैसे दिखता है इसे बदलें। यहां कुछ भी पूर्वावलोकन नहीं है - कैनवास पृष्ठ है, और शैली पैनल उन्हीं तत्वों को संपादित करता है जिन्हें आप पढ़ रहे हैं।

स्टॉक संपादक: कैनवास, ब्लॉक, लेयर ट्री, स्टाइल मैनेजर और डिवाइस स्विचर, जिसमें कुछ भी नहीं जोड़ा गया है।

WYSIWYG का अर्थ है "आप जो देखते हैं वही आपको मिलता है। एक WYSIWYG संपादक उपयोगकर्ताओं को कच्चे HTML और CSS को सीधे संपादित करने के बजाय उनकी सामग्री के दृश्य प्रतिनिधित्व के साथ काम करने देता है। काम करते समय वे जिस पृष्ठ को देख रहे हैं वह वह पृष्ठ है जिसे वे प्रकाशित करेंगे।

उपयोगकर्ता पृष्ठ बनाते समय उसे देख सकते हैं।

एक समृद्ध पाठ संपादक एक पैराग्राफ के लिए सही उपकरण है। यह पाठ को प्रारूपित करता है, शीर्षकों और सूचियों को संभालता है, और इनलाइन सामग्री का प्रबंधन करता है। एक पेज बिल्डर एक स्तर ऊपर काम करता है: अनुभागों, कॉलम, घटकों, छवियों, बटनों, स्टाइलिंग और उत्तरदायी व्यवहार पर जो उस पाठ के चारों ओर पृष्ठ बनाते हैं।

GrapesJS विज़ुअल पेज संपादन को एक एक्स्टेंसिबल कंपोनेंट आर्किटेक्चर के साथ जोड़ता है — और इसमें अभी भी एक रिच टेक्स्ट एडिटर है, क्योंकि एक पैराग्राफ को उस जगह पर संपादित करना WYSIWYG का आधा मतलब है। यदि आपका उत्पाद पहले से ही CKEditor, TinyMCE, Froala या Quill का उपयोग करता है, तो आप इसे रख सकते हैं: प्रत्येक के लिए एकीकरण GJS.Market पर हैं।

एक दृश्य संपादन अनुभव के निर्माण खंड, GrapesJS कोर के सभी हिस्से के बजाय कुछ ऐसा जिसे आप स्वयं इकट्ठा करते हैं।

एक ही दृश्य संपादन इंजन बहुत अलग उत्पादों के नीचे बैठता है। ये वे आकार हैं जो यह सबसे अधिक बार लेता है।

दृश्य संपादन आमतौर पर एक टीम द्वारा अनुरोध किया जाता है और दूसरी टीम द्वारा बनाया जाता है। ये उस बातचीत के दोनों सिरों पर मौजूद लोग हैं।

बॉक्स से बाहर संपादक टेक्स्ट, छवियों, बटनों और अनुभागों के बारे में जानता है। जो चीज़ इसे आपके एप्लिकेशन का मूल निवासी बनाती है, वह इसे उन वस्तुओं के बारे में सिखा रही है जो आपके एप्लिकेशन के पास पहले से मौजूद हैं।

1. 01
2. ↓02
3. ↓03
4. ↓संपादक को उन घटकों के साथ विस्तारित करें जो आपके एप्लिकेशन की वस्तुओं, सामग्री और वर्कफ़्लो से मेल खाते हैं।

तीसरे पायदान पर उदाहरण वे घटक हैं जिन्हें आप अपने स्वयं के उत्पाद के लिए बनाएंगे, न कि प्लगइन्स डाउनलोड के लिए उपलब्ध हैं। GrapesJS आपको घटक API देता है; घटक क्या जानता है यह आप पर निर्भर है।

फ़ोन पर प्रकाशित करने और जाँच करने के बजाय, विज़ुअल एडिटर के अंदर काम करते समय व्यूपोर्ट आकारों में अपने लेआउट का पूर्वावलोकन करें और समायोजित करें।

डिवाइस कॉन्फ़िगर करने योग्य हैं: उपरोक्त तीन डिफ़ॉल्ट हैं, और आप उन ब्रेकपॉइंट को परिभाषित कर सकते हैं जो आपका डिज़ाइन सिस्टम वास्तव में उपयोग करता है। एक संकीर्ण डिवाइस पर सेट की गई शैलियाँ उस ब्रेकपॉइंट से नीचे लागू होती हैं।

GrapesJS दृश्य संपादन परत प्रदान करता है। इसके आस-पास सब कुछ - उपयोगकर्ता, अनुमतियाँ, डेटा, भंडारण और प्रकाशन - आपके द्वारा पहले से चलाए जा रहे एप्लिकेशन के अंदर रहता है।

यदि प्रश्न विशेष रूप से यह है कि किसी मौजूदा उत्पाद के अंदर संपादक को कैसे माउंट किया जाए, तो उस वॉकथ्रू का अपना पृष्ठ होता है। एम्बेड करने योग्य पेज बिल्डर

अपनी सामग्री को एक अलग होस्ट किए गए प्लेटफ़ॉर्म में ले जाने के बजाय अपने मौजूदा एप्लिकेशन आर्किटेक्चर के आसपास संपादक बनाएं।

const editor = grapesjs.init({
  container: '#editor',

  // Each page is a row in your database, behind your own auth.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

// Publishing stays on your side — your domains, your CDN, your workflow.
async function publish() {
  await fetch(`/api/pages/${pageId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: editor.getHtml(), css: editor.getCss() }),
  });
}

GJS.Market प्लगइन्स बेचता है; यह आपके संपादक को होस्ट नहीं करता है, आपके पृष्ठों को संग्रहीत नहीं करता है या आपका डेटाबेस नहीं चलाता है। Storage Manager आपके द्वारा दिए गए किसी भी समापन बिंदु पर, आपके स्वयं के प्रमाणीकरण के पीछे इंगित करता है।

एक विज़ुअल एडिटर एक विशेषता की तरह दिखता है और एक दर्जन सबसिस्टम बन जाता है, जिनमें से प्रत्येक को इसमें से किसी को भी समाप्त होने से पहले काम करना पड़ता है।

WYSIWYG संपादक किस चीज से बना है

• कैंवस
• संग्रह
• इनलाइन संपादन
• खींचें और छोड़ें
• अवयव
• ब्लॉक
• बिछाना
• उत्तरदायी नियंत्रण
• संपत्ति
• पूर्ववत करें और फिर से करें
• भंडार
• निर्यातित माल
• प्रकाशन-व्‍यवसाय
• रखरखाव

यह दायरे की तुलना है, शेड्यूल की नहीं - एक संपादक को बनाने में कितना समय लगता है यह आपकी टीम पर निर्भर करता है और आपको वास्तव में इसकी कितनी आवश्यकता है। अपना उत्पाद बनाएं, खरोंच से कोई अन्य संपादक नहीं।

एक गैर-तकनीकी उपयोगकर्ता को सौंपने के लिए एक खाली कैनवास सबसे कठिन काम है। लेआउट शुरू करने से उन्हें कुछ आविष्कार करने के बजाय कुछ बदलने के लिए मिलता है।

ये उस प्रकार के लेआउट हैं जो एक बिल्डर के उपयोगकर्ता मांगते हैं, न कि उत्पाद लिस्टिंग। तैयार शुरुआती बिंदु GJS.Market पर प्रीसेट के रूप में शिप होते हैं।

नीचे दी गई हर चीज़ GJS.Market पर एक वास्तविक सूची है, जिसका लाइव नाम और कीमत है। प्रत्येक समूह अपनी श्रेणी को भी जोड़ता है, इसलिए यहां जो फिट बैठता है उससे कहीं अधिक हमेशा होता है।

रिच टेक्स्ट एडिटिंग

पाठ को संपादित करना जहां यह बैठता है WYSIWYG का आधा है। अंतर्निहित संपादक को उस संपादक के लिए स्वैप करें जिसका आपका उत्पाद पहले से ही उपयोग करता है।

इस श्रेणी को ब्राउज़ करें

इनलाइन RTE

GrapesJS Inline Text Editor — Compatible with CKEditor 5

अंतर्निहित समृद्ध टेक्स्ट एडिटर को CKEditor 5 से बदल देता है, कैनवास पर जगह में संपादन।

US$69,00द्वारा

इनलाइन RTE

TinyMCE 8 Inline Text Editor

इस पर पहले से ही मानकीकृत टीमों के लिए कैनवास पर TinyMCE 6 लाता है।

US$69,00द्वारा

RTE टूलबार

Grapesjs RTE Extensions

डिफ़ॉल्ट टूलबार को उन स्वरूपण क्रियाओं के साथ विस्तारित करता है जिन्हें स्टॉक छोड़ देता है।

निःशुल्कद्वारा

दृश्य स्टाइल

स्टाइल पैनल को बेहतर नियंत्रण दें: रंग बीनने वाले, वास्तविक फोंट और सटीक रिक्ति।

इस श्रेणी को ब्राउज़ करें

रंग

Grapesjs Style Gpickr

स्टाइल मैनेजर के अंदर ग्रेडिएंट सहित एक उचित रंग बीनने वाला।

निःशुल्कद्वारा

मुद्रण कला

Custom Fonts

टाइपोग्राफी नियंत्रणों में अपने स्वयं के फ़ॉन्ट परिवार जोड़ता है.

निःशुल्कद्वारा

रिक्ति

GrapesJS LayoutEnhancer: Precision Spacing Tool

कैनवास पर खींचकर मार्जिन और पैडिंग को समायोज्य बनाता है।

US$49,00द्वारा

ब्लॉक

तैयार दृश्य बिल्डिंग ब्लॉक्स ताकि कैनवास पहले दिन उपयोगी हो।

इस श्रेणी को ब्राउज़ करें

ब्लॉक

Plugin Basic Blocks

ब्लॉकों का स्टार्टर सेट: कॉलम, टेक्स्ट, छवि, वीडियो, मानचित्र।

निःशुल्कद्वारा

ब्लॉक

Plugin Blocky for Tailwind CSS

उन टीमों के लिए पूर्वनिर्मित अनुभाग जिनका आउटपुट Tailwind होना चाहिए।

US$59,00द्वारा

अवयव

विशेष संपादन योग्य घटक, जिनमें कई पृष्ठों पर पुनः उपयोग किए गए तत्व शामिल हैं।

इस श्रेणी को ब्राउज़ करें

पुनः प्रयोज्य

Symbols

एक तत्व को एक बार परिभाषित करें और उसका पुनः उपयोग करें, इसलिए एक संपादन हर उदाहरण को अपडेट करता है।

निःशुल्कद्वारा

संपत्ति

अतिरिक्त मीडिया कार्यक्षमता - अपलोड, होस्टिंग और इन-एडिटर इमेज एडिटिंग।

इस श्रेणी को ब्राउज़ करें

संपत्ति

Grapesjs Cloudinary

अपलोड और रूपांतरणों के लिए परिसंपत्ति प्रबंधक को Cloudinary पर इंगित करता है।

निःशुल्कद्वारा

छवि संपादन

TOAST UI Image Editor

संपादक को छोड़े बिना छवियों को क्रॉप करें, घुमाएं और फ़िल्टर करें।

निःशुल्कद्वारा

टेम्पलेट्स

पूर्व-निर्मित शुरुआती बिंदु ताकि उपयोगकर्ताओं को कभी भी खाली कैनवास का सामना न करना पड़े।

इस श्रेणी को ब्राउज़ करें

पूर्व निर्धारित

Webpage Preset

एक परियोजना शुरू करने के लिए एक तैयार वेब-पेज कॉन्फ़िगरेशन।

निःशुल्कद्वारा

टेम्पलेट्स

Templates Manager

उपयोगकर्ताओं को अपने स्वयं के टेम्पलेट्स को सहेजने और फिर से खोलने की सुविधा देता है।

US$39,00द्वारा

भंडार

कहीं न कहीं संपादक द्वारा उत्पादित प्रोजेक्ट डेटा को रखने के लिए।

इस श्रेणी को ब्राउज़ करें

भंडार

Grapesjs Firebase Storage

परियोजनाओं को Firebase तक बनाए रखता है जब आप समापन बिंदु का निर्माण नहीं करना चाहते हैं।

निःशुल्कद्वारा

पेज

बहु-पृष्ठ परियोजनाएं, जब एक कैनवास पूरी साइट नहीं होती है।

इस श्रेणी को ब्राउज़ करें

पेज

Pages Manager

संपादक में एक पृष्ठ सूची के साथ बहु-पृष्ठ प्रोजेक्ट जोड़ता है।

US$25,00द्वारा

एआई

संपादक के अंदर एआई-सहायता प्राप्त पीढ़ी।

इस श्रेणी को ब्राउज़ करें

एआई

Grapesjs GPT Plugin

प्रॉम्प्ट से चयनित घटक के लिए सामग्री उत्पन्न करता है.

निःशुल्कद्वारा

चार शुरुआती संयोजन, प्रत्येक का उद्देश्य एक अलग तरह का उत्पाद है। सूचीबद्ध प्रत्येक प्लगइन अपनी लाइव कीमत के साथ एक वास्तविक सूची है।

कीमतें सीधे कैटलॉग से आती हैं और बदल सकती हैं; उत्पाद पृष्ठ आधिकारिक है।

कोर एक npm पैकेज और एक कंटेनर तत्व है। उसके बाद सब कुछ यह तय कर रहा है कि आपके उपयोगकर्ताओं को कितना संपादक देखना चाहिए।

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// The visual canvas. Everything the user sees here is the page itself,
// not a preview of it.
const editor = grapesjs.init({
  container: '#editor',

  // The panels that make the editing visual rather than textual.
  styleManager: { appendTo: '#styles' },
  deviceManager: {
    devices: [
      { id: 'desktop', name: 'Desktop', width: '' },
      { id: 'tablet', name: 'Tablet', width: '768px' },
      { id: 'mobile', name: 'Mobile', width: '375px' },
    ],
  },
});

// "What you see is what you get" starts with editing text where it
// already sits. GrapesJS ships an inline rich-text editor, and you can
// replace it with whichever one your product already uses.
editor.setCustomRte({
  enable(el, rte) {
    el.contentEditable = true;
    return rte;
  },
  disable(el) {
    el.contentEditable = false;
  },
});

// A component decides what the user is allowed to change visually.
editor.DomComponents.addType('quote', {
  model: {
    defaults: {
      // Editable in place, but the frame around it stays yours.
      editable: true,
      droppable: false,
      traits: ['author', 'source'],
    },
  },
});

1. अपने उत्पाद की ज़रूरत के घटक जोड़ें
2. →शैलियों और संपादक को अनुकूलित करें UI
3. →अपने स्वयं के API के विरुद्ध भंडारण कॉन्फ़िगर करें
4. →प्रकाशन को अपनी पाइपलाइन से कनेक्ट करें
5. →प्लगइन्स के साथ विस्तार करें जहां यह आपका समय बचाता है

यह पूरी सतह है: इनिशियलाइज़ करें, एक्सटेंशन करें, स्टोर करें, प्रकाशित करें। दस्तावेज़ीकरण प्रत्येक प्रबंधक को गहराई से कवर करता है।

कोर ढांचा-अज्ञेयवादी है; ये पृष्ठ इसे एक विशिष्ट के अंदर माउंट करने को कवर करते हैं।

ओपन-सोर्स विज़ुअल एडिटिंग फाउंडेशन से शुरुआत करें और इसे अपनी उत्पाद आवश्यकताओं के अनुसार बढ़ाएं।

प्रश्नों के लिए पड़ोसी पृष्ठ जो यह केवल छूता है।

GrapesJS से प्रारंभ करें, संपादन अनुभव को अनुकूलित करें और अपने उत्पाद की आवश्यकता के प्लगइन्स जोड़ें।