CKEditor对话框选择框动态填充

Question

我在对话框中有两个选择框。我想知道是否可以根据第一个框的选择设置第二个选择框的内容。即，如果选择框 1 选择了 x，则选择框 2 的内容为 a、b , c..如果 select box1 选择了 y，则 select box2 内容为 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 插件添加到您的额外插件列表来更新您的配置文件：
config.extraPlugins = 'onchange,insertsnippet,resconfinearea,resiframe,simpleLink',

或者当您执行 CKEDITOR.replace 时使用：
extraPlugins : 'onchange,insertsnippet,resconfinearea,resiframe,simpleLink',

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

您将将此消息底部的代码片段插入到 ckeditor/plugins/simpleLink/plugin 中。

为了使插入点易于定位，代码片段的前十二行与以下行重叠 ( 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< /a>

这是要插入 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();
  }
},

希望这能解决问题，如果有不清楚的地方请告诉我，
Joe

---

你好，oggiemc，

很高兴知道您有机会尝试这些代码，而且它很有帮助，这真是太好了。

关于从plugins/forms/dialogs/select.js 文件复制的函数的其他问题的答案。

1）打开对话框时不应调用这三个函数。在我最初的答案中概述的创建的示例中没有发生这种情况。您可能需要在代码中搜索这三个函数名称，以查看它们是否在 selectOne 定义中包含的 ( onChange : function() ) 之外的其他位置调用。

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

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

它说 If (combo是否存在) AND (oOption是否存在) AND (oOption.getName() == 'option') If 语句为 true。
我所说的“存在”，是指它不为 null，也不是计算结果为 false 的值（0 或二进制 Not true）。

3) 是的，在 addOption() 函数的这个特定用法中，没有使用索引变量。您可以删除两个 if 语句，只保留每个 else 子句中的代码语句。

4) obj.getInputElement() 返回 DOM 元素对象，但 obj.getInputElement().$ 只返回 DOM 对象的 HTML 标签。尝试向 getSelect() 函数添加一些 console.log 调用，您将看到差异：

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”。
value =dialog.getContentElement( 'general', 'selectorTwo' )

在根据selectorOne中选择的选项使用新选项值填充selectorTwo之前，我们从selectorTwo中删除所有现有选项：
删除所有选项（值）； // 值代表selectorTwo

在removeAllOptions() 函数中，变量“combo”被赋予在函数调用中传递的值，因此：
组合=值=选择器二。

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

在 getSelect() 函数中，变量“obj”被赋予在函数调用中传递的值，因此：
obj = 组合 = 值 = 选择器二。

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 的三个部分不全都为 true，则 getSelect() 函数会尝试：
if ( obj && obj.$ )
因此，如果 obj 变量存在并且它已经是 DOM 元素 ($)，它只会发送回 obj。

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

现在回到removeAllOptions()函数，看看如果getSelect()的步骤A或B返回一些东西会发生什么。
在这两种情况下，“combo”变量都将是带有 DOM 元素 (combo.$) 设置的 selectedTwo 对象。
它对 selecterTwo 内的选项元素数组运行 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;
}

好吧，
乔

Answer 2

是的，完全可以实现。在代码中，放置 2 个选择框。
然后在该插件的 js 代码中，将 clickhandler 绑定到选择框，将您想要的值放入第二个选择框中。