我正在尝试在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
});
});
答案 0 :(得分:1)
我添加了以下代码,它正在运行:
setup: function (ed) {
ed.on('focus', function (args) {
$(dialog).on("click", ".mce-listbox", function() {
$("body > div[id^=mceu_]").appendTo(dialog);
});
});
}