🤫 🐙 🏦 jsiedit: विचार और सुविधाजनक प्लग-इन WYSIWYM संपादक का निर्माण हबराब्र के लिए एक उदाहरण के साथ 🧕 👊🏽 🐍

परिचय

लेख ऑनलाइन पाठ संपादन के लिए एक सुविधाजनक जावास्क्रिप्ट उपकरण बनाने के दृष्टिकोण का वर्णन करता है। एक उदाहरण के रूप में, मैंने हैबे ( नीचे वर्णित ) पर लेखों के संपादन के लिए एक प्रोटोटाइप बनाया। इसकी मदद से, मैं अब इस लेख में बदलाव कर रहा हूं।

मुझे साइट पर ग्रंथों के लिए एक ऑनलाइन संपादक चुनने के कार्य का सामना करना पड़ा। सबसे स्पष्ट समाधान WYSIWYG संपादकों में से एक होगा। लेकिन मुझे कई कारणों से यह विकल्प पसंद नहीं आया। सबसे पहले, लोकप्रिय सीएमएस सिस्टम की कई कमजोरियां WYSIWYG संपादकों के साथ जुड़ी हुई हैं। दूसरे, प्रकाशन के बाद, पाठ अक्सर संपादक में जो था उससे अलग होगा। तीसरे, ऐसे संपादकों को नए टैग और तत्वों का समर्थन करने के लिए विस्तार करना मुश्किल है। इसलिए, मैं WYSIWYM संपादक पर बस गया।

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

समस्या

मुझे ऑनलाइन संपादकों के मौजूदा कार्यान्वयन के बारे में एक बड़ी शिकायत है। वे असुविधाजनक हैं क्योंकि दृश्य कोड से अलग है। बेशक, यह बहस के लायक है कि यह WYSIWYM का आधार है। यह सही है, लेकिन एक विशिष्ट स्थिति पर नजर डालते हैं।

मान लीजिए कि आप होबे पर एक लेख लिखते हैं या मंच पर एक उत्तर देते हैं। संबंधित टैग का सिंटैक्स परिचित है, इसलिए पाठ में प्रवेश करने में कोई समस्या नहीं है। यदि आपको एक छवि सम्मिलित करने या अन्यथा एक तत्व का चयन करने की आवश्यकता है, तो आप टूलबार पर उपयुक्त टैग का चयन कर सकते हैं या इसे मैन्युअल रूप से दर्ज कर सकते हैं। पाठ का पहला संस्करण तैयार है, लेकिन भेजने से पहले प्रारूपण की जांच करने के लिए, आपको "पूर्वावलोकन" बटन पर क्लिक करने की आवश्यकता है। और यहां केवल सभी टैग के साथ न केवल स्रोत पाठ दिखाई देता है, बल्कि इसकी विशिष्ट प्रस्तुति भी है।

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

यह समस्या विकी में या सीएमएस पृष्ठों के साथ स्पष्ट रूप से दिखाई देती है, जब आप एक वाक्य को थोड़ा ठीक करने की कोशिश करते हैं, तो आपको पूरे दस्तावेज़ को संपादित करना होगा। और दस्तावेज़ जितना बड़ा होगा, उपयोगकर्ता उतना ही कठिन होगा। उसे पहले से ही एक जगह मिल गई है जिसे दृश्य प्रतिनिधित्व में सही किया जाना चाहिए, लेकिन उसे फिर से खोज के माध्यम से सभी तरह से जाने की जरूरत है, लेकिन स्रोत कोड में।

निर्णय

उपयोगकर्ता द्वारा चुने गए टुकड़े के लिए संपादक को गतिशील रूप से कनेक्ट करने की क्षमता प्राकृतिक दिखती है। निम्नलिखित कार्यान्वयनों को पाया और देखा गया: जेडिटेबल , jquery-in-place-editor , jQuery प्लगिन: इन-लाइन टेक्स्ट एडिट , Ajax.InPlaceEditor , EditableGrid , InlineEdit 3 । सभी का नुकसान समान है: वे आपको केवल एक तत्व के लिए संपादक डाउनलोड करने की अनुमति देते हैं, क्योंकि वे स्वरूपों का समर्थन नहीं करते हैं। इसलिए, संपादक को खुद बनाने और "एक साइकिल का आविष्कार करने" का निर्णय लिया गया।

