CKEditor对话框选择框动态填充

2024-02-20

我在对话框中有两个选择框。我想知道是否可以根据第一个框的选择设置第二个选择框的内容。即,如果选择框 1 选择了 x,则选择框 2 的内容为 a、b , c..如果 select box1 选择了 y,则 select box2 内容为 d, e, f.. 这可以实现吗?

Thanks


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

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

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

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

我修改了 cksource.com 上托管的 SimpleLink 教程的源代码:
创建带有自定义对话框窗口的 CKEditor 插件
http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1 http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1

在此处下载 SimpleLink 源代码:
http://docs.cksource.com/images/a/a8/SimpleLink.zip 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 文件顶部:
添加选项()
删除所有选项()
获取选择()


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

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

创建带有自定义对话框窗口的 CKEditor 插件
http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1 http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1

类 CKEDITOR.dialog
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html

类 CKEDITOR.dialog.definition
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html 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();
  }
},

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


嗨奥吉姆克,

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

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

1)打开对话框时不应调用这三个函数。在我最初的答案中概述的创建的示例中没有发生这种情况。您可能需要在代码中搜索这三个函数名称,以查看它们是否在 除了 selectOne 定义中包含的 ( 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() 函数的这个特定用法中,没有使用索引变量。您可以删除两个 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

返回 obj.getInputElement();

以下是removeAllOptions()函数的流程: 在selectorOne 的onChange() 函数中,我们创建一个代表selectorTwo 的变量“values”。 值 =dialog.getContentElement( '一般', '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;
}

祝你好运, 乔

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CKEditor对话框选择框动态填充 的相关文章

  • 有没有办法从 PhantomJS 的键盘读取用户输入?

    我使用 PhantomJS 登录网站 必须手动输入验证码 如何将验证码图像保存到磁盘 然后在 PhantomJS 控制台中手动输入验证码 我遇到了同样的问题 只需将系统模块与 page render 和一些传递给 page evaluate
  • 禁用外部点击时关闭模式

    我正在制作一些使用模式的博客物质化 但我的模态 onclick 外部和错误数据有问题 这是我的代码 main js function changepassword var user userlog val var content conte
  • JavaScript CSV 验证

    如何检查文本框中的逗号分隔值并在未找到时发出警报 如果有的话 里面应该有字符 比如A B C D function validate validate text box
  • Javascript 闭包 - 变量范围问题

    我正在阅读 Mozilla 开发者网站上有关闭包的内容 我注意到在他们的常见错误示例中 他们有以下代码 p Helpful notes will appear here p p E mail p
  • 在 IE8 中使用 javascript __proto__

    你好 我在 javascript 中有这两个对象 var john firstname John lastname Smith var jane firstname Jane 这样做 jane proto john 我可以访问 Jane 的
  • Javascript“this”在 IE 中丢失上下文

    以下在 firefox safari chrome 中工作正常 在 IE 中 this 似乎在 handleEvent 函数中丢失上下文 警报的结果是 object Window 这不是我想要的 当从handleEvent 输出时 this
  • 获取 CRM 2011 中功能区按钮的 ID

    我创建了一个 JavaScript 我想在其中隐藏功能区Reactivate Lead按钮取决于某些条件 我通过在表单上按 F12 获得了按钮的 ID 即lead NoRelationship Form Mscrm Form lead Re
  • 如何从 javascript 错误对象读取错误消息

    有人可以帮我解决以下问题吗 我正在通过 redux 操作进行后调用 如下所示 export const addEmployee firstName surname contactNumber email gt async dispatch
  • 多次训练brain.js?

    在第一次训练后 如何将新信息 仅新信息 而不是所有信息 因为这会花费太多性能 训练到我的用 Brain js 制作的神经网络 它有点粗糙 但您可以使用以下结构来实现 如果我们加入 2 个训练数据集 旧数据集与新数据集 然后重新训练keepN
  • 纯 JS 相当于 Jquery eq()

    jquery 的纯等价物是什么eq 例如 我怎样才能实现 class1 class2 eq 0 text 1254 在纯 JavaScript 中 要获取数组中的元素索引 可以使用 在 JavaScript 中 因此 要重现您的代码 您可以
  • 为什么我需要使用 setState 回调来设置依赖于第一个项目的 setState 完成的第二个状态项目的状态?

    在此 componentDidUpdate 方法中 执行 setState 将引号设置为从 fetch 返回的内容后 我必须使用回调再次执行 setState 将 randomQuoteIndex 设置为调用 randomQuoteInde
  • 使用 JavaScript 防止网页导航离开

    如何使用 JavaScript 防止网页导航离开 Using onunload允许您显示消息 但不会中断导航 因为为时已晚 然而 使用onbeforeunload将中断导航 window onbeforeunload function re
  • 将文本字段限制为仅包含数字的最佳方法?

    I m using the following Javascript to restrict a text field on my website to only accept numerical input and no other le
  • 如何绕过Access-Control-Allow-Origin?

    我正在一个平台上对我自己的服务器进行ajax调用 他们设置了阻止这些ajax调用的平台 但我需要它从我的服务器获取数据以显示从我的服务器数据库检索到的数据 我的 ajax 脚本正在运行 它可以将数据发送到我的服务器的 php 脚本以允许其处
  • JQuery $.ajax() 在 java servlet 中发布数据

    我想将数据发送到 java servlet 进行处理 数据将具有可变长度并采用键 值对 A1984 1 A9873 5 A1674 2 A8724 1 A3574 3 A1165 5 数据不需要这样格式化 这就是我现在的方式 var sav
  • JavaScript 错误:MVC2 视图中的条件编译已关闭

    我试图在 MVC2 视图页面中单击时调用 JavaScript 函数 a href Select a JavaScript 函数 function SelectBenefit id code alert id alert code 这里 b
  • 从请求url获取hash参数

    我有这样的网址 http www coolsite com daily plan id 1 http www coolsite com daily plan id 1解析该字符串并读取哈希值 id 之后的值 的最简单方法是什么 谢谢 在客户
  • 什么时候可以使用Javascript,什么时候不可以?

    不使用太多 javascript jquery 是个好习惯吗 我们应该尽可能避免它 为了良好的可访问性 吗 什么时候可以使用 JavaScript 什么时候不能在网页设计和开发中使用 JavaScript 在什么场景 什么条件下 Updat
  • VS Code 扩展 - 获取完整路径

    我正在为 VS Code 编写一个插件 我需要知道调用扩展的文件的路径 无论是从编辑器上下文菜单或资源管理器上下文菜单调用还是用户只需键入扩展命令 function activate context get full path of the
  • 在 Firestore 文本字段中存储文本文件并删除换行符

    我正在尝试将 CSV 文件存储在 Cloud Firestore 内的文本字段中 然而 Firestore 正在删除所有换行符并将整个 CSV 文件存储为一行 这Firestore 数据类型文档 https firebase google

随机推荐