TinyMCE 下拉菜单在 MDL 模式下不起作用答案

【问题标题】：TinyMCE dropdowns not working in MDL modalTinyMCE 下拉菜单在 MDL 模式下不起作用
【发布时间】：2016-02-03 23:18:01
【问题描述】：

我正在尝试在 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
        });
    });

【问题讨论】：

标签： javascript tinymce material-design tinymce-4 material-design-lite

【解决方案1】：

我添加了以下代码，它正在运行：

            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/

【讨论】：