Я предполагаю, что диалог с двумя упомянутыми вами полями выбора является частью пользовательского плагина, который вы создаете.Так что мой ответ показывает код, который вы можете использовать в диалоговом файле, который создается как часть плагина.
Функция onChange в Selector One создает ссылку на Selector Two, используя:
dialog.getContentElement( 'general', 'selectorTwo' )
'general' - это идентификатор диалоговой панели, содержащей селекторы.'selectorTwo' является идентификатором второго селектора.
Я изменил исходный код из учебника SimpleLink, размещенного на cksource.com: Создание плагина CKEditor с настраиваемым диалоговым окном http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1
Загрузите исходный код SimpleLink здесь:http://docs.cksource.com/images/a/a8/SimpleLink.zip
Разархивируйте и добавьте папку simpleLink в каталог ckeditor / plugins.
Обновите файл конфигурации, добавив плагин simpleLink в список дополнительных плагинов:config.extraPlugins = 'onchange, inserttsnippet, resconfinearea, resiframe, simpleLink',
Или когда вы используете CKEDITOR.replace, используйте:extraPlugins: 'onchange, inserttsnippet, resconfinearea, resiframe, simpleLink',
Также добавьте кнопку на панель инструментов - 'SimpleLink'
Вы собираетесь вставить фрагмент кода из нижней частиэто сообщение в файл ckeditor / plugins / simpleLink / plugin.js.
Чтобы облегчить поиск точки вставки, первые двенадцать строк фрагмента перекрываются со строками (111 - 122) файла simpleLink / plugin.js.
После вставки фрагмента откройте ckeditor / _source / plugins / forms / dialogs / select.js.Скопируйте следующие три функции из верхней части файла select.js и добавьте их в начало файла simpleLink / plugin.js: addOption () removeAllOptions () getSelect ()
Откройте страницу, использующую CKEditor, и нажмите кнопку SimpleLink, которую вы добавили, вы увидите селекторы один и два внизу диалогового окна.При изменении селектора один, селектор два будет обновлен.У вас должна быть возможность изменить код в соответствии с вашим приложением.
На этих страницах есть некоторая полезная информация, на которую вы можете ссылаться при просмотре опубликованного мной кода:
Создание плагина CKEditor с помощьюнастраиваемое диалоговое окно http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1
Класс CKEDITOR.dialog http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html
Класс CKEDITOR.dialog.definition http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html
Вот фрагмент кода для вставки в файл ckeditor / plugins / simpleLink / plugin.js.Просто выделите строки (111 - 122) и вставьте это в:
{
type : 'checkbox',
id : 'newPage',
label : 'Opens in a new page',
// Default value.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.checkbox.html#constructor
'default' : true,
commit : function( data )
{
data.newPage = this.getValue();
}
},
{
type : 'select',
id : 'selectorOne',
label : 'Selector One',
items :
[
[ '<none>', '' ],
[ 'Set 1', 1],
[ 'Set 2', 2 ],
[ 'Set 3', 3 ]
],
onChange : function()
{
var dialog = this.getDialog(),
values = dialog.getContentElement( 'general', 'selectorTwo' ), // 'general' is the id of the dialog panel.
selectedSet = parseInt(this.getValue());
switch(selectedSet)
{
case 1:
optionsNames = new Array("Set One <none>","Set One A","Set One B","Set One C"),
optionsValues = new Array("","setOneA","setOneB","setOneC");
break;
case 2:
optionsNames = new Array("Set Two <none>","Set Two A","Set Two B","Set Two C"),
optionsValues = new Array("","setTwoA","setTwoB","setTwoC");
break;
case 3:
optionsNames = new Array("Set Three <none>","Set Three A","Set Three B","Set Three C"),
optionsValues = new Array("","setThreeA","setThreeB","setThreeC");
break;
default:
optionsNames = new Array("<none>"),
optionsValues = new Array("");
}
removeAllOptions( values );
for ( var i = 0 ; i < optionsNames.length ; i++ )
{
var oOption = addOption( values, optionsNames[ i ],
optionsValues[ i ], dialog.getParentEditor().document );
if ( i == 0 )
{
oOption.setAttribute( 'selected', 'selected' );
oOption.selected = true;
}
}
},
commit : function( data )
{
data.selectorOne = this.getValue();
}
},
{
type : 'select',
id : 'selectorTwo',
label : 'Selector Two',
items :
[
[ '<none>', '' ]
],
commit : function( data )
{
data.selectorTwo = this.getValue();
}
},
Надеюсь, это поможет, дайте мне знать, если что-то не понятно,Джо
Привет oggiemc,
Приятно знать, что у вас была возможность поэкспериментировать с кодом, и это здорово, что он был полезен.
Ответы на вопросыдополнительные вопросы о функциях, скопированных из файла plugins / forms / dialogs / select.js.
1) Три функции не должны вызываться при открытии диалога.Это не происходит в образце, который я создал, как обрисовано в общих чертах в моем первоначальном ответе.Возможно, вы захотите найти в вашем коде три имени функций, чтобы увидеть, не вызваны ли они где-то, кроме (onChange: function ()), содержащегося в определении selectorOne.
2) Я разбил (removeAllOptions() функция) и включил его ниже.У него похожая строка кода.Для линии, которую вы спросили о:
if (combo && oOption && oOption.getName() == 'option'),
В нем говорится, что если (комбинированный код существует) И (oOption существует) И (oOption.getName () == 'option') оператор If равен true.Под словом «существует» я подразумеваю, что оно не равно нулю и не является чем-то, что оценивается как ложное (либо 0, либо двоичное значение Не верно).
3) Да, в данном конкретном использовании функции addOption () индекспеременная не используется.Вы можете удалить два оператора if и просто оставить оператор кода из каждого предложения else.
4) obj.getInputElement () возвращает объект элемента DOM, но obj.getInputElement (). $ Возвращает только HTML-тег для объекта DOM.Попробуйте добавить несколько вызовов console.log в функцию getSelect (), и вы увидите разницу:
if ( obj && obj.domId && obj.getInputElement().$ ) { // Dialog element.
console.log(obj.getInputElement().$); // ADDED CONSOLE.LOG
console.log(obj.getInputElement()); // ADDED CONSOLE.LOG
return obj.getInputElement ();
Вот поток для removeAllOptionsФункция (): в функции onChange () для selectorOne мы создаем переменную «values», которая представляет selectorTwo.values = dialog.getContentElement ('general', 'selectorTwo')
Перед заполнением selectorTwo новыми значениями параметров, основанными на параметре, выбранном в selectorOne, мы удаляем все существующие параметры из selectorTwo: removeAllOptions (values);// значения представляют selectorTwo
Внутри функции removeAllOptions () переменной "combo" присваивается значение, переданное в вызове функции, поэтому: combo = values = selectorTwo.
RemoveAllOptionsФункция () вызывает функцию getSelect () и отправляет ей переменную «combo» в качестве параметра.Переменной "combo" будет присвоено значение, которое возвращается функцией getSelect ().
В функции getSelect () переменной "obj" присваивается значение, переданное в вызове функции, поэтому: obj = combo = values = selectorTwo.
Функция getSelect () может возвращать одно из трех значений:A) if (obj && obj.domId && obj.getInputElement (). $)Если obj имеет значение true И если obj.domId имеет значение И И если obj.getInputElement (). $ Возвращает что-либо, кроме false или null, он возвращает значение obj.getInputElement ().Таким образом, если переменная obj существует и свойство domId объекта obj установлено, она запустит функцию getInputElement () для obj и проверит, установлено ли свойство DOM ($).getInputElement () использует domId для возврата элемента DOM, который соответствует элементу selectorTwo.
B) Если не все три части A были истинными, функция getSelect () пытается:если (obj && obj. $)Таким образом, если переменная obj существует и она уже является элементом DOM ($), она просто отправит обратно obj.
C) Если шаг B завершится неудачно, getSelect () вернет false, а selectorTwo не имеетлюбые элементы option, которые нужно удалить.
Теперь вернемся к функции removeAllOptions (), чтобы посмотреть, что произойдет, если шаг A или B getSelect () вернет что-то.В обоих случаях переменная combo будет объектом selectorTwo с установленным элементом DOM (combo. $).Он запускает цикл while над массивом элементов option внутри selectorTwo и удаляет их.Он получает первый элемент option "getChild (0)" и удаляет его, элемент option, который находился в позиции Child (1), перемещается в позицию Child (0), и цикл продолжается до тех пор, пока не останется никаких элементов option.
Функция getInputElement () находится в строке (1085) файла ckeditor_source \ plugins \ dialogui \ plugin.jsФункция getInputElement () вызывает функцию getElement ().Функция getElement () находится в строке (2560) файла ckeditor_source \ plugins \ dialog \ plugin.js
function removeAllOptions( combo )
{
combo = getSelect( combo );
while ( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )
{ /*jsl:pass*/ }
}
function getSelect( obj )
{
if ( obj && obj.domId && obj.getInputElement().$ ) // Dialog element.
return obj.getInputElement();
else if ( obj && obj.$ )
return obj;
return false;
}
Будь здоров, Джо