Доступ к HTML-элементам диалога CKEditor

Question

Мне трудно понять, что мне нужно сделать, чтобы получить доступ к определенным элементам пользовательского интерфейса в CKEditor в плагине, который я изменяю.

По сути, я добавляю внутренние ссылки в их диалог ссылок, где ссылки яразделить между разделами и публикациями.Когда пользователь выбирает раздел из выпадающего списка, публикации из этого раздела заполняются другим раскрывающимся списком.

Следующий код изменяется из файла link.js в папке плагина.Я вырезал все ненужные биты и оставил то, что мне показалось уместным.Как вы можете видеть из кода ниже, я определяю выпадающий список с идентификатором «section», за которым следует выпадающий «item».Как получить доступ к раскрывающемуся списку 'item', чтобы заполнить его, в функции onChange раскрывающегося списка?

У меня есть весь ajax-код, который выясняется и работает, если я жестко закодирую идентификаторы, которые в итоге заполняютсятег ID во время выполнения, но он меняется от редактора к редактору, поэтому я не могу полагаться на жестко заданные значения.

{
 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 будет меняться каждыйID, чтобы они не были.Хотя я называю выпадающий «раздел», CKEditor называет его 176_section, но это не всегда тот же самый INT, поэтому я должен выяснить, как получить его на этапе установки.

Answer 1

Если вы хотите получить объект DOM элемента в диалоговом окне CKEditor, вы можете использовать getElement для элемента CKEditor.

А чтобы получить элемент CKEditor, используйте getContentElement в диалоговом окне

Answer 2

Свойство 'id' предназначено для внутренней ссылки в вашем javascript.Он не применяет идентификатор к сгенерированному элементу html.

Я использовал очень хакерский обходной путь, который может работать или не работать во всех ситуациях, но идея заключается в том, что вы сохраняете ссылку на идентификатор, который 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 3

Как указал AlfonsoML, getContentElement - это то, что вы ищете.

Я добавляю еще немного кода для его завершения

Вы должны знать идентификаторстраницы диалога тоже.(Это за пределами вашего примера кода) Т.е. идентификатор элемента "top" на соответствующей странице диалога (ваше поле может быть на другой странице, чем первая, если у вас есть несколько страниц в диалоге).

Напримересли содержимое js-файла диалога:

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

Тогда в качестве имени диалога вы используете "info".

В локальных функциях вы можете использовать код:

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

getContentElement в CKEditor обрабатывает перевод между именами действительного идентификатора.

Answer 4

Я тоже нахожу решение. Я изменил конструктор типа элемента в /_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 );
};

Теперь, если вы захватили объект CKEDITOR.dom.element, вы можете просто получить domElement, открыв object.real_dom_element

В определении элементов пользовательского интерфейса вы можете добавить функцию onLoad, вы получите object.real_dom_element и добавите атрибут, подобный этому:

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

Позже вы можете получить доступ к полю, как это (пример с jQuery)

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

Итак, у вас есть 3 шага: 1. Измените конструктор CKEDITOR.dom.element, чтобы получить доступ к элементу real dom. 2. Добавьте событие onLoad в поле, к которому вы хотите получить доступ позже, и добавьте пользовательский атрибут 3. Получите доступ к элементу по атрибуту custum, который вы установили в onLoad

Я сделал это так, и это работает. Возможно, есть более простые решения, но у меня была проблема с поиском решения, и я счастлив, что нашел это.

Приветствия

Answer 5

Я знаю, как вы можете получить #176_section с помощью jQuery. Если вы знаете только section, а не префикс, попробуйте этот селектор:

Предполагается, что элемент является полем выбора:

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

Это захватит все поля выбора с идентификатором, содержащим "_section".

Посмотрите на это: http://api.jquery.com/attribute-contains-selector/

Если вы не используете jQuery, ванильный JavaScript немного более многословен, но не слишком сложен для понимания:

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

Последний метод был изменен из этого ответа: Получение элементов по частичной строке идентификатора в JavaScript