Question

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

JSFiddle示例：

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

Answer 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/

TinyMCE下拉菜单不适用于MDL模式

1 个答案: