आपको जिन दो तरीकों की आवश्यकता है
GrapesJS वर्तमान पृष्ठ को स्ट्रिंग के रूप में उजागर करता है: editor.getHtml() के लिए
मार्कअप और editor.getCss() शैलियों के लिए। बाकी सब कुछ - पूर्ण
दस्तावेज़, डाउनलोड, ज़िप - इन दोनों पर बनाता है।
1. HTML और CSS पढ़ें
const html = editor.getHtml();
const css = editor.getCss();2. एक पूर्ण दस्तावेज़ इकट्ठा करें
const doc = `<!doctype html>
<html>
<head><meta charset="utf-8"><style>${css}</style></head>
<body>${html}</body>
</html>`;
// Store `doc`, or render it server-side.3. एक निर्यात मोडल दिखाएं
// Built-in: opens a modal with the current HTML/CSS for copy-paste.
editor.runCommand('export-template');4. एक ज़िप डाउनलोड करें (index.html + style.css)
import grapesjs from 'grapesjs';
import exportPlugin from 'grapesjs-plugin-export';
const editor = grapesjs.init({
container: '#gjs',
plugins: [exportPlugin],
pluginsOpts: { 'grapesjs-plugin-export': {} },
});
// Trigger the ZIP download:
editor.runCommand('gjs-export-zip');सलाह: नियंत्रित करें कि CSS में क्या शामिल है
// e.g. include rules even for components not currently on the canvas
const css = editor.getCss({ keepUnusedStyles: true });टिप्स
निर्यात को गंतव्य से मिलाएं। ईमेल के लिए, सीएसएस को इनलाइन करें (जैसे टूल juiceके माध्यम से, या MJML प्रीसेट के साथ बनाएं) क्योंकि अधिकांश क्लाइंट ब्लॉक को अनदेखा करते <style> हैं। पुन: प्रयोज्य टेम्पलेट्स के लिए, पास करें getCss({ keepUnusedStyles: true }) ताकि उन घटकों के नियम जो वर्तमान में कैनवास पर नहीं हैं। ज़िप निर्यात grapesjs-plugin-export हैंड-ऑफ के लिए बहुत अच्छा है, लेकिन प्रोग्रामेटिक प्रकाशन के लिए सीधे पढ़ें getHtml()/getCss() उन्हें संग्रहीत करें। लक्ष्य जो भी हो, प्रकाशित करने से पहले मार्कअप को साफ करें यदि संपादक अविश्वसनीय उपयोगकर्ताओं के लिए खुला था।
आवश्यक शर्तें
आपको एक रनिंग GrapesJS एडिटर की आवश्यकता है। नीचे दी गई हर चीज़ दो तरीकों पर आधारित है -
editor.getHtml() और - editor.getCss() जो तार लौटाते हैं
आप स्टोर, रेंडर या पैकेज कर सकते हैं।
नियंत्रित करें कि CSS क्या शामिल है
getCss() विकल्पों को स्वीकार करता है। उन घटकों के लिए नियम रखें जो वर्तमान में नहीं हैं
कैनवास (पुन: प्रयोज्य टेम्पलेट्स के लिए उपयोगी), या विशिष्ट घटक क्षेत्र पास करें:
const css = editor.getCss({ keepUnusedStyles: true });ईमेल के लिए निर्यात (इनलाइन सीएसएस)
अधिकांश ईमेल क्लाइंट ब्लॉक को अनदेखा करते <style> हैं, इसलिए पहले सीएसएस को इनलाइन करें
भेजना - या तो MJML प्रीसेट के साथ निर्माण करें, या निर्यात किए गए HTML/CSS को एक के माध्यम से चलाएं
इनलाइनर की तरह juice:
import juice from 'juice';
const inlined = juice(`<style>${editor.getCss()}</style>${editor.getHtml()}`);एक ज़िप डाउनलोड करें
import exportPlugin from 'grapesjs-plugin-export';
const editor = grapesjs.init({ container: '#gjs', plugins: [exportPlugin] });
editor.runCommand('gjs-export-zip'); // index.html + style.cssप्रोग्रामेटिक रूप से निर्यात जारी रखें
प्रकाशन के लिए, स्ट्रिंग्स को सीधे पढ़ें और उन्हें अपने बैकएंड पर पोस्ट करें
डाउनलोड पर भरोसा करना - स्टोर, html, cssऔर पूर्ण
project तो पृष्ठ तेजी से प्रस्तुत होता है और संपादक में फिर से खुलता है।
सर्वोत्तम प्रथाएं
निर्यात को गंतव्य से मिलाएं: ईमेल के लिए इनलाइन सीएसएस, के लिए एक पूर्ण दस्तावेज़ स्टैंडअलोन पेज, CMS के लिए अलग-अलग HTML/CSS कॉलम। पहले निर्यात किए गए मार्कअप को सैनिटाइज़ करें प्रकाशित करना यदि संपादक अविश्वसनीय उपयोगकर्ताओं के लिए खुला था। अपने संग्रहीत प्रोजेक्ट को संस्करण करें आप एक खराब संपादन को वापस रोल कर सकते हैं।
अगले चरण
अपने सर्वर पर निर्यात जारी रखें भंडारण प्रबंधक बैकएंड गाइड, या निर्यात को पुन: प्रयोज्य में लपेटें कस्टम प्लगइन। ब्राउज़ करें GrapesJS प्लगइन्स चालू GJS.Market।
अक्सर पूछे जाने वाले प्रश्न
मैं HTML और CSS को GrapesJS से कैसे प्राप्त करूं?
editor.getHtml() और editor.getCss() मार्कअप वापस करें
और स्ट्रिंग्स के रूप में शैलियाँ।
मैं उपयोगकर्ताओं को ज़िप डाउनलोड करने की अनुमति कैसे दूं?
जोड़ें grapesjs-plugin-export और चलाएं
gjs-export-zip index.html प्लस style.css डाउनलोड करने का आदेश।
क्या getCss में केवल प्रयुक्त शैलियाँ शामिल हैं?
डिफ़ॉल्ट रूप से यह वर्तमान पृष्ठ के लिए प्रबंधित शैलियाँ लौटाता है; पास विकल्प जैसे
keepUnusedStyles इसे बदलने के लिए।