Question

我使用tinyMCE的插件链接来插入链接，但问题是它非常小

我怎样才能控制它的大小？我的初始代码

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

问题在于以下两行： input:not([type]), 和 width: 100%;

您会看到，tinymce弹出窗口中的链接字段是没有指定类型的输入。因此，字段的宽度将设置为100％。考虑到tinymce背后复杂的大小调整逻辑，弹出窗口的宽度为222px（内联css）（或者至少在我来说是这样，但是问题中的屏幕截图看起来确实是我的东西）

一旦我删除了width元素，弹出窗口就很好地加载了（但是其他所有东西都变得丑陋了：））经过进一步调查，我发现tinymce将“ mce-textbox”类添加到了输入字段中。

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

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

这将覆盖width：100％部分，并允许tinymce正确测量宽度并根据需要设置弹出窗口的宽度。考虑到主要的css仍然会影响弹出窗口输入字段的事实-总体外观仍然不是原始的tinymce样式-但至少弹出窗口现在已恢复到其正常大小。

注意：我绝不是前端开发人员，因此，我确定有一个更好，更优雅的解决方案。但至少我们知道现在要看哪里。

我希望这会有所帮助（尽管我现在知道这个问题已经很老了：））

Answer 2

我通过添加自定义css解决了

.mce-window-body {
  width: inherit !important;
}

.mce-window-body > .mce-container {
   width: 100% !important;
}

.mce-window{
   width: 30% !important;
   left: 50% !important;
   top: 50% !important;
   margin-left: -15% !important;
   margin-top: -150px !important;
}

但我不认为这是答案，因为直到现在我还不知道为什么会这样显示小

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

2 个答案: