सीकेडिटर डायलॉग एचटीएमएल एलिमेंट्स

Question

एक्सेस करना मुझे एक कठिन समय है कि मुझे एक प्लगइन में सीकेएडिटर में कुछ यूआई तत्वों तक पहुंचने के लिए क्या करना चाहिए, मैं संशोधित कर रहा हूं।

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

प्लगइन फ़ोल्डर में link.js फ़ाइल से निम्न कोड को संशोधित किया जा रहा है। मैंने सभी अनावश्यक बिट्स काट दिया और जो मैंने सोचा वह प्रासंगिक था। जैसा कि आप नीचे दिए गए कोड में देख सकते हैं, मैं 'आइटम' ड्रॉपडाउन के बाद 'सेक्शन' की आईडी के साथ एक चुनिंदा ड्रॉपडाउन परिभाषित कर रहा हूं। सेक्शन ड्रॉपडाउन के ऑन चेंज फ़ंक्शन में, इसे 'आइटम' ड्रॉपडाउन तक कैसे पहुंचाया जा सकता है?

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

{ 
type : 'vbox', 
id : 'internalOptions', 
children : 
[ 
    { 
    id : 'section', 
    type : 'select', 
    items : 
    [ 
    ], 
    setup : function(data) 
    { 
    //populate sections here 
    }, 
    onChange : function (data) 
    { 
    //populate items here 
    }, 
    }, 
    { 
    id : 'item', 
    type : 'select', 
    items : 
    [ 
    ], 
    setup : function(data) 
    { 
    }, 
    } 

] 
} 

संपादित करें: समस्या मेरे पास है CKEditor तो वे unqiue हैं हर आईडी बदल जाएगा। हालांकि मैं ड्रॉपडाउन "सेक्शन" नाम का नाम देता हूं, सीकेएडिटर इसे 176_सेक्शन कहते हैं, लेकिन यह हमेशा एक ही नहीं है इसलिए मुझे सेटअप चरण के दौरान इसे कैसे पकड़ना है, यह जानने की आवश्यकता क्यों है।

Answer 1

यदि आप सीकेईडिटर संवाद में किसी तत्व का DOM ऑब्जेक्ट प्राप्त करना चाहते हैं तो आप CKEditor तत्व पर getElement का उपयोग कर सकते हैं।

और CKEditor तत्व प्राप्त करने के लिए, संवाद

Answer 2

मुझे पता है कि आप jQuery का उपयोग करके #176_section कैसे पकड़ सकते हैं। आप केवल section और नहीं उपसर्ग पता है, इस चयनकर्ता का प्रयास करें:

$('select[id*="_section"]') 

बस इतना ही चयन बक्से एक आईडी है कि "_section" शामिल है हड़पने जाएगा:

तत्व मान लिया जाये कि एक चयन बॉक्स है। http://api.jquery.com/attribute-contains-selector/

आप jQuery, वेनिला जावास्क्रिप्ट थोड़ा अधिक वर्बोज़ है, लेकिन बहुत मुश्किल नहीं का उपयोग नहीं कर रहे हैं, तो समझ:

var selects = document.getElementsByTagName("select"); 
for (var i = 0; i < selects.length; i++) { 
    if(selects[i].id.indexOf("_section")) { 
     // Your select box is here. Do something with it. 
    } 
} 

बाद विधि थी

इस पर एक नज़र डालें इस उत्तर से संशोधित: Getting elements by a partial id string in javascript

Answer 3

पर getContentElement का उपयोग मैं भी एक समाधान खोजने के। मैं /_source/core/dom/element.js में तत्व प्रकार के conctructor बदल

CKEDITOR.dom.element = function(element, ownerDocument) 
    { 
     if (typeof element == 'string') 
     element = (ownerDocument ? ownerDocument.$ : document).createElement(element); 
    this.real_dom_element = element; 
    // Call the base constructor (we must not call CKEDITOR.dom.node). 
    CKEDITOR.dom.domObject.call(this, element); 
}; 

