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

Question

编辑器文本区域未显示在 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>

标签： jqueryjquery-uitinymcejquery-ui-dialogtinymce-5

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

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