कई लोग पहले से ही जानते हैं कि प्लेटफ़ॉर्म 8.3.14.1565 की रिलीज़ में, इंटरनेट एक्सप्लोरर ब्राउज़र को वेब-किट से बदल दिया गया था, यह वास्तव में एक बड़ा कदम है, लेकिन मुझे यकीन है, मेरी तरह, यह अभी तक स्पष्ट नहीं है कि क्या है। 1C में वेब-किट का उपयोग करने का अनुभव था, जेएस को 1 सी से और जेसी से 1 सी को कॉल करने का अनुभव था। आइए एक साथ समझने की कोशिश करें कि एक दूसरे से कैसे अलग है, और एक ही समय में कुछ उपयोगी है। हां, और निश्चित रूप से कई को एक नए प्लेटफॉर्म पर अपडेट करने के बाद अपने समान शिल्प को फिर से लिखना होगा, इसलिए मुझे उम्मीद है कि मेरा अनुभव उपयोगी होगा।
यह सब इस तथ्य के साथ शुरू हुआ कि कार्य उत्पन्न हुआ: "हम चाहते हैं कि, यूटी में, उत्पाद के लिए एक स्वरूपित विवरण दर्ज करें ताकि बाद में यह ऑनलाइन स्टोर में उड़ जाए", क्योंकि उत्पाद के लिए मानक विवरण बिना किसी ठोस लाइन के आता है और बहुत अच्छा नहीं लगता है। तुरंत एक स्वरूपित दस्तावेज़ का उपयोग करने की इच्छा थी, एक साधारण संपादक है, और आप इसे HTML में अपलोड कर सकते हैं। लेकिन जैसे ही मैंने वेब डेवलपर्स को प्रारूपित दस्तावेज़ द्वारा उत्पन्न HTML दिखाया, उन्होंने तुरंत अपना हाथ लहराया और कहा कि यह काम नहीं करेगा। आवश्यक ब्लॉक तत्वों को प्रदर्शित करने के लिए साइट की अपनी शैली पहले से ही है और इस तरह के पाठ का व्यवहार अप्रत्याशित हो सकता है।
एक स्वरूपित दस्तावेज़ का HTML फ़ंक्शन टैग की पूरी संरचना के साथ, और इनलाइन शैलियों के साथ सबसे अप्रिय क्या है, एक पूरी तरह से गठित HTML पृष्ठ देता है। ऐसा दिखता है।
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta name="format-detection" content="telephone=no" /> <style type="text/css"> body{margin:0;padding:8px;} p{line-height:1.15;margin:0;white-space:pre-wrap;} ol,ul{margin-top:0;margin-bottom:0;} img{border:none;} li>p{display:inline;} </style> </head> <body> <p><span style="text-decoration: underline;"></span></p> <p><span style="font-weight: bold;"> </span></p> <p><span style="color: #ff0000;font-weight: normal;"> </span></p> <p><br></p> </body> </html>
और अगर बॉडी टैग की सामग्री प्राप्त करना एक सरल कार्य है, तो मैं टैग से शैली विशेषताओं को पार्स और काटना नहीं चाहता था।
TinyMCE एक अच्छा लेआउट वापस लाता है। केवल रंग के मामले में खुद को इनलाइन शैलियों की अनुमति देना, जो पहले से ही बहुत बेहतर है।
<p></p> <p><strong></strong></p> <p><span style="color: #ff0000;"></span></p>
तृतीय-पक्ष पाठ संपादक TinyMCE को एकीकृत करने का निर्णय लिया गया। इसके अलावा, 1 सी समुदाय के साथ इसके एकीकरण का अनुभव पहले से ही काफी बड़ा है।
हो सकता है कि यह तब एक गलती थी, और आपको बस एक स्वरूपित दस्तावेज द्वारा उत्पन्न पाठ को पार्स करना था, लेकिन हमारे पास जो हमारे पास है।
1. समाधान की विशेषताएं
चूँकि 1C, HTML सिस्टम में फ़ाइल सिस्टम से स्थानीय फ़ाइलों को पृष्ठ पर लोड करने की अनुमति नहीं देता है, इसके लिए आपको निश्चित रूप से एक वेब सर्वर या अस्थायी भंडारण में इस फ़ाइल के पते की आवश्यकता होती है, 1C के बगल में टाइनी js लाइब्रेरी रखें और इसे HTML दस्तावेज़ के हेडर में लोड करें आप नहीं कर सकते - आपको एक HTML लेआउट के साथ एक फ़ाइल भी बनानी होगी जो आंतरिक रूप से तैयार संपादक विंडो बनाती है और पहले से ही HTML दस्तावेज़ से जुड़ी है।
सामान्य तौर पर, पुस्तकालय में लोड करने के लिए अगर आपको रिपॉजिटरी में इसके लिए एक पता मिलता है, तो यह किया जा सकता है यदि इसे एक फ़ाइल में संकलित किया गया था, और टिनी, मुख्य पुस्तकालय के अलावा, प्लग-इन js-files, एक शैली प्रबंधक, और शैलियाँ, स्वयं दरार फ़ाइलें शामिल हैं , प्रतीक, आदि, और जैसा कि आप इसे समझते हैं, यह कार्य को बहुत जटिल करता है। एक समय में, इस सारे सामान को एक फ़ाइल में संकलित करने और समस्याओं को न जानने का विचार भी था, लेकिन टूल्स को समझने में काफी समय लगा। तब TinyMCE बिल्डर आधिकारिक वेबसाइट पर पाया गया था, जो सभी js को एक फ़ाइल में संकलित करता है, और अगर सीएसएस के साथ भी ऐसा ही होता है तो यह एक छोटी जीत होगी, लेकिन नहीं, सीएसएस अभी भी कई फ़ोल्डरों के बगल में है।
TinyMCE संपादन विंडो के लिए एक iframe बनाता है, जो स्वयं पृष्ठ में एक एम्बेडेड HTML दस्तावेज़ है, इसलिए इस iframe 1C में होने वाली घटनाओं को ट्रैक नहीं किया जा सकता है, इसके बारे में और नीचे।
विकास के समय UT 11 के कॉन्फ़िगरेशन में 8.3.12 की संगतता मोड था, इसलिए वास्तव में अब यह IE को एक अंतर्निहित ब्राउज़र के रूप में उपयोग करता था, लेकिन एक और अपडेट ने नए संस्करणों में एक संक्रमण को निहित किया जो पहले से ही वेब-किट का उपयोग करते हैं।
2. पहला कदम
वेब-किट के साथ काम करने में मुख्य अंतर:
HTML फ़ील्ड्स की मुख्य वस्तु में अब एक अलग संरचना है और पृष्ठ की सामग्री के साथ काम करने के लिए आपको
डिफ़ॉल्ट व्यूअर प्रॉपर्टी का उपयोग करने की आवश्यकता है
.HTML.Document.DefaultView
पहले इसके लिए
पेरेंटविंडो प्रॉपर्टी का इस्तेमाल किया था
.HTML.Document.parentWindow
Eval का उपयोग करने पर प्रतिबंध, जिसका उपयोग सार्वभौमिक रूप से JS कोड को लागू करने के लिए किया जाता था। कुछ इस तरह
Elements.FieldHTML.Document.parentWindow.eval ("अलर्ट (1C से कॉल कोड)")
लेकिन आप 1 सी से सीधे तरीकों तक पहुंच सकते हैं।
एलिमेंट्स। डीडीमेल HTML.Document.DefaultView.NameMethodJS ();
और मैंने जल्दी से उन सभी छोटे तरीकों के लिए रैपिंग फ़ंक्शन का निर्माण किया जिनकी मुझे आवश्यकता है।
function GetText(){ return tinyMCE.activeEditor.getContent({format: "text"}); } function SetText(text){ return tinyMCE.activeEditor.setContent(text); } function GetHTML(){ return tinyMCE.activeEditor.getContent(); }
जिसे आगे 1 सी से संबोधित किया गया
HTML = .HTML.Document.DefaultView; HTML = HTML.GetHTML(); = HTML.GetText();
हालाँकि, संपादक ऑब्जेक्ट पर सीधे कॉल के साथ मिल सकता है, उदाहरण के लिए,
.HTML..defaultView.tinyMCE.activeEditor.getContent()
प्रकाशन से प्रसंस्करण तुरंत डाउनलोड किया गया (लेखक के लिए एक अलग सम्मान), जिसने मुझे कई दिलचस्प चीजें दिखाईं। यह कम या ज्यादा IE पर काम करता है, लेकिन कॉपी-पेस्ट वेबकिट पर काम नहीं करता है, पहले तो यह एक स्तूप का कारण बनता है, लेकिन बाद में यह स्पष्ट हो गया कि यह iframe के कारण था कि HTML फ़ील्ड इसके अंदर क्लिक करते समय सक्रिय नहीं हुई थी, क्योंकि क्लिक के साथ संलग्न दस्तावेज़ में वास्तव में नहीं हुआ था एचटीएमएल जिसकी घटनाएँ 1 सी के रास्ते में कहीं अटक गईं। और इसलिए, यदि आप फॉर्म में एक जगह Ctrl + C दबाते हैं और इसे संपादक के क्षेत्र के अंदर चिपकाने की कोशिश करते हैं, तो पाठ को उस फ़ील्ड में डाला जाएगा जहां से इसे कॉपी किया गया था क्योंकि दस्तावेज़ का HTML फ़ील्ड सक्रिय नहीं है। एक ही बात विपरीत मामले में होती है, कॉपी और पेस्ट के लिए कीबोर्ड शॉर्टकट काम नहीं करते हैं।
सबसे पहले, यह विचार आया कि यह एक टिनी जंब था, और यह बफर से सीधे पेस्ट को ब्लॉक करता है, जैसे CKEditor, जो बफर से चिपकाने के लिए एक अलग विंडो प्रदान करता है। लेकिन यह जांचना बहुत आसान था, मैंने एक इनपुट फ़ील्ड के साथ एक खाली दस्तावेज़ बनाया और कॉपी करने और चिपकाने की कोशिश की
जैसा कि आप देख सकते हैं, सब कुछ काम करता है। तो समस्या कहीं न कहीं टिनी में है या 1 सी के साथ बातचीत में है।
3. निर्णय
ब्राउज़र और 1 सी की बातचीत के साथ समस्या को हल करने के लिए, सामान्य चाल लागू की गई थी, मैंने एचटीएमएल पेज पर एक अदृश्य बटन बनाया, और जेएस से उस पर क्लिक करने की योजना बनाई जब पेज के अंदर आवश्यक घटनाएं हुईं, जो 1 सी एचटीएमएल प्रेस घटना में अवरोधन करेगा। लेकिन किस कार्यक्रम को करने के लिए एक कार्यक्रम प्रेस?
लेआउट कुछ इस तरह दिखता है:
<body> <textarea id="editor"></textarea> <button id="button1c" style="display: none"></button> </body>
और बटन क्लिक इवेंट को ट्रिगर करने के लिए एक फ़ंक्शन
function clickButton() { button1c.click(); }
इससे पहले, HTML फ़ील्ड में प्रपत्र 1C के ऑब्जेक्ट को ऑब्जेक्ट के रूप में स्थानांतरित करना संभव था, और इस तथ्य के कारण कि IE COM के माध्यम से 1C से जुड़ा हुआ है, प्रपत्र स्वयं किसी तरह ऑब्जेक्ट में परिवर्तित हो गया था, जिसे IE समझ गया था और जेएस कोड से सीधे फॉर्म 1 सी के निर्यात कार्यों को कॉल करना संभव था। । अब यह असंभव है।
हमने टिनी एपीआई प्रलेखन का अध्ययन किया और घटना संचालकों को बाधित करने के लिए एक निर्माण पाया और घटनाओं का एक उपयुक्त संयोजन जो दस्तावेज़ के HTML क्षेत्र को सक्रिय करना चाहिए।
tinymce.activeEditor.on('click', function(e){clickButton(e)}); tinymce.activeEditor.on('KeyDown', function(e){clickButton(e)});
आपको इस कोड को उस स्थान पर रखना होगा जहां टिनी पहले से ही आरंभिक थी। मैंने
विंडो ऑब्जेक्ट के
ऑनलोड हैंडलर में ऐसा किया। लेकिन आप इसे अधिक खूबसूरती से कर सकते हैं और पैरामीटर में टाइनी को इनिशियलाइज़ करते समय कोड डाल सकते हैं:
init_instance_callback
अब सब कुछ क्रम में होना चाहिए। और फॉर्म को उसी रूप में काम करना चाहिए, जैसा कि ...
यह बहुत बेहतर हो गया, HTML क्षेत्र वास्तव में सक्रिय होना शुरू हुआ, लेकिन हमेशा नहीं, किसी कारण से कुछ क्लिकों के कारण क्षेत्र में ध्यान केंद्रित नहीं हुआ:
यह रिकॉर्ड दिखाता है कि यदि आप उस लाइन पर क्लिक करते हैं जहां कर्सर ब्लिंक कर रहा है, तो फ़ील्ड का फ़ोकस उसी तरह काम करता है, जैसे कि अगर आप नीचे क्लिक करते हैं, तो फ़ील्ड सक्रिय नहीं होता है।
यह एक कष्टप्रद विरूपण साक्ष्य था, और यह समझने का प्रयास किया जा रहा था कि जो कुछ भी हो रहा था, उसने कोई समाधान नहीं दिया। मैं हैंडलर को आउटपुट अलर्ट और अलर्ट प्रदर्शित करता था, लेकिन 1 सी ने घटना पर प्रतिक्रिया नहीं दी
अचानक, मेरे दिमाग में यह विचार आया: क्या होगा यदि 1 सी क्षेत्र में होने वाली घटना को संसाधित करने का प्रबंधन नहीं करता है, क्या होगा यदि आप जेएस स्क्रिप्ट के निष्पादन को थोड़ा धीमा कर दें और देखें कि क्या होता है। जेएस में ठहराव समारोह जल्दी से वादों और एसिंक्स प्रतीक्षा का उपयोग करके लागू किया गया था। जैसा कि आप JS में देख सकते हैं, यह भी डिफ़ॉल्ट रूप से मौजूद नहीं है और कुछ भी नहीं, लोग रहते हैं)।
function sleep(ms){ return new Promise(resolve => setTimeout(resolve, ms)); } async function clickButton(e){ await sleep(1); button1c.click(); }
यहां मैंने बटन पर क्लिक करने से पहले देरी को एक मिलीसेकंड पर सेट किया। और वोइला, इसने काम किया। 1C समय में एक बटन के क्लिक को संसाधित करना शुरू कर दिया।
4. हम विनिमय समाप्त करते हैं
चूंकि एचटीएमएल प्रारूप में नए विवरण को संग्रहीत करने के लिए, निर्देशिका में एक नई विशेषता जोड़ी गई थी, हमें लोडिंग के दौरान विशिष्ट क्षेत्र के मूल्य को बदलने की आवश्यकता है। ऐसा करने के लिए, ExchangeSiteRemoveable मॉड्यूल में, एक्सटेंशन के लिए फ़ंक्शन GetTexts of RequestCatalog जोड़ें, और वहां लिखें:
. = (., ".", ".HTML_HTML");
वह सब है। हम विनिमय शुरू करते हैं और सब कुछ काम करता है, यह केवल साइट पर परिवर्तन करने के लिए रहता है, यदि आवश्यक हो, ताकि उत्पाद विवरण लेआउट के रूप में माना जाता है और स्ट्रिंग के रूप में नहीं।
सारांश
इस उदाहरण में, मैंने जेएस वेबिट और 1 सी की बातचीत की कोशिश की, रेक एकत्र किया और एक समाधान पाया।
शायद इस समस्या को हल करने के लिए एक स्वरूपित दस्तावेज़ से HTML पाठ को पार्स और साफ़ करना आसान था, लेकिन यह इतना दिलचस्प नहीं होगा और कुछ जटिल स्वरूपण विकल्पों के साथ कुछ समस्याएं मिल सकती हैं।
पढ़ने के लिए धन्यवाद।