Drupal के लिए CKEditor TextSelection: Source मोड पर स्विच करते समय अपना कर्सर और चयन बनाए रखें

यह मॉड्यूल क्या करता है

CKEditor TextSelection एक Drupal मॉड्यूल है जो CKEditor 5 के “Text Selection” प्लगइन को Drupal के CKEditor 5 एडिटर में इंटीग्रेट करता है। इसका मुख्य लक्ष्य बहुत सरल है: WYSIWYG और Source मोड के बीच टॉगल करते समय कर्सर की स्थिति और टेक्स्ट चयन को सुरक्षित रखना — और चयन को दृश्य में रखने के लिए उसे स्क्रॉल करके दिखाना।

• WYSIWYG ↔ Source टॉगल के दौरान कर्सर की स्थिति सुरक्षित रखता है।
• वास्तविक टेक्स्ट चयन सुरक्षित रखता है (सिर्फ caret नहीं)।
• दोनों मोड में चयन दिखाने के लिए व्यूपोर्ट को स्क्रॉल करता है।
• बेहतर Source एडिटिंग अनुभव के लिए CKEditor CodeMirror Source Editing के साथ भी अच्छी तरह काम करता है।
• क्लासिक CKEditor 4 ऐड-ऑन व्यवहार से प्रेरित: CKEditor 4 TextSelection .

यह क्यों महत्वपूर्ण है (एक UX डिटेल जो वाकई समय बचाती है)

एडिटर Source मोड में अच्छे कारणों से जाते हैं: पेस्ट किए गए मार्कअप को साफ करना, लिंक का कोई attribute समायोजित करना, सूची (list) संरचना ठीक करना, headings सत्यापित करना, या यह सुनिश्चित करना कि HTML बिल्कुल वैसा ही है जैसा वे चाहते हैं। हर टॉगल पर चयन/कर्सर खोने से घर्षण बढ़ता है—खासकर लंबे लेखों में। इस मॉड्यूल का लक्ष्य सरल है: आपको “flow” में बनाए रखना।

यह कैसे काम करता है (हाई-लेवल)

WYSIWYG से Source मोड में स्विच करते समय, प्लगइन एडिटर मॉडल से आपके वर्तमान कर्सर स्थान या चयन को HTML सोर्स में संबंधित स्थान पर मैप करता है। वापस स्विच करने पर, यह Source मोड में कर्सर/चयन पढ़कर उसे रिच टेक्स्ट एडिटर में पुनर्स्थापित करता है। अगर किसी कारण से मैपिंग पूरी तरह संभव नहीं हो (edge cases होते हैं), तो यह gracefully fail करता है—एडिटर को तोड़े बिना।

आज़माएँ (डेमो)

क्या आप underlying CKEditor 5 प्लगइन को एक्शन में देखना चाहते हैं? डेमो खोलें, कोई वाक्यांश चुनें, Source टॉगल करें, और देखें कि चयन उसी जगह बना रहता है: CKEditor 5 Text Selection Plugin Demo .

Drupal प्रोजेक्ट लिंक

• प्रोजेक्ट पेज: https://www.drupal.org/project/ckeditor_textselection 
• रिलीज़: https://www.drupal.org/project/ckeditor_textselection/releases (नवीनतम संस्करण और compatibility notes के लिए यहाँ देखें)
• Git निर्देश (clone/patch workflow): https://www.drupal.org/project/ckeditor_textselection/git-instructions 
• Issues: https://www.drupal.org/project/issues/ckeditor_textselection 

Installation

1) Composer के जरिए इंस्टॉल करें

Composer का उपयोग करके मॉड्यूल इंस्टॉल करें (recommended)। यदि आप किसी खास version को चाहते हैं, तो उसे Releases page से चुनें।

composer require drupal/ckeditor_textselection

2) मॉड्यूल enable करें

CKEditor TextSelection को किसी भी contributed मॉड्यूल की तरह enable करें (UI या Drush)।

3) अपने text format में enable करें

1. Administration → Configuration → Content authoring → Text formats and editors पर जाएँ।
2. वह format खोलें जो CKEditor 5 का उपयोग करता है।
3. CKEditor 5 settings के अंतर्गत Text Selection प्लगइन enable करें।
4. सुनिश्चित करें कि toolbar में Source editing बटन उपलब्ध है (टॉगल करने के लिए Source मोड चाहिए)।
5. text format configuration save करें।

4) हो गया

कोई अतिरिक्त settings आवश्यक नहीं हैं। enable होने के बाद, जब भी आप modes टॉगल करेंगे, चयन संरक्षण अपने-आप काम करेगा।

CodeMirror Source Editing के साथ उपयोग

यदि आपकी editorial टीम Source मोड में syntax highlighting पसंद करती है, तो इस मॉड्यूल को CKEditor CodeMirror Source Editing के साथ जोड़ें। इससे readability बढ़ती है और चयन संरक्षण भी बरकरार रहता है।

अंदरूनी बातें: upstream प्रोजेक्ट्स

यह Drupal मॉड्यूल upstream CKEditor 5 प्लगइन पर आधारित है। अगर आप उसे देखना या योगदान देना चाहें:

• GitHub repository: https://github.com/levmyshkin/ckeditor5-textselection 
• Packagist package: https://packagist.org/packages/levmyshkin/ckeditor5-textselection 

Feedback & contributions welcome

मुझे Drupal editors, site builders और developers से feedback मिलना अच्छा लगेगा — खासकर उन tricky edge cases पर जहाँ WYSIWYG और HTML के बीच selection mapping अस्पष्ट हो सकता है। कृपया अपने निष्कर्ष साझा करें, issues खोलें, या योगदान दें: Drupal.org पर CKEditor TextSelection .