तो jsiedit दिखाई दिया।

इस लेख को लिखते समय, मैं Redactor पर आया, जो आपको सभी पाठ के लिए संपादक को सक्षम करने की अनुमति देता है, लेकिन फिर से ब्लॉक अग्रिम में सेट किया जाता है, और यह एक WYSIWYG संपादक भी है। मेरे विचार के सबसे करीब Redactor Air मोड है , लेकिन यह सिर्फ स्वरूपण है।

लक्ष्य और jsiedit के उद्देश्य

कार्यान्वयन के प्रारंभिक चरण में, निम्नलिखित प्रमुख आवश्यकताओं की पहचान की गई थी:

उपयोगकर्ता को स्वरूपित पाठ को संपादित करने में सक्षम होना चाहिए;
संपादन योग्य ब्लॉक की मात्रा उपयोगकर्ता द्वारा निर्धारित की जानी चाहिए।

कार्यान्वयन

इसलिए, दो समस्याओं को हल करना आवश्यक था। आइए स्वरूपित पाठ को संपादित करने की क्षमता के साथ शुरू करें। उदाहरण के लिए, bbCode टैग का कोई भी सेट लें। मान लीजिए कि शुरू में दस्तावेज़ इस प्रारूप में बनाया गया था और bbCode टैग के साथ पाठ सर्वर पर संग्रहीत है। जब पृष्ठ को सर्वर पर उपयोगकर्ता के लिए प्रदर्शित किया जाता है, तो bbCode टैग संबंधित HTML निर्माण में परिवर्तित हो जाते हैं।
अब उपयोगकर्ता पहले से तैयार किए गए पाठ के भाग को संपादित करना चाहता है। यह पता चला है कि हमें चयनित टुकड़े के लिए मूल bbCode टैग प्राप्त करने की आवश्यकता है। दो संभावित दृष्टिकोण हैं। सबसे पहले, गतिशील रूप से (क्लाइंट पर) HTML कोड को संबंधित bbCode टेक्स्ट में बदलना संभव है। दूसरे, आप HTML टैग की विशेषताओं में bbCode टैग के बारे में पहले से जानकारी सहेज सकते हैं:

<p> ,   <b data-bbCode="b"> </b> .</p>

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

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

पाठ चयन

अब दूसरे कार्य पर विचार करें - उपयोगकर्ता को यह चुनने में सक्षम करता है कि वह कौन सा पाठ संपादित करना चाहता है माउस के साथ चयन के संबंध में, एक अच्छा लेख रेंज, टेक्स्टरेंज और चयन है , इसलिए मैं स्वयं जावास्क्रिप्ट की वस्तुओं और कार्यों का वर्णन नहीं करूंगा।

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

 <p>   <b> (!) </b>.</p>

यदि हम "(!)" का चयन करते हैं, तो संपादक को केवल "आंतरिक (?) चयन" या संपूर्ण पैराग्राफ के लिए प्रदर्शित किया जाना चाहिए? मेरा मानना है कि यहां उपयोगकर्ता को संपूर्ण पैराग्राफ को संपादित करने का अवसर दिया जाना चाहिए, लेकिन लचीलेपन के लिए, एक कॉलबैक फ़ंक्शन को शामिल करने का निर्णय लिया गया, जो प्रत्येक DOM तत्व के लिए बताएगा कि क्या संपादक को सक्रिय किया जा सकता है। एक समान फ़ंक्शन को इस तरह लागू किया जा सकता है:

 function jsiedit_fn_sample_tag_check(elem) { switch (elem.tagName) { case 'P': case 'DIV': case 'SPAN': return true; } return false; }

चयनित सीमा निर्धारित करने के लिए परिणाम निम्न एल्गोरिथम है:

 elem = range.commonAncestorContainer; //     while (elem && !fn_is_valid_for_edit(elem)) //  callback  { elem = elem.parentNode; //    }

यह सही है, लेकिन यहां एक जाल हमारे लिए इंतजार कर सकता है। आइए निम्नलिखित उदाहरण देखें:

 <div>...     ... <p>      , , .  ,</p> <p>    <b>  .</b>       .</p> ...       ...</div>

