TinyMCE 编辑器未在 JQuery UI 对话框中显示答案

【问题标题】：TinyMCE Editor not showing inside JQuery UI DialogTinyMCE 编辑器未在 JQuery UI 对话框中显示
【发布时间】：2021-08-13 06:49:00
【问题描述】：

编辑器文本区域未显示在 jQuery UI 对话框模式中。相反，状态栏显示在工具栏的正下方。

我正在使用：

jquery-3.5.1.min.js
tinymce v5.7.1
引导程序 v4.5.3

也许是冲突？下面是我的代码。

<div id="testdialog">
    <p>TEST</p> 
    <div>
        <textarea cols="35" rows="5" id="testTinyMCE" name="testTinyMCE" style="padding-left: 10px"></textarea>
    </div>
</div>
<button type="button" onclick='testtiny()'>Try</button>

<script>
$(function(){
    $('#testdialog').dialog({
        'title':'Add Form Field',
        'resizable': false,
        'dialogClass':'form-content', 
        'modal': true,
        'autoOpen': false,
        'open':function(){
            initTiny();
        },
        'width':650
    }); 
});

function initTiny(){
    tinymce.init({
        selector: '#testTinyMCE'
      });
}

function testtiny(){
    console.log('opening the dialog');
    $('#testdialog').dialog('open');
}
</script>

【问题讨论】：

怀疑这是某种命令或操作。我建议在打开之前先初始化 TinyMCE，然后再初始化 Dialog。

标签： jquery jquery-ui tinymce jquery-ui-dialog tinymce-5

【解决方案1】：

考虑以下问题：https://jsfiddle.net/Twisty/bjhmL61a/

JavaScript

$(function() {
  function initTiny(selector) {
    tinymce.init({
      selector: selector
    });
  }

  initTiny("#testTinyMCE");

  $('#testdialog').dialog({
    title: 'Try TinyMCE',
    resizable: false,
    classes: {
      "ui-dialog-content": "form-content"
    },
    modal: true,
    autoOpen: false,
    width: 650
  });

  $("#tryButton").click(function() {
    $('#testdialog').dialog('open');
  });
});

只需进行一些调整，它似乎就可以按预期工作。

【讨论】：

【解决方案2】：

大家好，感谢您回答我的问题。确实是css冲突造成的，所以我的解决方法是修改tox-edit-area和tox-statusbar类的位置。

【讨论】：