TinyMCE 下拉列表在 MDL 模式中不起作用

TinyMCE dropdowns not working in MDL modal

本文关键字：不起作用 模式 MDL 下拉列表 TinyMCE      更新时间：2023-09-26

我正在尝试在Material Design Lite模式中运行TinyMCE，但是用于选择字体系列和字体大小的下拉列表不起作用：

JSFiddle 示例：

https://jsfiddle.net/m11q7dzj/

.CSS：

.mdl-dialog{
  width: 500px;
  height: 500px;
}
.editable{
    width: 500px;
  height: 450px;
  outline: 1px dotted #333;
}

.HTML：

<dialog class="mdl-dialog">
        <form action="#">
            <div class="mdl-textfield mdl-js-textfield">
                <div class="editable-parent"></div>
                <div class="editable">Click to edit...</div>
            </div>
        </form>
</dialog>
 <input id="show-dialog" type="submit" value="Open Editor" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" />

JavaScript：

    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    if (!dialog.showModal) {
        dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function () {
        dialog.showModal();
        tinymce.init({
            selector: 'div.editable',
            inline: true,
            height: '480px',
            max_height: 500,
            fixed_toolbar_container: ".editable-parent",
            fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
            toolbar: 'fontselect | fontsizeselect',
            menubar: false
        });
    });

我添加了以下代码，它正在工作：

            setup: function (ed) {
                ed.on('focus', function (args) {
                    $(dialog).on("click", ".mce-listbox", function() {
                        $("body > div[id^=mceu_]").appendTo(dialog);
                    });
                });
            }

https://jsfiddle.net/m11q7dzj/1/

相关文章：