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

Question

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

我正在使用：

jquery-3.5.1.min.js
tinymce v5.7.1
bootstrap 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>

Answer 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');
  });
});

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

Answer 2

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

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

TinyMCE Editor not showing inside JQuery UI Dialog

jquery

jquery-ui

tinymce

jquery-ui-dialog

tinymce-5