Accediendo a CKEditor Dialog Elementos HTML

Question

Me está costando trabajo averiguar qué debo hacer para acceder a ciertos Elementos de IU en el CKEditor en un complemento que estoy modificando.

Básicamente estoy agregando enlaces internos a su diálogo de enlace donde los enlaces se dividen entre secciones y publicaciones. Cuando un usuario selecciona una sección de un menú desplegable de selección, las publicaciones de esa sección se llenan en un menú desplegable diferente.

El siguiente código se está modificando desde el archivo link.js en la carpeta del complemento. Recorté todos los bits innecesarios y dejé fuera lo que pensé que era relevante. Como puede ver en el siguiente código, estoy definiendo un menú desplegable de selección con el id de 'sección' seguido del menú desplegable 'elemento'. ¿Cómo accedo al menú desplegable 'elemento' para rellenarlo en la función onChange del menú desplegable de la sección?

Tengo mi código ajax todo resuelto y funcionando si codigo los ID que terminan llenándose en la etiqueta ID en tiempo de ejecución pero esto cambia de editor a editor así que no puedo confiar en los valores codificados.

{ 
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: El problema que tengo es que el CKEditor se cambian todos los ID por lo que son unqiue. Aunque nombro la "sección" desplegable, CKEditor lo llama 176_section, pero no siempre es la misma INT, por lo tanto, ¿por qué tengo que averiguar cómo agarrarlo durante la fase de configuración?

Answer 1

Si desea obtener el objeto DOM de un elemento en un cuadro de diálogo CKEditor, puede usar getElement en el elemento CKEditor.

Y para conseguir el elemento CKEditor, utilice getContentElement en el diálogo

Answer 2

Sé cómo se puede agarrar #176_section usando jQuery. Si sólo conoce section y no el prefijo, tratar este selector:

Suponiendo que el elemento es una caja de selección:

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

que atraerá todas las cajas de selección que tienen un identificador que contiene "_section".

Tener un vistazo a esto: http://api.jquery.com/attribute-contains-selector/

Si no está utilizando jQuery, la vainilla Javascript es un poco más detallado, pero no es demasiado difícil de entender:

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

Este último método fue modificado de esta respuesta: Getting elements by a partial id string in javascript

Answer 3

También encuentro una solución. he cambiado el conctructor del tipo de elemento en /_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); 
}; 

Ahora, si se obtiene un alto en el objeto CKEDITOR.dom.element sólo se puede conseguir el DOMElement accediendo object.real_dom_element

En la defensa de los elementos de la interfaz de usuario puede agregar una función onLoad, obtiene el objeto.real_dom_element y añadir un atributo de esta manera:

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

Más tarde se puede acceder al campo como esto (ejemplo con jQuery)

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

por lo que tiene 3 pasos: 1. Cambiar la CKEDITOR.dom. constructor de elementos para que pueda acceder al elemento dom real 2. Agregue un evento onLoad al campo al que desea acceder más adelante y ad un atributo personalizado 3. Acceda al elemento mediante el atributo custum que ha establecido en el onLoad

Lo hice así y funciona. Tal vez hay soluciones más simples, pero tuve un buen esfuerzo para encontrar una solución, así que estoy feliz de haber encontrado esto.

Saludos

Answer 4

La propiedad 'id' es para referencia interna en su Javascript. No aplica una identificación al elemento html generado.

He utilizado una solución muy hacky que puede o no funcionar en todas las situaciones, pero la idea es que almacene una referencia a la identificación que ckeditor aplica automágicamente.

{ 
    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

Como AlfonsoML señaló, el getContentElement es lo que busca.

estoy añadiendo algo más de código para completarlo

debe conocer el ID de la página de diálogo también. (Está fuera de tu código de ejemplo), es decir la identificación del elemento "superior" en la página de diálogo relevante (su campo puede estar en otra página que no sea la primera si tiene varias páginas en el cuadro de diálogo).

Por ejemplo, si el contenido de la JS-archivo de diálogo son:

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

continuación, utiliza "información" como el nombre de diálogo.

En las funciones locales que pueden utilizar el código:

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

El getContentElement en CKEditor está manejando la traducción entre los nombres de la Identificación del real.