CKEditor对话框选择框动态填充

Question

我在对话框中有两个选择框.我想知道我是否可以根据第一个框的选择设置第二个选择框的内容..如果选择框1已选择x,则选择box2内容为a,b ,c..if如果选择box1已选中,则选择box2内容为d,e,f ..这是否可以实现？

谢谢

Answer 1

我猜你提到的两个选择框的对话框是你正在创建的自定义插件的一部分.所以我的答案显示了你可以在对话文件中使用的代码,这些代码文件是作为插件的一部分创建的.

Selector One的onChange函数使用以下命令创建对Selector Two的引用:

dialog.getContentElement( 'general', 'selectorTwo' )

'general'是包含选择器的对话框面板的id.
'selectorTwo'是第二个选择器的id.

我在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插件添加到extraplugins列表来更新配置文件:
config.extraPlugins ='onchange,insertsnippet,resconfinearea,resiframe,simpleLink',

或者当你做CKEDITOR.replace时使用:
extraPlugins:'onchange,insertsnippet,resconfinearea,resiframe,simpleLink',

同时将按钮添加到工具栏 - 'SimpleLink'

您将从此消息的底部插入代码片段到ckeditor/plugins/simpleLink/plugin.js文件中.

为了使插入点易于定位,片段的前十二行与simpleLink/plugin.js文件的行(111-122)重叠.

插入代码段后,打开ckeditor/_source/plugins/forms/dialogs/select.js.从select.js文件的顶部复制以下三个函数,并将它们添加到simpleLink/plugin.js文件的顶部:
addOption()
removeAllOptions()
getSelect()

打开一个使用CKEditor的页面并单击您添加的SimpleLink按钮,您将在对话框窗口的底部看到选择器一和二.当您更改选择器1时,将更新选择器2.您应该能够修改代码以适合您的应用程序.

这些页面包含一些有用的信息,您可以在查看我发布的代码时参考这些信息:

使用自定义对话框窗口创建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)打开对话框时不应调用这三个函数.我在初始答案中概述的样本中没有出现这种情况.您可能希望在代码中搜索三个函数名称,以查看它们是否在selectorOne定义中包含的(onChange:function())之外的某个位置被调用.

2)我打破了(removeAllOptions()函数)并将其包含在下面.它有一个类似的代码行.对于你询问的那条线:

if (combo && oOption && oOption.getName() == 'option'),

它表示If(组合存在)AND(oOption存在)AND(oOption.getName()=='option')If语句为true.
通过"exists",我的意思是它不是null而不是评估为false的东西(0或二进制不为真).

3)是的,在addOption()函数的这种特定用法中,不使用索引变量.您可以删除两个if语句,只留下每个else子句的代码语句.

4)obj.getInputElement()返回DOM元素对象,但obj.getInputElement().$仅返回DOM对象的HTML标记.尝试将一些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()函数的流程:在selectorOne的onChange()函数中,我们创建一个表示selectorTwo的变量"values".values = dialog.getContentElement('general','selectorTwo')

在使用基于selectorOne中选择的选项的新选项值填充selectorTwo之前,我们从selectorTwo中删除任何现有选项:removeAllOptions(values); // 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为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没有要删除的任何选项元素.

现在回到removeAllOptions()函数,看看如果getSelect()的步骤A或B返回一些内容会发生什么.在这两种情况下,"combo"变量将是设置了DOM元素(组合.$)的selectorTwo对象.它在selectorTwo中的选项元素数组上运行while循环并删除它们.它获取第一个选项元素"getChild(0)"并将其删除,位于位置Child(1)的选项元素移动到位置Child(0)并且循环继续直到没有剩余选项元素.

getInputElement()函数位于ckeditor_source\plugins\dialogui\plugin.js的
第(1085)行.getInputElement ()函数调用getElement()函数.
getElement()函数位于ckeditor_source\plugins\dialog\plugin.js的第(2560)行

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

好吧,乔