अगर हम सिर्फ कॉमन आंसर- की लेते हैं , तो हमें एक <div> मिलता है और उपयोगकर्ता को संपादन के लिए सभी पाठ देते हैं। दूसरी ओर, उपयोगकर्ता सबसे अधिक संभावना केवल चयनित दो पैराग्राफों को संपादित करना चाहता है। इस मामले में, हमें प्रत्येक चयन को टैग और स्टॉप की पूर्ण कवरेज तक विस्तारित करना होगा।
रेंज ऑब्जेक्ट में उपयुक्त गुण हैं: startContainer और endContainer । लेकिन यहां कंटेनरों को एक स्तर पर रखना आवश्यक है ताकि वे भाइयों के रूप में बदल जाएं। निम्नलिखित कोड निकला है:

 var prnt = rng.commonAncestorContainer; //     var sc = rng.startContainer; //  ""  var ec = rng.endContainer; //  ""  if ((sc == prnt) || (ec == prnt)) //          { sc = prnt; ec = prnt; } else //       { while (sc.parentNode != prnt) { sc = sc.parentNode; } while (ec.parentNode != prnt) { ec = ec.parentNode; } }

इस कोड के लिए, आपको किसी विशिष्ट ब्लॉक को संपादित करने की क्षमता को सत्यापित करने के लिए पिछले कोड को जोड़ना होगा। हम एक सेट बनाने के लिए setStartBefore और setEndAfter विधियों का उपयोग करेंगे:

  var rng_new = document.createRange(); rng_new.setStartBefore(sc); rng_new.setEndAfter(ec);

यह चयनित ब्लॉक को निर्धारित करने का कार्य पूरा करता है।

संपादक प्रदर्शन

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

  var tarea = document.createElement("textarea"); //     tarea.value = fn_get_text_for_range(rng_new); //     tarea.style.width = rng_new.startContainer.clientWidth; //    rng_new.startContainer.parentNode.insertBefore(tarea, rng_new.startContainer); //       rng_new.deleteContents(); //

इस कोड को निष्पादित करते समय, वास्तविकता अनुमानित परिणाम से बहुत अलग थी। कारण यह था कि startContainer विशेषता मेरे चयन के लिए "पूर्वज" थी। मैं इसे इस तथ्य से समझा सकता हूं कि चयनित ब्लॉक से पहले एक नई सीमा शुरू होती है। परिणामस्वरूप, मैंने पहले वाले sc और ec वैरिएबल का उपयोग करने का निर्णय लिया।
अगली आश्चर्य एक वस्तु को एक सीमा में जोड़ने का प्रयास था। व्यवहार में, यह पता चला है कि जोड़ा वस्तु सीमा में गिर गई और अगली पंक्ति द्वारा नष्ट हो गई। इससे बचने के लिए रेंज के बाद एडिटिंग एरिया बनाना शुरू किया। इसके अतिरिक्त, मैंने संपादक के लिए ऊंचाई निर्धारित करने का निर्णय लिया। निम्नलिखित कोड निकला है:

  var tarea = document.createElement("textarea"); //     tarea.value = fn_get_text_for_range(rng_new); //     tarea.style.width = ec.clientWidth + 'px'; //    if (sc == ec) { tarea.style.height = Math.min(document.body.clientHeight / 2, sc.clientHeight) + 'px'; //    } else { tarea.style.height = Math.min(document.body.clientHeight / 2, sc.clientHeight + ec.clientHeight) + 'px'; //    } ec.parentNode.insertBefore(tarea, ec.nextSibling); //     rng_new.deleteContents(); //

परिणामों को सहेजने और संपादन को रद्द करने के लिए, textarea में कुछ बटन जोड़े गए थे।

अंतिम मुद्दा संपादक की चुनौती थी। संपादक को सक्रिय किया जा सकता है, उदाहरण के लिए, संदर्भ मेनू से पृष्ठ पर एक विशिष्ट बटन पर क्लिक करके, स्वचालित रूप से Alt दबाए गए पाठ के साथ हाइलाइट करते समय आदि। मैंने सबसे सरल विधि को जोड़ने का फैसला किया - यह एक बटन प्रदर्शित कर रहा है जहां चयन बंद हो गया है।

