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

Posted 2023-05-08

【中文标题】TinyMCE 编辑器未在 JQuery UI 对话框中显示

【英文标题】：TinyMCE Editor not showing inside JQuery UI Dialog

【发布时间】：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。

【参考方案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类的位置。