如何在 CKEditor 4 中重置自定义插件对话框

Question

我的问题是我有一个插件，当页面中只有 1 个 CKEditor时，它工作正常。您可以根据需要多次打开和关闭自定义插件对话框，并进行所有更改。

但是，一旦您在页面上的任何其他 CKEditors 上打开插件，来自上一个 CKEditor 实例的值仍然存在，并且会发生很多怪癖。

我尝试使用 dialog.destroy() 函数，它"修复"了这个问题 - 这意味着您现在可以在所有不同的 CKEditor 实例上很好地使用它。但它会破坏当前实例，这意味着如果您尝试再次打开任何已经使用过的实例，它不起作用(因为对话框已被销毁)。我尝试使用reset()和replace()无济于事。

也许这与田野本身有关...以下是对话框/my_plugin.js文件中的示例：

contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'html',
id: 'icon_with_options',
html: '<div id="selected-icon"></div>',
},
{
type: 'html',
id: 'osu_icon_color',
html: '<div class="osu-colors"><label>Click on a color <input id="osu-icon-color" type="text" value="osu" readonly/></label>' +
'<p class="osu color-active"></p>' +
'<p class="sand"></p>' +
'<p class="stratosphere"></p>' +
'<p class="moondust"></p>' +
'<p class="dark"></p>' +
'<p class="pine-stand"></p>' +
'<p class="luminance"></p>' +
'<p class="reindeer-moss"></p>' +
'</div>',
onLoad: function () {
(function ($) {
var colors = $('.osu-colors p');
colors.click(function (e) {
colors.removeClass('color-active');
var className = e.currentTarget.className;
document.getElementById('osu-icon-color').value = className;
icon_preview();
$(this).addClass('color-active');
});
})(jQuery);
},
},

我想知道问题是否在于大多数HTML都是装饰。 我使用常规类型：文本和类型：选择对插件进行了示例，这些示例工作正常。但不知何故，类型：'html' 没有以相同的方式清除并导致问题。不幸的是，所有在线示例都是简单的文本元素或其他预构建元素。

任何帮助，不胜感激。这是 Drupal 7 模块中的一个插件，但无论如何它都应该适用。

Answer 1

我相信有更好的方法可以做到这一点，但我最终做的是：

1. 由于 CKEditor 为编辑器的每个实例提供了唯一的名称，因此我使用 ： CKEDITOR.currentInstance.name 作为环绕插件中所有 html 的 ID。

2. 修改了我的 javascript，以根据 CKEDITOR.currentInstance.name 和实现它所需的任何特定 ID 或类来定位所有内容。

现在，由于每个实例都通过该 ID 进行区分，因此页面中的所有 CKEditor 实例都可以正常工作。