Sveltejs Academy · पाठ

रिच टेक्स्ट एडिटर: Tiptap

Svelte रैपर के साथ Tiptap ProseMirror एडिटर को SvelteKit फ़ॉर्म में इंटीग्रेट करें।

पाठ 4, कुल 4 में से14 चरण

रिच टेक्स्ट एडिटर: Tiptap, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

टिपटैप

टिपटैप एक लोकप्रिय ProseMirror-आधारित संपादक है, जिसकी विस्तार प्रणाली उपयोग में आसान है।

स्थापित करें

कोर और StarterKit जोड़ें।

npm install @tiptap/core @tiptap/starter-kit

आरंभ करें

onMount में एक संपादक बनाएँ, जिसका लक्ष्य एक div हो।

const editor = new Editor({ element: el, extensions: [StarterKit] });

DOM से जोड़ें

तत्व का संदर्भ प्राप्त करने के लिए bind:this का उपयोग करें।

<div bind:this={el} class="editor" />

सफ़ाई

संसाधन मुक्त करने के लिए onDestroy में editor.destroy() कॉल करें।

दो-तरफ़ा बाइंडिंग

सामग्री को स्वेल्ट स्टोर के साथ समकालिक करने के लिए संपादक की update घटना की सदस्यता लें।

editor.on("update", ({ editor }) => content = editor.getHTML());

टूलबार

ऐसे बटनों वाला टूलबार बनाएँ जो editor.chain().focus().toggleBold().run() आदि कॉल करते हों।

प्रतिक्रियाशील सक्रिय स्थितियाँ

सक्रिय बटनों को उभारने के लिए संपादक के अपडेट की सदस्यता लें।

विस्तार

टिपटैप के विस्तारों के माध्यम से चित्र, उल्लेख, तालिकाएँ और कोड ब्लॉक जोड़ें।

स्कीमा का अनुकूलन

क्षेत्र-विशिष्ट संपादन अनुभवों के लिए अपना स्कीमा परिभाषित करें।

SvelteKit आवरण

सामग्री prop और भेजे गए अपडेट वाले घटक में संपादक को लपेटें।

मोबाइल

स्पर्श उपकरणों पर परीक्षण करें; ProseMirror विभिन्न प्लेटफ़ॉर्म पर चयन को अच्छी तरह संभालता है।

त्वरित जाँच

editor.destroy() क्या करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

bind:this और जीवनचक्र हुक वाले घटक में टिपटैप को लपेटें। संपादक के आदेशों से टूलबार बनाएँ।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

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

क्या “रिच टेक्स्ट एडिटर: Tiptap” पाठ निःशुल्क है?

हाँ—“रिच टेक्स्ट एडिटर: Tiptap” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“रिच टेक्स्ट एडिटर: Tiptap” में मैं क्या सीखूँगा?

Svelte रैपर के साथ Tiptap ProseMirror एडिटर को SvelteKit फ़ॉर्म में इंटीग्रेट करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“रिच टेक्स्ट एडिटर: Tiptap” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Sveltejs Academy पर वापस जाएँ