इसके लिए, माउसअप इवेंट हैंडलर को जोड़ना आवश्यक था। बटन प्रदर्शित करने की स्थिति पेजएक्स और पेजवाई विशेषताओं द्वारा निर्धारित की गई थी। यह लगभग निम्नलिखित निकला:

 function jsiedit_mouseup(event) { var btn = document.createElement("input"); btn.type = "button"; btn.value = "Edit"; btn.style.position = 'absolute'; btn.style.top = event.pageY + 'px'; btn.style.left = event.pageX + 'px'; btn.onclick = fn_start_editor; document.body.appendChild(btn); } function jsiedit_onload() { document.body.addEventListener("mouseup", jsiedit_mouseup, false); } document.addEventListener("DOMContentLoaded", jsiedit_onload, false);

यह कोड सही ढंग से काम नहीं करता है, क्योंकि यह हर बार माउस बटन को रिलीज़ करने पर एक नया "एडिट" बटन बनाता है। समायोजन के लिए, यह एक वैश्विक चर में वर्तमान स्थिति को बचाने और उपयोगकर्ता के कार्यों के आधार पर इसे बदलने के लिए पर्याप्त है।

इस पर, jsiedit का पहला संस्करण तैयार था।

हबहार के लिए संपादक

क्षमताओं के प्रदर्शन के रूप में, यह हबर के लिए एक प्रोटोटाइप बनाने का निर्णय लिया गया था। पहला लेख लिखते समय मुझे ऐसे संपादक की आवश्यकता महसूस हुई, क्योंकि यह बड़ा हो गया था, और पूर्वावलोकन किए बिना त्रुटियों की तलाश करना कठिन और असुविधाजनक था। इनपुट फॉर्म का आकार बदलने पर प्रतिबंध से स्थिति बढ़ गई थी। परिणामस्वरूप, पाठ का मूल संस्करण एक नोटबुक में लिखा गया था। यहां आप खुद को आज़माने के लिए उदाहरण को चलाने के बारे में पढ़ सकते हैं।

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

संपादक के निर्माण के दौरान आने वाली समस्याओं पर विचार करें।

पैराग्राफ की कमी

पहली कठिनाई यह थी कि हबर के ग्रंथों में कोई पैराग्राफ नहीं हैं। इसके बजाय, वे बचत करते समय बस लाइन ब्रेक का उपयोग करते हैं। नतीजतन, संपादन योग्य ब्लॉक कुछ सीमा टैग तक सीमित होना चाहिए। आइए निम्नलिखित उत्पन्न HTML कोड को देखें:

   <br> <h4></h4><br>   ,       "P".<br> <br>  ,    <b> <i></i> </b>.     "BR"<br>    .<br> <br>

सभी पाठ एक DIV में हैं, इसलिए पिछला एल्गोरिथ्म संपादन के लिए सभी पाठ वापस कर देगा। इस मामले में, हमें दो निकटतम बीआर टैग के बीच के ब्लॉक को "कट" करने की आवश्यकता है। ऐसा करने के लिए, हम पिछलेसिब्लिंग और नेक्स्टइब्लिंग के गुणों से गुजर सकते हैं ।

इस स्तर पर सबसे मुश्किल नोड्स की जाँच के लिए कार्यों की परिभाषा के लिए दृष्टिकोण का विकल्प था। परिणामस्वरूप, यह निर्णय लिया गया कि फ़ंक्शन इस नोड के लिए तार्किक गुणों की एक सरणी लौटाएगा:

इस नोड को स्वतंत्र रूप से चुना जा सकता है।
नोड को ही चयन में शामिल किया जाना चाहिए।
यह नोड चयन के लिए एक सामान्य पूर्वज हो सकता है।
भाइयों को चुनते समय यह नोड एक सीमित नोड हो सकता है।

निम्नलिखित सत्यापन फ़ंक्शन निकला:

 function jsiedit_fn_sample_check_node(node) { switch (node.tagName) { case 'BR': return [false, false, false, true]; case 'P': return [true, true, false, true]; case 'DIV': case 'SPAN': return [true, false, true, true]; } return false; }

यदि हम Habré पर पूर्वावलोकन की बारीकियों को ध्यान में रखते हैं, तो हमें निम्नलिखित फ़ंक्शन मिलते हैं:

 function jsiedit_fn_sample_habr_check_node(node) { switch (node.tagName) { case 'BR': return [false, false, false, true]; case 'DIV': if (node.className == 'content html_format') return [true, false, true, true]; } return false; }

