Accesso alla finestra di dialogo CKEditor Elementi HTML

Question

Sto attraversando un periodo difficile per capire cosa devo fare per accedere a determinati elementi dell'interfaccia utente in CKEditor in un plug-in che sto modificando.

In sostanza sto aggiungendo collegamenti interni alla loro finestra di dialogo di collegamento in cui i collegamenti sono suddivisi tra sezioni e pubblicazioni. Quando un utente seleziona una sezione da una selezione, le pubblicazioni da quella sezione vengono popolate in un altro menu a discesa.

Il seguente codice è stato modificato dal file link.js nella cartella del plug-in. Ho tagliato tutti i bit inutili e ho lasciato fuori quello che pensavo fosse rilevante. Come puoi vedere nel codice sottostante sto definendo un menu a discesa di selezione con l'id di 'sezione' seguito dal menu a discesa 'elemento'. Come posso accedere al menu a discesa "item", per popolarlo, nella funzione onChange del menu a discesa della sezione?

Ho il mio codice ajax tutto capito e funzionante se ho hardcode gli ID che finiscono per essere popolati nel tag ID in runtime ma questo cambia da editor a editor quindi non posso fare affidamento su valori hardcoded.

{ 
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) 
    { 
    }, 
    } 

] 
} 

EDIT: Il problema che ho è che il CKEditor cambierà ogni ID in modo che siano unqiue. Anche se chiamo il dropdown "section" CKEditor lo chiama 176_section ma non è sempre lo stesso INT quindi perché ho bisogno di capire come prenderlo durante la fase di setup.

Answer 1

Se si desidera ottenere l'oggetto DOM di un elemento in una finestra di dialogo CKEditor, è possibile utilizzare getElement sull'elemento CKEditor.

E per ottenere l'elemento CKEditor, utilizzare getContentElement nella finestra di dialogo

Answer 2

So come si può afferrare #176_section usando jQuery. Se si conosce solo section e non il prefisso, provate questo selettore:

Supponendo che l'elemento è una casella di selezione:

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

che catturerà tutte le caselle di selezione che hanno un id che contiene "_section".

Date un'occhiata a questo: http://api.jquery.com/attribute-contains-selector/

Se non si utilizza jQuery, la vaniglia javascript è un po 'più prolisso, ma non troppo difficile da afferrare:

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. 
    } 
} 

Quest'ultimo metodo era modificato da questa risposta: Getting elements by a partial id string in javascript

Answer 3

trovo anche una soluzione. Ho cambiato il conctructor del tipo di elemento in /_source/core/dom/element.js

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); 
}; 

Ora, se si ottiene una sospensione sull'oggetto CKEDITOR.dom.element si può solo ottenere la DOMElement accedendo object.real_dom_element

Nella defenizione degli elementi dell'interfaccia utente è possibile aggiungere una funzione onLoad, si ottiene l'oggetto.real_dom_element e aggiungere un attributo come questo:

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

Successivamente è possibile accedere al campo come questo (esempio con jQuery)

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

in modo da avere 3 passi: 1. Modificare il CKEDITOR.dom. costruttore di elementi in modo da poter accedere all'elemento dom reale 2. Aggiungere un evento onLoad al campo a cui si desidera accedere in seguito e aggiungere un attributo personalizzato 3. Accedere all'elemento dall'attributo custum che hai impostato in onLoad

L'ho fatto così e funziona. Forse ci sono soluzioni più semplici, ma ho trovato una soluzione per trovare una soluzione, quindi sono felice di averlo trovato.

Acclamazioni

Answer 4

L' 'id' proprietà è in riferimento interno in javascript. Non applica un id all'elemento html generato.

Ho usato una soluzione molto hacky che può o non può funzionare in tutte le situazioni, ma l'idea è di memorizzare un riferimento all'ID che il ckeditor applica automaticamente.

{ 
    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

Come AlfonsoML indicò, il getContentElement è quello che state cercando.

che sto aggiungendo un po 'di codice per completarlo

è necessario conoscere l'ID della pagina di dialogo troppo. (È al di fuori del codice di esempio) I.e. l'id dell'elemento "top" nella relativa finestra di dialogo (il tuo campo potrebbe trovarsi su un'altra pagina rispetto al primo se nella finestra di dialogo sono presenti più pagine).

Per esempio, se il contenuto del file di JS-finestra sono:

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

quindi si utilizza "info" come il nome di dialogo.

Nelle funzioni locali è possibile utilizzare il codice:

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

Il getContentElement in CKEditor sta gestendo la traduzione tra i nomi del l'id effettivo.