ckeditor4.x - 创建并显示一个仅使用的对话框，基于全局状态构建。

Question

我有一个插件，每次用户双击一个单词时都需要显示一个(模态)对话框。

检测双击没有问题，但对话框中的确切字段/值取决于用户单击的确切单词以及一些可变的全局状态。所以直到我需要显示它之前，我才能创建对话框。问题来了:我该怎么做？

现在我使用这个代码:

var dialogName="uniqueDialog" + counter++;
CKEDITOR.dialog.add(dialogName,function(editor) {
     // Creating dialog here.
    });
CKEDITOR.instances.editor.openDialog(dialogName);

这有效，但必须添加一个唯一命名的对话框，只显示一次然后更新再次使用它似乎真的很错误。另外我担心这会继续使用资源，因为对话框被删除了(我找不到任何删除方法)。

所以我的问题是:有没有更好的方法来动态创建和显示“一次性”对话框？

Answer 1

更新:

如果不允许 bootstrap ，那么对话框的 addFrame 版本可能是可以接受的。然后这可以引用可以从参数加载的 html 文件。

注意:plunkr 只工作，如果你 fork 和编辑它，否则它会给你一个 404 模板。

这是一个快速的plunkr:

plunky

这是有问题的插件:

CKEDITOR.plugins.add( 'insertVariable', {
   requires: ['iframedialog'],
  icons: 'insertvariable',
  init: function( editor ) {

    editor.addCommand( 'varDialog', new CKEDITOR.dialogCommand( 'varDialog' ) );

    CKEDITOR.dialog.addIframe('varDialog','varDialog','sample.html?var='+item,500,400);

    editor.ui.addButton( 'insertVariable', {
      label: 'Insert Variable',
      command: 'varDialog',
      icon: this.path + '<insert gif>'
    });

  }
});

显然，您不再创建具有不同内容的对话框，而是指的是另一段可以更改的 html。我也保留了 bootstrap 的东西以供引用。

我做了一个最终编辑，将显示当前内容。所以我认为这大致是你想要的。一探究竟。

上一个答案

如果您准备使用 bootstrap ，那么您可以做的不比查看他们的模态对话框更糟糕，该对话框可以随意显示和隐藏。

http://getbootstrap.com/javascript/#modals

这很简单，减少了继续创建自己的对话框的任何需要。该对话框不会是一种使用类型，但您将根据需要设置默认值。不同的内容链接在这里:

http://getbootstrap.com/javascript/#modals-related-target

这将是实现这一目标的最快方法。这完全取决于您是否要使用此框架。由于 CKEDITOR 已经在使用 JQuery，这是一个值得考虑的选项。