CKEditor对话框选择框动态填充 [英] CKEditor dialog select box dynamic population
问题描述
我有一个对话框中的两个选择框。我想知道是否可以基于第一个框的选择设置第二个选择框的内容。如果选择框1选择了x，然后选择框2内容a，b，c。如果选择box1已选择，则选择box2的内容为d，e，f ..这是否可以实现？
p>
我猜你有两个选择框的对话框是你创建的自定义插件的一部分。所以我的答案显示可以在作为插件的一部分创建的对话文件中使用的代码。
Selector One的onChange函数创建一个引用选择器二使用：
dialog.getContentElement（'general'，'selectorTwo'）
'general'是包含选择器的对话框面板的编号。
'selectorTwo'
我修改了源自cksource.com的SimpleLink教程的源代码：
创建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插件添加到Extaplugins列表来更新您的配置文件： br />
config.extraPlugins ='onchange，insertsnippet，resconfinearea，resiframe，simpleLink'，
或者当你做CKEDITOR.replace使用： >
extraPlugins：'onchange，insertsnippet，resconfinearea，resiframe，simpleLink'，
同时将工具栏上的按钮添加到SimpleLink
您要将此消息底部的代码段插入到ckeditor / plugins / simpleLink / plugin.js文件中。
为了使插入点容易定位，代码片段的前12行与simpleLink / plugin.js文件的行（111 - 122）重叠。
插入代码段后，打开ckeditor / _source / plugins / forms / dialogs / select.js。
从select.js文件的顶部复制以下三个函数，并将它们添加到simpleLink / plugin.js文件的顶部：
addOption ）
removeAllOptions （）
getSelect （）
< hr>
打开一个使用CKEditor的页面并点击你添加的SimpleLink按钮，你会在对话框窗口的底部看到一个和两个选择器。当您更改选择器时，选择器2将更新。
这些网页有一些有用的信息，您可以在查看我发布的代码时参考：
使用自定义对话框窗口创建CKEditor插件
http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1
类CKEDITOR。对话框
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：'在新页面中打开'，
//默认值。
// 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'，
项：
[
['< none>'，'']，
['Set 1'，1]，
['Set 2'，2]
['Set 3'，3]
]，
onChange：function（）
{
var dialog = this.getDialog = dialog.getContentElement（'general'，'selectorTwo'），//'general'是对话框面板的id。
selectedSet = parseInt（this.getValue（））;
switch（selectedSet）
{
case 1：
optionsNames = new Array（Set One< none>，Set One A一个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（）;
}
}，
希望这样做的，让我知道如果有些不清楚，
Joe
Hi oggiemc，
很高兴知道你已经有机会尝试这些代码，非常有用。
有关从plugins / forms / dialogs / select.js文件复制的函数的其他问题。
1）打开对话框时，不应调用这三个函数。这在我创建的样例中没有发生，我在初步的回答中概述了。您可能希望在代码中搜索三个函数名称，看看它们是否被称为selectorOne定义中包含的（onChange：function（））之外的其他位置。
2）我打破了（removeAllOptions（）函数），并将其包含在下面。它有一个类似的代码行。对于您询问的行：
if（combo& oOption&& oOption.getName （）==option），
< AND（oOption.getName（）=='option'）If语句为真。
exists，我的意思是它不是null，而不是一个值为false不是真的）。
3）是的，在addOption（）函数的特定用法中，不使用索引变量。您可以删除两个if语句，只需从每个else子句保留代码语句。
4）obj.getInputElement（）返回DOM元素对象，但obj.getInputElement （）。$仅返回DOM对象的HTML标记。尝试向getSelect（）函数添加一些console.log调用，您会看到以下区别：
if（obj& & obj.domId&& obj.getInputElement（）。$）{//对话框元素。
console.log（obj.getInputElement（）。$）; // ADDED CONSOLE.LOG
console.log（obj.getInputElement（））; // ADDED CONSOLE.LOG
return obj.getInputElement（）;
下面是removeAllOptions（）函数的流程：
在selectorOne的onChange（）函数中，我们创建一个表示selectorTwo的变量values。
values = dialog.getContentElement（'general'，'selectorTwo'）
在根据selectorOne中选择的选项填充selectorTwo之前， selectorTwo中的任何现有选项：
removeAllOptions（values）; // values represent 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， .domId is true如果obj.getInputElement（）。$返回除false或null以外的任何值，它将返回obj.getInputElement（）的值。
因此，如果obj变量存在，设置obj的domId属性，它将对obj运行getInputElement（）函数，并检查DOM属性（$）是否设置。
getInputElement（）使用domId返回与selectorTwo元素对应的DOM元素。
B）如果A的所有三个部分都不为真， getSelect（）函数尝试：
if（obj&& obj。$）
因此，如果obj变量存在并且它已经是DOM元素，它将只是发送回obj。
C）如果步骤B失败，则getSelect（）返回false，并且selectorTwo没有任何要删除的选项元素。 p>
现在回到removeAllOptions（）函数，看看如果getSelect（）的A或B返回的是什么，会发生什么。
在这两种情况下，combo变量将是selectorTwo对象与DOM元素（组合。$）设置。
它对selectorTwo中的选项元素数组运行while循环，并删除它们。
它获取第一个选项元素getChild（0）并删除它，位置Child（1）的选项元素移动到Child（0）位置，循环继续，直到没有选项元素离开。
getInputElement（）函数位于ckeditor_source\plugins\dialogui\plugin.js的行（1085）
getInputElement （）函数调用getElement（）函数。
getElement（）函数位于ckeditor_source\plugins\dialog\\\\\' b
function removeAllOptions（combo）
{
combo = getSelect（combo）;
while（combo.getChild（0）&& combo.getChild（0）.remove（））
{/ * jsl：pass * /}
}
b $ b function getSelect（obj）
{
if（obj&& obj.domId&& obj.getInputElement（）。$）//对话框元素。
return obj.getInputElement（）;
else if（obj&& obj。$）
return obj;
return false;
}
好吧，
Joe
I have two select boxes in a dialog..I was wondering if i can set the contents of the second select box based on the selection of the first box..i.e if select box1 has x selected, then select box2 contents are a, b, c..if select box1 has y selected, then select box2 contents are d, e, f.. Is this possible to implement?
Thanks
I'm guessing that the dialog with two select boxes you mentioned is part of a custom plugin you are creating. So my answer shows code you could use in the dialog file that's being created as part of the plugin.
The onChange function of Selector One creates a reference to Selector Two using:
dialog.getContentElement( 'general', 'selectorTwo' )
'general' is the id of the dialog panel containing the selectors.
'selectorTwo' is the id of the second selector.
I modified the source code from the SimpleLink tutorial hosted at cksource.com:
Creating a CKEditor Plugin with a Custom Dialog Window
http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1
Download the SimpleLink source code here:
http://docs.cksource.com/images/a/a8/SimpleLink.zip
Unzip and add the simpleLink folder to your ckeditor/plugins directory.
Update your config file by adding the simpleLink plugin to your extraplugins list:
config.extraPlugins = 'onchange,insertsnippet,resconfinearea,resiframe,simpleLink',
Or when you do CKEDITOR.replace use:
extraPlugins : 'onchange,insertsnippet,resconfinearea,resiframe,simpleLink',
Also add the button to your toolbar - 'SimpleLink'
You're going to insert the code snippet from the bottom of this message into the ckeditor/plugins/simpleLink/plugin.js file.
To make the insertion point easy to locate, the first twelve lines of the snippet overlap with lines ( 111 - 122 ) of the simpleLink/plugin.js file.
After you insert the snippet, open ckeditor/_source/plugins/forms/dialogs/select.js.
Copy the following three functions from the top of the select.js file and add them at the top of the simpleLink/plugin.js file:
addOption()
removeAllOptions()
getSelect()
Open a page that's using CKEditor and click on the SimpleLink button you added, you'll see selectors one and two at the bottom of the dialog window. When you change selector one, selector two will be updated. You should be able to modify the code to suit your application.
These pages have some useful information you can refer to when reviewing the code I posted:
Creating a CKEditor Plugin with a Custom Dialog Window
http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1
Class CKEDITOR.dialog
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html
Class CKEDITOR.dialog.definition
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html
Here's the code snippet to insert into the ckeditor/plugins/simpleLink/plugin.js file.
Just select lines ( 111 - 122 ) and paste this in:
{
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();
}
},
Hope this does the trick, let me know if something isn't clear,
Joe
Hi oggiemc,
Good to know that you've had a chance to experiment with the code and it's great that it's been helpful.
Answers to the additional questions about the functions copied from the plugins/forms/dialogs/select.js file.
1) The three functions shouldn't be called when the dialog is opened. That's not occurring in the sample I created as outlined in my initial answer. You might want to search your code for the three function names to see if they are being called someplace other than the ( onChange : function() ) contained in the selectorOne definition.
2) I broke down the ( removeAllOptions() function ) and included it below. It has a similar line of code. For the line you asked about:
if (combo && oOption && oOption.getName() == 'option'),
It says If ( combo exists ) AND ( oOption exists ) AND ( oOption.getName() == 'option' ) the If statement is true.
By "exists", I mean it's not null and not something that evaluates to false (either 0 or a binary Not true).
3) Yes, in this particular usage of the addOption() function, the index variable isn't used. You can remove the two if statements and just leave the code statement from each else clause.
4) obj.getInputElement() returns the DOM element object, but obj.getInputElement().$ only returns the HTML tag for the DOM object. Try adding some console.log calls to the getSelect() function and you'll see the difference:
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();
Here is the flow for the removeAllOptions() function: In the onChange() function for selectorOne we create a variable "values" which represents selectorTwo. values = dialog.getContentElement( 'general', 'selectorTwo' )
Before populating selectorTwo with new option values based on the option selected in selectorOne, we remove any existing options from selectorTwo: removeAllOptions( values ); // values represents selectorTwo
Within the removeAllOptions() function the variable "combo" is assigned the value that was passed in the function call, so: combo = values = selectorTwo.
The removeAllOptions() function calls the getSelect() function and sends it the "combo" variable as a parameter. The "combo" variable will be assigned the value that is returned by the getSelect() function.
Within the getSelect() function the variable "obj" is assigned the value that was passed in the function call, so: obj = combo = values = selectorTwo.
The getSelect() function can return one of three values:
A) if ( obj && obj.domId && obj.getInputElement().$ )
If obj is true AND if obj.domId is true AND if obj.getInputElement().$ returns anything other than false or null, it will return the value of obj.getInputElement().
So, if the obj variable exists and the domId property of obj is set, it will run the getInputElement() function on obj and check that the DOM property ($) is set.
getInputElement() uses the domId to return the DOM element that corresponds to the selectorTwo element.
B) If not all three parts of A were true, the getSelect() function tries:
if ( obj && obj.$ )
So, if the obj variable exists and it already is the DOM element ($), it will just send back obj.
C) If step B fails, then getSelect() returns false and selectorTwo doesn't have any option elements to remove.
Now back to the removeAllOptions() function to see what happens if step A or B of getSelect() returns something. In both cases the "combo" variable will be the selectorTwo object with the DOM element (combo.$) set. It runs a while loop over the array of option elements inside selectorTwo and removes them. It gets the first option element "getChild( 0 )" and removes it, the option element that was at position Child( 1 ) moves to position Child( 0 ) and the loop continues until there are no option elements left.
The getInputElement() function is located at line ( 1085 ) of ckeditor_source\plugins\dialogui\plugin.js
The getInputElement() function calls the getElement() function.
The getElement() function is located at line ( 2560 ) of 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;
}
Be Well, Joe
这篇关于CKEditor对话框选择框动态填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
