CKEDITOR 4 में साइट पृष्ठों के लिंक जोड़ें

शुभ दिन,% हबलस%!

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

समस्या का बयान

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

पहला कदम

हम मानते हैं कि हमने पहले ही CKEDITOR से संग्रह डाउनलोड कर लिया है और इसे प्रोजेक्ट फ़ोल्डर में अनपैक कर दिया है (सुविधा के लिए, हम मानते हैं कि यह लिपियों का फ़ोल्डर है)। इस प्रकार, हमारा संपादक पथ / लिपियों / ckeditor के साथ स्थित है

आगे क्या है?

और फिर हम ... नहीं, हम स्क्रिप्ट को संपादित नहीं करेंगे। यह अगला कदम है। शुरू करने के लिए, हमें डेटा बनाना होगा जिसके आधार पर सामग्रियों की एक सूची बनाई जाएगी।

सिद्धांत की बिट

इस समस्या के लिए समर्पित लगभग सभी मैनुअल में, लेखक एक छिपा इनपुट बनाते हैं और इसमें डेटा को "पुश" करते हैं। लेकिन यह बिना शर्त तरीका नहीं है। हम अच्छी तरह से एक वैश्विक चर घोषित कर सकते हैं जिसमें डेटा रखा जाएगा, और सूची को शुरू करने के लिए इसके आधार पर। मैं विशेष रूप से ऐसे जंगल में नहीं जाऊंगा, क्योंकि इसका लेख के विषय से कोई लेना-देना नहीं है, इसलिए मैं केवल अन्य मैनुअल में दिखाए गए विकल्प का वर्णन करूंगा।
पैरामीटर के रूप में पारित सूची की विशेषताओं में से एक यह है कि यह JSON ऑब्जेक्ट होना चाहिए और स्ट्रिंग सरणियों की एक सरणी होनी चाहिए।
इस प्रकार, अंतिम वस्तु कुछ इस तरह होगी:

[['','/index.html'],['','/images.html'],['','/about.html'].....] 

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

  <input type="hidden" id="localPageList" value="[['','/index.html'],['','/images.html'],['','/about.html'].....]" /> 

इसलिए हमने काम के लिए डेटा तैयार किया है।

आगे बढ़ते हैं

अब हम लिपियों में चढ़ेंगे। सबसे पहले, स्क्रिप्ट खोलें जो लिंक चयन संवाद बनाता है / स्क्रिप्ट्स / लेखक /plugins/link/dialog/link/js
शब्द खोजो

 id: "linkType", type: "select" 

(स्क्रिप्ट को छोटा किया गया है, इसलिए यह खोज करने के लिए बहुत सुविधाजनक नहीं है। मैंने इसे स्वरूपित किया, अधिक सुविधा के लिए)
और निम्न पंक्तियाँ जोड़ें

 return { title: b.title, minWidth: 350, minHeight: 230, contents: [{ id: "info", label: b.info, title: b.info, elements: [{ id: "linkType", type: "select", label: b.type, "default": "localPage", items: [ [b.toUrl, "url"], [b.localPage, 'localPage'], [b.toAnchor, "anchor"], [b.toEmail, "email"]], onChange: function () { var a = this.getDialog(), b = ["urlOptions", "localPageOptions", "anchorOptions", "emailOptions"], c = this.getValue(), d = a.definition.getContents("upload"), d = d && d.hidden; if (c == "url") { n.config.linkShowTargetTab && a.showPage("target"); d || a.showPage("upload") } else { a.hidePage("target"); d || a.hidePage("upload") } for (d = 0; d < b.length; d++) { var e = a.getContentElement("info", b[d]); if (e) { e = e.getElement().getParent().getParent(); b[d] == c + "Options" ? e.show() : e.hide() } } a.layout() }, setup: function (a) { a.type && this.setValue(a.type) }, commit: function (a) { a.type = this.getValue() } }, //   { type: 'vbox', id: 'localPageOptions', children: [ { type: 'select', label: ' ', id: 'localPage', // " ".     title: '  ,    ', items: eval(document.getElementById("localPageList").value), //   input' localPageList setup: function (data) { if (data.localPage) this.setValue(data.localPage); }, commit: function (data) { if (!data.localPage) data.localPage = {}; data.localPage = this.getValue(); } }] }, //#   

मुझे उम्मीद है कि यहां सब कुछ स्पष्ट है।

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

संवाद में एक नए प्रकार की लिंक खोलें

निर्मित लिंक प्रकार संवाद में दिखाई देने के लिए, हमें इसे आरंभीकरण सूची में जोड़ना होगा।
हम निम्नलिखित लाइन कोड की तलाश कर रहे हैं:

 b = ["urlOptions", "anchorOptions", "emailOptions"] 

और स्ट्रिंग "localPageOptions" को इसमें जोड़ें ताकि यह इस तरह से निकले:

 b = ["urlOptions", "localPageOptions", "anchorOptions", "emailOptions"] 

अब, संपादक को लॉन्च करके और लिंक डायलॉग को खोलकर हम देखते हैं ... हम "अपरिभाषित" आइटम देखते हैं।
"यह एक bummer है!" मैंने सोचा कि जब मैंने पहली बार यह देखा था।
लेकिन, कोड में थोड़ा सा खुदाई करने पर, मुझे एहसास हुआ कि संवाद स्थानीयकरण फ़ाइलों में हमारे प्रकार के लिए एक नाम खोजने की कोशिश कर रहा है। और कुछ भी खोजने के बिना, यह केवल उस चर को अपरिभाषित करता है जिसे नाम संग्रहीत करना चाहिए। हम फ़ाइल (नों) में कोड की केवल एक पंक्ति जोड़कर इस समस्या को हल करते हैं (यदि आप कई स्थानीयकरणों का उपयोग करते हैं)।

स्थानीयकरण संपादित करें

फ़ाइल खोलें / स्क्रिप्ट्स / लेखक / lang/ru.js (अंग्रेज़ी स्थानीयकरण के लिए en.js)।
हम शब्दों से खोज करते हैं:

 "title": "" //   "title": "Link" //   

और अल्पविराम के माध्यम से एक पंक्ति जोड़ें:

 "localPage": " " //   "localPage": "Local page" //   

जहाँ localPage हमारे लिंक प्रकार का नाम है, जिसे id पैरामीटर के रूप में निर्दिष्ट किया गया है

एक निष्कर्ष के बजाय

पहली नज़र में तुच्छ नहीं, कार्य में मुझे 1.5-2 घंटे लगे। नेटवर्क पर मुझे मिलने वाले सभी मैनुअल CKEDITOR संस्करणों 2 और 3 के लिए लिखे गए थे। चौथे संस्करण में, बहुत कुछ बदल गया है और मुझे नए एपीआई के लिए इसे अनुकूलित करने के लिए कोड की जांच करनी पड़ी। ऐसा अनुभव उपयोगी है, लेकिन कभी-कभी सब कुछ जल्दी से करना बहुत आवश्यक है।
इसलिए, मुझे उम्मीद है कि मेरी पोस्ट किसी के लिए उपयोगी थी।