TinyMCE专注于并关注循环

Question

我对TinyMCE 4.x及其行为有疑问。每当我在弹出窗口初始化TinyMCE时，我会集中注意力并集中注意循环，它看起来像闪烁。

这是一个显示正在发生的事情的gif。您可以在主页面上看到我初始化TinyMCE的一切都很好并且按预期工作，但是在弹出窗口上它有点开始集中注意力。您也可以在开发人员工具中看到它，该类会从mce-content-body更改为mce-content-body mce-edit-focus然后再返回。

以下是我如何初始化TinyMCE的代码。：

initializeTinyMCE(element){
    var self = this;
    if (element == 'p') {
        var toolbar = 'forecolor | fontsizeselect fontselect | align | bold italic underline | bullist numlist | link | strokes | done';
    } else if (element == 'h') {
        var toolbar = 'forecolor | fontsizeselect | fontselect | H | align | bold italic underline | link | strokes | done';
    }

    if(self.el.parent().hasClass('popup_content')){
        var inline = false
    } else {
        var inline = true
    }
    tinyMCE.init({
        selector: `#${self.el.find('.content_element').attr('id')}`,
        auto_focus: self.testFocus(self.el.find('.content_element').attr('id')),
        content_css : 'assets/tinymce/custom/fonts.css',
        inline: true,
        menubar: false,
        theme: 'modern',
        skin: 'pagesource',
        plugins: ['lists link textcolor colorpicker strokes'],
        toolbar: toolbar,
        fontsize_formats: '8px 10px 12px 14px 18px 24px 36px 48px',
        setup: function (editor) {
            self.clonedEl = self.el.clone()
            editor.addButton('align', {
                type: 'menubutton',
                text: '',
                icon: 'alignleft',
                menu: [{
                    text: '',
                    icon: 'alignleft',
                    onclick: function () {
                        editor.execCommand('JustifyLeft');
                    }
                }, {
                    text: '',
                    icon: 'aligncenter',
                    onclick: function () {
                        editor.execCommand('JustifyCenter');
                    }
                }, {
                    text: '',
                    icon: 'alignright',
                    onclick: function () {
                        editor.execCommand('JustifyRight');
                    }
                }, {
                    text: '',
                    icon: 'alignjustify',
                    onclick: function () {
                        editor.execCommand('JustifyFull');
                    }
                }]
            }),
            editor.addButton('H', {
                type: 'menubutton',
                text: 'H',
                icon: false,
                menu: [{
                    text: 'H1',
                    onclick: function() {
                        editor.execCommand('FormatBlock', false, 'h1');
                    }
                }, {
                    text: 'H2',
                    onclick: function() {
                        editor.execCommand('FormatBlock', false, 'h2');
                    }
                }, {
                    text: 'H3',
                    onclick: function() {
                        editor.execCommand('FormatBlock', false, 'h3');
                    }
                }, {
                    text: 'H4',
                    onclick: function() {
                        editor.execCommand('FormatBlock', false, 'h4');
                    }
                }, {
                    text: 'H5',
                    onclick: function() {
                        editor.execCommand('FormatBlock', false, 'h5');
                    }
                }, {
                    text: 'H6',
                    onclick: function() {
                        editor.execCommand('FormatBlock', false, 'h6');
                    }
                }]
            });
            editor.addButton('done', {
                text: 'Done',
                icon: false,
                onclick: function () {
                    tinyMCE.remove();
                    self.openEditManager();
                    self.el.find('.ui-resizable-handle').removeClass('hidden');
                }
            });
            editor.on('remove', function(ed) {
                self.removeTinyMCE(ed);
                window.historyMem.addRecord(self.clonedEl, self.el.clone())
            });
        },
        init_instance_callback: function (editor) {
            editor.on('focus', function (e) {
                 console.log(2)
            });
        }
    });
}

这是问题持续存在的元素和结构：

<div class="body_wrapper">
  <div class="project_wrapper" data-uuid="<%= @page.uuid %>">
    <div class="edit_grid">
      <div class="popup_editor">
        <div class="popup">
          <div class="popup_content">
            <div class='widget'>
              <div class='tinymce_editor'> # this is the element

              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

注意：当不进行内联编辑时，它可以正常工作。

我不需要确切的解决方案，任何建议和想法都将不胜感激。我已经尝试了几乎所有的东西，比如在DOM中的不同位置移动编辑器弹出窗口，剥离所有设置等等。谢谢。