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

TinyMCE Editor not showing inside JQuery UI Dialog

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

我正在使用:

可能是冲突了?下面是我的代码。

<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>

考虑以下因素: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');
  });
});

仅进行了一些调整,它似乎按预期工作。

大家好,感谢您回答我的问题。确实是css冲突,所以我的解决方法是修改tox-edit-areatox-statusbar的位置class.