नए फ़ंक्शन को देखते हुए, चयनित डेटा की सीमाओं को निर्धारित करने के लिए ब्लॉक को फिर से लिखा गया था:

फ़ंक्शन jsiedit_get_bounds

 function jsiedit_get_bounds(fn_check_node) { var sel = window.getSelection(); //    if (!(typeof sel === 'undefined')) // ,  -   { if (sel.rangeCount == 1) //      { var rng = sel.getRangeAt(0); //  range   var prnt = rng.commonAncestorContainer; //     var sc = rng.startContainer; //  ""  var ec = rng.endContainer; //  ""  if ((prnt.tagName == 'DIV') || (prnt.tagName == 'SPAN')) { if (prnt == sc) sc = prnt.childNodes.item(rng.startOffset); if (prnt == ec) ec = prnt.childNodes.item(rng.endOffset); } var chk = fn_check_node(prnt); var include_bounds = [true, true]; //     if (chk && chk[2] && (sc != prnt) && (ec != prnt)) //      ,       { while (sc.parentNode != prnt) { sc = sc.parentNode; } while (ec.parentNode != prnt) { ec = ec.parentNode; } } else if (chk && chk[0]) //     ,  { return [prnt, chk[1]]; } else //   ,    { while (prnt.parentNode) { chk = fn_check_node(prnt.parentNode); if (chk && chk[2]) { sc = prnt; ec = prnt; prnt = prnt.parentNode; break; } else if (chk && chk[0]) { return [prnt.parentNode, chk[1]]; } prnt = prnt.parentNode; if (!prnt.parentNode) return false; } } chk = fn_check_node(sc); if (chk && chk[0]) //      { } else { while (sc.previousSibling) //  ""  { sc = sc.previousSibling; chk = fn_check_node(sc); if (chk && chk[3]) { include_bounds[0] = chk[1]; //      break; } } } chk = fn_check_node(ec); if (chk && chk[0]) //      { } else { while (ec.nextSibling) //  ""  { ec = ec.nextSibling; chk = fn_check_node(ec); if (chk && chk[3]) { include_bounds[1] = chk[1]; //      break; } } } return [sc, ec, include_bounds[0], include_bounds[1]]; } } return false; }

Jsiedit के पहले संस्करण की जांच करते समय, कभी-कभी चयनित टुकड़े के बजाय, संपादक ने सभी पाठ को निकला। इसका कारण यह निकला कि जब चयन शून्य पर शुरू हुआ था, तो सिस्टम ने पूर्वज को स्टार्टकॉन्टेनर के रूप में लौटा दिया , और जिस बाल तत्व से चयन भेजा जा रहा था वह स्टार्टऑफ़सेट में सहेजा गया था । अंत के साथ एक ऐसी ही स्थिति। इसलिए, मुझे निम्नलिखित कोड का उपयोग करना पड़ा:

 if ((prnt.tagName == 'DIV') || (prnt.tagName == 'SPAN')) { if (prnt == sc) sc = prnt.childNodes.item(rng.startOffset); if (prnt == ec) ec = prnt.childNodes.item(rng.endOffset); }

टैग के प्रकार से जांच करना अधिक सही हो सकता है, लेकिन प्रोटोटाइप के लिए यह चेक मेरे साथ ठीक था।

पाठ रूपांतरण

संपादक को काम करने के लिए, दो रूपांतरण कार्यों की आवश्यकता थी। पृष्ठ पर चुने गए टुकड़े के आधार पर सबसे पहले हैबर मार्कअप भाषा में एक कोड तैयार करना है। यह एक बहुत ही सरल हिस्सा है, क्योंकि आप DOM को बायपास कर सकते हैं और टैग्स को अलग-अलग कर सकते हैं।

उलटा परिवर्तन का पूर्वावलोकन हबब्राह पर पहले से मौजूद पूर्वावलोकन तंत्र का उपयोग करके किया जा सकता है - सर्वर पर समायोजित पाठ भेजें और HTML कोड वापस प्राप्त करें। लेकिन मैंने इस रूपांतरण को क्लाइंट की तरफ करने का फैसला किया। प्रारंभ में, मैंने जावास्क्रिप्ट के लिए तैयार HTML पार्सर खोजने की कोशिश की। दुर्भाग्य से, पाया गया कार्यान्वयन मुझे सूट नहीं किया। तब मुझे एहसास हुआ कि मुझे खरोंच से एक पार्सर लिखने और दूसरी बाइक का आविष्कार करने की आवश्यकता होगी। चूंकि यह एक त्वरित मामला नहीं है, इसलिए व्यक्तिगत लेखों के लिए पार्सर को स्थगित करने और प्रोटोटाइप के लिए कम से कम एक अस्थायी समाधान खोजने का निर्णय लिया गया। सबसे आसान दृष्टिकोण के रूप में, यह केवल गैर-मानक टैग के लिए रूपांतरण जोड़ने का निर्णय लिया गया था। निम्नलिखित कार्य निकला है:

 jsiedit_fn_sample_habr_produce = function(src) { var rep = [ [/<source\s+lang=/gi, '<pre><code class='], [/<\/source>/gi, '</code></pre>'], [/\n/g, '<br>'], [/<hh\s+user=['"]([^'"]+)['"]\s*\/>/gi, '<a href="http://habrahabr.ru/users/$1/" class="user_link">$1</a>'], [/<spoiler\s+title=['"]([^'"]+)['"]>/gi, '<div class="spoiler"><b class="spoiler_title">$1<\/b><div class="spoiler_text">'], [/<\/spoiler>/gi, '</div></div>'] ]; var str = src; var i; for (i = 0; i < rep.length; i++ ) { str = str.replace(rep[i][0], rep[i][1]); } return str; };

लेकिन फिर मुझे इस समारोह से विस्तार से निपटना पड़ा। प्रोग्राम कोड - <स्रोत> टैग के साथ एक समस्या थी। इसमें शामिल सभी टैग की व्याख्या नहीं की जानी चाहिए, लेकिन इन ब्लॉकों के बाहर उनकी व्याख्या की जानी चाहिए। इस वजह से, स्वरूपण "टूट गया है।"
कार्य समाधानों में से एक "& lt;" के साथ "<" सभी वर्णों का स्वचालित प्रतिस्थापन था; कोड प्राप्त होने पर। हालांकि यह काम किया, संपादक में कोड बहुत बदसूरत निकला। नतीजतन, मैंने फ़ंक्शन को परिष्कृत करना शुरू कर दिया। एल्गोरिथ्म ने निम्नलिखित को चुना: कोड के सभी टुकड़ों को ढूंढें जिसमें कोड शामिल है, और फिर उनके अंदर सभी महत्वपूर्ण पात्रों को प्रतिस्थापित करें। निम्नलिखित रूपांतरण निकला है:

 jsiedit_fn_sample_habr_produce = function(src) { var fn_source = function(s) { var res = s.match(/^<source\s+lang=([^>]*)>([\s\S]*)<\/source>$/i); if (res) return '<pre><code class=' + res[1] + '>' + res[2].replace(/</g,'<').replace(/>/g,'>') + '</code></pre>'; res = s.match(/^<source>([\s\S]*)<\/source>$/i); if (res) return '<pre><code>' + res[1].replace(/</g,'<').replace(/>/g,'>') + '</code></pre>'; res = s.match(/^<pre>([\s\S]*)<\/pre>$/i); if (res) return '<pre>' + res[1].replace(/</g,'<').replace(/>/g,'>') + '</pre>'; return s.replace(/</g,'<').replace(/>/g,'>'); }; var rep = [ [/(<source\s([\s\S])*?<\/source>)|(<source>([\s\S])*?<\/source>)|(<pre>([\s\S])*?<\/pre>)/gi, fn_source], [/<anchor>([^<]*)<\/anchor>/gi, '<a name="$1"></a>'], [/\n/g, '<br>'], [/<hh\s+user=['"]([^'"]+)['"]\s*\/>/gi, '<a href="http://habrahabr.ru/users/$1/" class="user_link">$1</a>'], [/<spoiler\s+title=['"]([^'"]+)['"]>/gi, '<div class="spoiler"><b class="spoiler_title">$1<\/b><div class="spoiler_text">'], [/<\/spoiler>/gi, '</div></div>'] ]; var str = src; var i; for (i = 0; i < rep.length; i++ ) { str = str.replace(rep[i][0], rep[i][1]); } return str; };

संभावना है कि इस कोड को बहुत अच्छा बनाया जा सकता है, लेकिन अब हैबर के लिए संपादक को केवल कुछ प्रोटोटाइप के रूप में बनाया गया था - विचार के लिए तर्क। यदि आवश्यक हो, तो कार्यक्षमता में सुधार किया जा सकता है और अतिरिक्त टैग जोड़े जा सकते हैं। मुझे लगता है कि नियमित अभिव्यक्ति काफी हैं। पार्सर को लागू करने के विचार ने प्राथमिकता को कम कर दिया है।

निष्कर्ष

संक्षेप में, मैं इस बात पर जोर देना चाहता हूं कि इस लेख का उद्देश्य एक जावास्क्रिप्ट इन-प्लेस WYSIWYM संपादक और एक विशिष्ट कार्यान्वयन दृष्टिकोण बनाने के विचार का वर्णन करना था। मुझे खुशी होगी कि अगर इस तरह के संपादक किसी और के हित में हों। कृपया अपनी राय लिखें। शायद अधिक दिलचस्प समाधान पहले से मौजूद हैं?

क्यू एंड ए

Q1: xxxxxxx लाइब्रेरी का उपयोग क्यों नहीं किया जाता है? सभी त्रुटियां क्यों नहीं हैं? क्यों कोड yyyyyyy ब्राउज़र में काम नहीं करता है?
A1: मैं एक जगह WYSIWYM संपादक के विचार पेश करने की कोशिश की। प्रोटोटाइप अवधारणा का एक प्रमाण है जो एफएफ 18 में काम करता है, जहां मैं अब स्ट्रिंग डेटा लिख रहा हूं। अब तक मैं केवल इच्छुक उपभोक्ता रहा हूं। यदि आप इस पुस्तकालय के विकास में रुचि रखते हैं, तो लिखें। दी गई जानकारी वांछित ब्राउज़रों या रूपरेखा को जोड़ने के लिए आवश्यक ब्राउज़रों में काम सुनिश्चित करने के लिए पर्याप्त है।
जोड़: स्क्रिप्ट को WebKit- आधारित ब्राउज़र में काम करने के लिए समायोजित किया गया है।

क्यू 2: बचत करते समय हैबर हाइलाइट सिंटैक्स के लिए बुकमार्कलेट क्यों नहीं है? सभी टैग समर्थित क्यों नहीं हैं?
O2: यदि रुचि है, तो यह सब महसूस किया जा सकता है। शेष टैग में से, मैं मुख्य रूप से <video> लागू करूंगा।

Q3: आपकी तत्काल योजनाएं क्या हैं?
O3: बहुत ज्यादा आपकी प्रतिक्रिया पर निर्भर करेगा। सबसे पहले, आपको लेखों को संपादित करने के लिए समर्थन जोड़ना होगा (मैं अभी जांच नहीं कर सकता), और न केवल नए बना रहा हूं। (पहले से जोड़ा गया) दूसरे, ज्ञात त्रुटियों को समाप्त करने और समर्थित टैग की सूची का विस्तार करने के लिए। फिर, सबसे अधिक संभावना है, मैं बुकमार्क को हटाने के लिए एफएफ के लिए ऐड-ऑन के साथ शुरू करूंगा।

Q4: मुझे स्रोत कहां मिल सकता है?
O4: सब कुछ परियोजना पृष्ठ पर github पर है: http://praestans.github.com/jsiedit/ ।

Q5: Habrahabr के लिए jsiedit का उपयोग कैसे करें?
O5: एक बुकमार्कलेट के रूप में चलाना सबसे आसान है ( यह क्या है )। एक नया विषय बनाते समय, आपको एक पूर्वावलोकन बनाने की आवश्यकता होती है, जिसके बाद माउस के साथ चुने जाने पर संपादक पूर्वावलोकन क्षेत्र में सक्रिय हो जाएगा। बचत करते समय, पूर्वावलोकन क्षेत्र से सभी डेटा इनपुट विंडो में स्थानांतरित किया जाएगा।

यहां विस्तृत निर्देशों के साथ एक छवि है।

यह एक बुकमार्कलेट का एक लिंक है (इसे बुकमार्क में जोड़ा जाना चाहिए)। यहाँ बुकमार्क का स्वरूपित पाठ है:

 javascript: (function () { var a = document.createElement('script'); a.type = 'text/javascript'; a.src = 'http://praestans.github.com/jsiedit/lib/habr_bmk.js'; document.getElementsByTagName('head')[0].appendChild(a); })();

चेतावनी: अब केवल निम्नलिखित टैग समर्थित हैं: A, ANCHOR, B, BLOCKQUOTE, BR, EM, H1, H2, H3, H4, H5, H6, HABRACUT, HH, HR, I, IMG, LI, OL, SOURCE, STRIKE, मजबूत, उप, सुपर, टेबल, टीडी, टीएच, टीआर, यू, उल। अगले (अपने लिए नया) टैग का उपयोग करते समय, यह सत्यापित करने के लिए पूर्वावलोकन का उपयोग करें कि टैग की सही व्याख्या की गई है। कुछ उपयोग मामलों के लिए, गलत स्वरूपण प्राप्त किया जा सकता है, और संबंधित तत्व का पाठ गायब हो जाएगा।

Q6: और क्या आप को पता है की जरूरत है?
O6: इस समय, काम की कई त्रुटियां और विशेषताएं हैं जो मुझे ज्ञात हैं:
1. जब सूचियों को बीच में सहेजते हैं, तो <li> ब्लॉक के बीच का जोड़ घटित होता है, इसलिए सूची "बिखरना" शुरू होती है। यदि नया <li> टैग पिछले एक की अंतिम पंक्ति पर है, तो कोई अतिरिक्त स्किप नहीं होगा।
2. अंतिम पैराग्राफ को बचाने के बाद, कभी-कभी, यह एक से एक के साथ स्थानों को बदल देता है। मुझे लगता है कि डोम में रेंज और आवेषण के साथ काम करने के कार्यों को समझना आवश्यक है।
3. यदि आप पाठ के एक बड़े ब्लॉक का चयन करते हैं, तो यह ब्लॉक छिपा हुआ होगा, और संपादक ब्लॉक की शुरुआत में होगा और आपको स्क्रॉल करना होगा। एक फ़ंक्शन जोड़ना आवश्यक है जो यह सुनिश्चित करेगा कि संपादन शुरू होने पर संपादक स्क्रीन पर दिखाई दे।
4. कार्यान्वयन की विशेषताओं में से एक यह है कि कार्यक्रम स्वयं पूर्वावलोकन के HTML पाठ के आधार पर मार्कअप के स्रोत पाठ को उत्पन्न करता है। चूंकि मूल लेखक कोड उपलब्ध नहीं है, तो सभी टैग उसी तरह प्रस्तुत किए जाते हैं, वर्तमान संस्करण में - बड़े अक्षरों में।
5. इस तथ्य के परिणामस्वरूप कि कार्यक्रम दर्ज किए गए पाठ को HTML में कनवर्ट करता है, और फिर हबराब्रिज के कोड पर वापस जाता है, रूपांतरण त्रुटियों के साथ पाठ को कम से कम त्रुटियों को सही करने के लिए वापस करना असंभव है। यदि <स्रोत> ब्लॉक "दूषित" कोड में आते हैं, तो कोण कोष्ठक "<" और ">" को "& lt;" से बदल दिया जाएगा। और & gt; " लेकिन टैग के लिए उन्हें सही करने के बाद <स्रोत> और </ स्रोत> सब कुछ फिर से सही हो जाना चाहिए।
6. किसी लेख को संपादित करते समय, <habracut> टैग पर पाठ गायब हो जाता है, क्योंकि यह पूर्वावलोकन में नहीं है।

परिशिष्ट 1: मौजूदा लेखों को संपादित करने की क्षमता को जोड़ा, न कि केवल नए बनाने के लिए।
इसके अलावा एक बग भी तय किया गया था जिसके कारण स्क्रिप्ट वेबकिट-आधारित ब्राउज़रों में काम नहीं करती थी। धन्यवाद Leksat और tkf । कारण यह था कि फ़ंक्शन पैरामीटर को उसके डिफ़ॉल्ट मान पर सेट करना मेरे लिए स्वाभाविक था। फ़ायरफ़ॉक्स ने सब कुछ स्वीकार कर लिया, लेकिन क्रोम निम्नलिखित निर्माण को नहीं समझता है:

 function(param1, param2=default_value)

jsiedit: विचार और सुविधाजनक प्लग-इन WYSIWYM संपादक का निर्माण हबराब्र के लिए एक उदाहरण के साथ