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

Question

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

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

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

可能与字段本身有关...这是 dialogs/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都是装修。我使用常规 type:text 和 type:select 用插件做了样本，这些工作正常。但不知何故 type:'html' 并没有以同样的方式清除并导致问题。不幸的是，所有在线示例都是简单的文本元素或其他预构建元素。

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

Answer 1

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

由于 CKEditor 为编辑器的每个实例提供了唯一的名称，我使用：CKEDITOR.currentInstance.name 作为一个 ID，它环绕着插件中的所有 html。
修改了我的 javascript 以根据 CKEDITOR.currentInstance.name 和任何特定 ID 或 class 我需要实现它的所有目标。

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

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

How to reset a custom plugin dialog in CKEditor 4

drupal

ckeditor