javascript - CKEditor对话框选择框动态填充

Question

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

谢谢

Answer 1

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

选择器一的onChange函数使用以下命令创建对选择器二的引用:

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

“常规”是包含选择器的对话框面板的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)打开对话框时，不应调用这三个函数。我最初回答中概述的示例中并未出现这种情况。您可能想在代码中搜索这三个函数名，以查看它们是否在选择器定义中包含的(onChange:function())之外的地方被调用。

2)我分解了(removeAllOptions()函数)并将其包含在下面。它具有类似的代码行。对于您询问的那条线:

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

它说If(组合存在)AND(oOption存在)AND(oOption.getName()=='option')If语句为true。
“存在”是指它不是null，也不是计算为false的值(0或二进制Not true)。

3)是的，在addOption()函数的这种特殊用法中，未使用index变量。您可以删除两个if语句，而只保留每个else子句中的code语句。

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

返回obj.getInputElement();

这是removeAllOptions()函数的流程:
在selectorOne的onChange()函数中，我们创建了一个表示“selectorTwo”的变量“值”。
值= dialog.getContentElement('general'，'selectorTwo')

在根据选择器One中选择的选项为选择器Two填充新的选项值之前，我们从选择器Two中删除所有现有选项:
removeAllOptions(values); //值代表选择器

在removeAllOptions()函数中，为变量“combo”分配了在函数调用中传递的值，因此:
组合=值=选择器二。

removeAllOptions()函数调用getSelect()函数，并将“combo”变量作为参数发送给它。
将为“combo”变量分配由getSelect()函数返回的值。

在getSelect()函数中，为变量“obj”分配了在函数调用中传递的值，因此:
obj =组合=值=选择器二。

getSelect()函数可以返回以下三个值之一:
A)如果(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()函数将尝试:
如果(obj && obj。$)
因此，如果obj变量存在并且已经是DOM元素($)，它将仅发送回obj。

C)如果步骤B失败，则getSelect()返回false，并且selectorTwo没有要删除的任何选项元素。

现在返回到removeAllOptions()函数，以查看如果getSelect()的步骤A或B返回某些内容会发生什么。
在这两种情况下，“combo”变量都是设置了DOM元素(combo。$)的selectorTwo对象。
它在selectorTwo内部的选项元素数组上运行while循环，然后将其删除。
它获取第一个选项元素“getChild(0)”并将其删除，位于Child(1)位置的option元素移至Child(0)位置，循环继续进行，直到没有剩余option元素为止。

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

好吧
乔