javascript - 如何控制tinyMCE模态的宽度和高度？

Question

我用tinyMCE的plugin link来插入链接，但问题是它很小

如何控制它的大小？ 我的初始化代码

tinymce.init({
        target: this,
        plugins: "table, link, textcolor",
        toolbar: [
            'undo redo | bold italic | bullist | numlist | tabel | link | forecolor | fontsizeselect | Extra',
        ],
        fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
        setup: function (editor) {
            editor.addButton('Teksten', {
                type: 'menubutton',
                text: 'Extra',
                icon: false,
                menu: createTempMenu(editor)
            });
        }
 });

Answer 1

即使不是几年，我也遇到了同样的问题几个月，没有任何解决方案。 但我想我终于破解了它。 在我的例子中，我使用的是 materilazie.css，所有输入字段都有:

input:not([type]),
input[type=text]:not(.browser-default):not(.mce-textbox),
input[type=password]:not(.browser-default):not(.mce-textbox),
input[type=email]:not(.browser-default):not(.mce-textbox),
input[type=url]:not(.browser-default):not(.mce-textbox),
input[type=time]:not(.browser-default):not(.mce-textbox),
input[type=date]:not(.browser-default):not(.mce-textbox),
input[type=datetime]:not(.browser-default):not(.mce-textbox),
input[type=datetime-local]:not(.browser-default):not(.mce-textbox),
input[type=tel]:not(.browser-default):not(.mce-textbox),
input[type=number]:not(.browser-default):not(.mce-textbox),
input[type=search]:not(.browser-default):not(.mce-textbox),
textarea.materialize-textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 20px 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

问题在于以下两行: 输入:不([类型])， 和 宽度:100%;

你看，tinymce弹窗中的链接字段是一个没有指定类型的输入。因此，字段的宽度将设置为 100%。鉴于 tinymce 背后复杂的调整大小逻辑，弹出窗口接收到 222px 的宽度(内联 css)(或者至少在我的情况下，但问题中的屏幕截图看起来正是我所拥有的)

一旦我删除了 width 元素，弹出窗口加载得很好(但其他一切都变得丑陋:)) 经过进一步调查，我发现 tinymce 将类“mce-textbox”添加到输入字段。

这是我添加到我的 css 文件中的内容

input:not([type]).mce-textbox {
    width: inherit;
}

这会覆盖 width:100% 部分并允许 tinymce 正确测量宽度并设置弹出窗口的宽度。 考虑到主 css 仍然对弹出输入字段有一些影响 - 整体外观仍然不是原来的 tinymce 风格 - 但至少弹出窗口现在恢复到正常大小。

注意:我绝不是前端开发人员，因此我确信这个问题有更好、更优雅的解决方案。但至少我们现在知道去哪里找了。

我希望这会有所帮助(尽管我知道这个问题现在已经很老了:))