अब, अगर आप CKEDITOR.dom.element वस्तु पर भी नियंत्रण प्राप्त तुम सिर्फ domElement प्राप्त कर सकते हैं पर पहुंचकर object.real_dom_element

UI तत्वों की परिभाषा में आप एक ऑनलोड फ़ंक्शन जोड़ सकते हैं, आपको ऑब्जेक्ट मिलता है।real_dom_element और इस तरह एक विशेषता जोड़ें: 1. बदलें CKEDITOR.dom:

onLoad : function() 
{ 
    $(this.getElement().blicsm_element).attr("myID", "link_url"); 
} 

बाद में आप इस (jQuery के साथ उदाहरण) की तरह क्षेत्र का उपयोग कर सकते

$('div[myID="link_url"]').find("input"); 

तो तुम 3 चरणों की है। तत्व निर्माता ताकि आप असली डोम तत्व 2. क्षेत्र आप बाद में उपयोग करना चाहते हैं और विज्ञापन के लिए एक onLoad द्वारा स्थापित जोड़े उपयोग कर सकते हैं एक कस्टम विशेषता 3. पहुँच custum द्वारा तत्व विशेषता आप ऑनलोड में सेट किया है

मैंने इसे ऐसा किया और यह काम करता है। शायद सरल समाधान हैं, लेकिन मुझे एक समाधान खोजने में कठिनाई थी, इसलिए मुझे खुशी है कि मुझे यह मिला।

चीयर्स

Answer 4

'आईडी' संपत्ति अपने जावास्क्रिप्ट में आंतरिक संदर्भ के लिए है। यह जेनरेट किए गए एचटीएमएल तत्व में आईडी लागू नहीं करता है।

मैंने एक बहुत ही हैकी कामकाज का उपयोग किया है जो सभी परिस्थितियों में काम कर सकता है या नहीं भी हो सकता है, लेकिन विचार यह है कि आप उस आईडी के संदर्भ को संग्रहीत करते हैं जो ckeditor स्वचालित रूप से लागू होता है।

{ 
    id : 'txtCredit', /* not CSS ID attribute! */ 
    type : 'text', 
    label : 'Credit', 
    className : 'imageCredit', 

    elemId : null, /* to store a reference to ckeditor's automagically generated id */ 

    setup : function() { 

     // get the id that ckeditor generated for this element and store as an object property 
     this.elemId = this.getInputElement().getAttribute('id'); 

     // now we can reference the element by the id we stored above. Hacky? Yeah probably 
     var inputElem = document.getElementById(this.elemId); 

    } 
} 

Answer 5

AlfonsoML के रूप में की ओर इशारा किया, getContentElement आप के लिए क्या देख रहे है।

मैं पूरा करने के लिए यह

आप संवाद पृष्ठ की आईडी भी पता होना चाहिए कि कुछ और कोड जोड़ने हूँ। (यह आपके उदाहरण कोड के बाहर है) I.e. प्रासंगिक संवाद पृष्ठ में "शीर्ष" तत्व की आईडी (यदि आपका संवाद में कई पृष्ठ हैं तो आपका क्षेत्र पहले से दूसरे पृष्ठ पर हो सकता है)।

उदाहरण के लिए यदि संवाद js-फ़ाइल की सामग्री हैं:

... 
contents : [ 
    { 
    id : 'info', 
    label : 'blabla', 
    elements : 
     ... 

तो फिर तुम संवाद नाम के रूप में "जानकारी" का उपयोग करें।

var dialog = this.getDialog(); 
var sectionElement = dialog.getContentElement('info', 'section'); 

CKEditor में getContentElement वास्तविक आईडी नामों के बीच अनुवाद से निपटने है:

स्थानीय कार्यों में आप कोड का उपयोग कर सकते हैं।