内联模式下 TinyMCE 4 插件中的自定义模式屏幕答案

【问题标题】：Custom modal screen in TinyMCE 4 plugin in inline mode内联模式下 TinyMCE 4 插件中的自定义模式屏幕
【发布时间】：2013-07-31 14:22:12
【问题描述】：

我正在为新的 TinyMCE 4 开发一个自定义插件。这个插件使用了一个模态屏幕。因为我想使用我已经开发的模态屏幕/JS 服务，所以我选择不使用 TinyMce 的窗口管理器。

问题是，当我打开打开的模态屏幕时，TinyMCE 会失去焦点。我希望 TinyMce 保持工具栏打开，否则我无法与编辑器交互。 TinyMCe 关闭是因为它收到了一个模糊事件（很可能是因为它不知道任何打开的窗口）。

可以在以下 Fiddle 中找到显示问题的缩小问题。只要单击示例按钮，就会出现问题。 http://fiddle.tinymce.com/pudaab/1

下面附上缩短的代码：

tinymce.PluginManager.add('example', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('example', {
        text: 'My button',
        icon: false,
        onclick: function() {
            var selection = editor.selection,
                dom = editor.dom,
                selectedElm,
                anchorElm;

            // Focus the editor since selection is lost on WebKit in inline mode
            editor.focus();

           // Open a modal screen using bootstrap
            $('#elem').modal();

            // Note: As soon as modal opens TinyMce receives a blur event and disables the toolbar
        }
    });
});

【问题讨论】：

嗯，你的意思是你不能使用弹窗？
问题是 TinyMce 失去焦点。因此它隐藏了工具栏。因为 TinyMce 不再有焦点，所以我不再能够在编辑器上执行操作。例如，我不能再用其他内容替换所选文本。
你不能在点击弹出按钮后立即重新调整编辑器的焦点，然后用编辑器做任何你想做的事情吗？
这样你就失去了光标的位置、选择等。

标签： plugins tinymce tinymce-4 bootstrap-modal

【解决方案1】：

我终于设法自己解决了。诀窍是在调用模态屏幕之前调用editor.nodeChanged()。然后，当您关闭模态屏幕时，您会调用 editor.focus()。

感谢您的帮助！

【讨论】：

嗯，这就是我的建议
我已经在我的代码中使用了editor.focus()。重要的部分是使用editor.nodeChanged()。这样可以保存您当前的选择等。您在回复中是否暗示过该解决方案？如果是这样，我会误读您的帖子。
您知道，这种方法似乎在最新的 TinyMCE 中不起作用（v.4.1.10 在发表此评论时）。但是有一个简单的解决方法：将mce-in 类添加到您的自定义模式对话框中。