TinyMCE 表格最大宽度

Question

我在 Vue 应用程序中使用 TinyMCE。

我已经使用

table_grid: false

配置了 TinyMCE，其效果是在创建表时打开一个对话框。在对话框中，您可以指定行、列、宽度等。在此对话框中，我想设置表格允许的最大宽度。我想将最大宽度限制为 100%。现在可以将宽度设置为大于 100%，这会导致表格的宽度大于

<TinyMCEEditor>

。

我已经设法使用 CSS 更改表格的大小。但最好的解决方案是用户无法输入大于 100% 的宽度。

Answer 1

您可以尝试以下选项

使用 CSS 实现默认行为

tinymce.init({
    // other settings...
    content_style: "table {width: 100% !important; max-width: 100% !important;}"
});

表属性更改的验证：

tinymce.init({
    // other settings...
    setup: function (editor) {
        editor.on('ExecCommand', function (e) {
            if (e.command === 'mceInsertTable' || e.command === 'mceTableProps') {
                // Delay the check to ensure it runs after the table is inserted/updated
                setTimeout(() => {
                    const tables = editor.dom.select('table');
                    tables.forEach(table => {
                        const width = editor.dom.getStyle(table, 'width', true);
                        if (parseInt(width) > 100) {
                            editor.dom.setStyle(table, 'width', '100%');
                        }
                    });
                }, 0);
            }
        });
    }
});