Froala Inline Text Editor

एक उत्पादन-तैयार वाणिज्यिक प्लगइन जो डिफ़ॉल्ट GrapesJS रिच-टेक्स्ट एडिटर को पूर्ण Froala WYSIWYG अनुभव के साथ बदल देता है - इनलाइन संपादन, उन्नत स्वरूपण, छवि और लिंक टूल, वैयक्तिकरण टोकन और निर्बाध GrapesJS स्टूडियो एकीकरण। सख्त TypeScript , दोहरे संस्करण Froala समर्थन (4.x और 5.x), और युद्ध-परीक्षणित जीवनचक्र सफाई जो DOM को लीक किए बिना तेजी से सक्षम/अक्षम चक्रों से बचती है।

यह किसके लिए है

लैंडिंग पृष्ठ, ईमेल टेम्प्लेट, सास ऑनबोर्डिंग प्रवाह, और दृश्य संपादक जो आरटीई GrapesJS स्टॉक से आगे निकल गए हैं और अपने Froala एक सप्ताह वायरिंग नहीं बिताना चाहते हैं। यदि आपने पहले से ही Froala लाइसेंस प्राप्त कर लिया है (या योजना बना चुके हैं) और उत्पादन में GrapesJS या GrapesJS स्टूडियो का उपयोग कर रहे हैं, तो यह प्लगइन एकीकरण गोंद की लगभग एक हजार पंक्तियों को हटा देता है - और आठ या नौ सूक्ष्म बग जिन्हें आप अन्यथा कठिन तरीके से खोज सकते हैं।

आपको क्या मिलता है

इनलाइन और ब्लॉक संपादन, प्रति टैग कॉन्फ़िगर किया गया। पूर्ण Froala टूलबार के साथ पैराग्राफ और divs के लिए ब्लॉक-स्तरीय संपादन। एक सुव्यवस्थित टूलबार के साथ लाइटवेट इनलाइन मोड<span>,,<a>,<button> और शीर्षक तत्व। चुनें कि कौन से टैग एकल कॉन्फ़िगरेशन विकल्प के माध्यम सेinlineइनलाइन व्यवहार प्राप्त करते हैं - कोई बंदर-पैचिंग नहीं।

मूल निवासी GrapesJS स्टूडियो समर्थन। आधिकारिक तौर पर इसके साथ@grapesjs/studio-sdk संगत। Froala की स्टाइलशीट को विकल्प के माध्यम सेinjectCanvasStylesकैनवास आईफ्रेम में ऑटो-इंजेक्ट किया जाता है, इसलिए संपादक बिना किसी मैनुअल स्टाइलशीट वायरिंग के स्टूडियो के अंदर सही ढंग से प्रस्तुत करता है। एक चलने योग्य स्टूडियो डेमो के साथ जहाज।

दोहरी Froala संस्करण समर्थन - 4.x और 5.x । एकल संगतता एडाप्टर के माध्यम से रनटाइम संस्करण का पता लगाना। प्लगइन कोड को छुए बिना Froala को अपग्रेड या डाउनग्रेड करें। सहकर्मी रेंज पर बंद>=4.0.14 <6है ताकि आप अपने संपादक संस्करण को अपने शेड्यूल पर नियंत्रित कर सकें।

वैयक्तिकरण टोकन बॉक्स से बाहर। एक तैयार Froalapersonalization_dd कमांड ड्रॉपडाउन-चयनित मर्ज टोकन जैसे या{{Name}}{{Email}} आपके द्वारा कॉन्फ़िगर किए गए किसी भी टोकन सेट को सम्मिलित करता है। सीधे ईमेल टेम्पलेट बिल्डरों और मार्केटिंग टूल में ड्रॉप करें - किसी कस्टम कमांड कोड की आवश्यकता नहीं है।

स्मृति-सुरक्षित जीवनचक्र। प्रत्येक लंबे समय तक रहने वाले संसाधन को ट्रैक किया जाता है और अक्षम पर जारी किया जाता है: सामग्री और टूलबार (50 एमएस) के लिए डिबाउंस एसMutationObserver, कैनवास आईफ्रेमmousedownश्रोता, लंबितsetTimeoutएस, और - गंभीर रूप से - कोई भी अनाथ.fr-toolbarनोड्स जो v5 Froala कभी-कभी नष्ट दौड़ के दौरान स्ट्रैंड्स को नष्ट करता है। e2e सुइट में बीस तेजी से सक्षम/अक्षम चक्रों में सत्यापित शून्य लीक।

स्मार्ट टूलबार पोजिशनिंग। टूलबार स्थिति अपडेट GrapesJS ईवेंट rteToolbarPosUpdateका जवाब देते हैं, व्यूपोर्ट का आकार बदलते हैं और स्क्रॉल करते हैं। बॉर्डर, त्रिज्या और रिक्ति पूरी तरह से कॉन्फ़िगर करने योग्य हैं। कैरेट पुनर्स्थापना एक सुरक्षित फ़ॉलबैक श्रृंखला (→caretRangeFromPoint)caretPositionFromPoint का उपयोग करती है, इसलिए कर्सर प्लेसमेंट वेबकिट/क्रोमियम एज मामलों से बच जाता है जो भोले-भाले एकीकरण को तोड़ते हैं।

प्रथम श्रेणी TypeScript. संपूर्ण प्लगइन सख्त-मोड TypeScript में लिखा गया है। बंडल में घोषणाएं ().d.ts और घोषणा मानचित्र प्रकार करें - आपका संपादक कॉलfroala(editor, options)से सीधे पूरी तरह से टाइप किए गए विकल्प ऑब्जेक्ट में कूदता है। शून्य निहितany।

बहु-प्रारूप वितरण।

• आधुनिक बंडलर के लिए ईएसएम ().mjs
• नोड और लीगेसी टूल के लिए CommonJS ().cjs
• टैग इंस्टॉल के लिए<script>UMD ().min.js
• तीनों के लिए स्रोत मानचित्र

छोटा बंडल लगभग 50 केबी है (Froala अपने आप में एक सहकर्मी निर्भरता बनी हुई है जिसे आप अलग से लाते हैं)।

तकनीकी विशिष्टताएँ

क्या नया

• 1.2.0 — GrapesJS स्टूडियो एकीकरण। स्टूडियो कैनवास iframe में Froala शैलियों को ऑटो-इंजेक्ट करता है। स्टूडियो डेमो और प्लेराइट e2e कवरेज साथ में भेज दिया गया।
• 1.1.1 - टूलबार रिसाव फिक्स। रक्षात्मक स्वीप Froala v5 के दौरान अनाथ.fr-toolbarनोड्स को समाप्त करता है और तेजी से सक्षम/अक्षम चक्रों के तहत दौड़ को नष्ट करता है।
• 1.1.0 - TypeScript प्रवासन। पूर्ण स्रोत सख्त TypeScript में चला गया; स्रोत से उत्सर्जित घोषणाएं; वाणिज्यिक लाइसेंस अपनाया गया।
• 1.0.0 — बाज़ार रिलीज़। मॉड्यूलर आर्किटेक्चर (एक 380-लाइन फ़ाइल के बजाय आठ केंद्रित मॉड्यूल), दोहरी Froala संस्करण समर्थन, पूर्ण परीक्षण कवरेज, CI/CD पाइपलाइन।