Question

我目前正在测试CKEditor。

特别是表调整大小和表插件的功能。

到目前为止，我发现它似乎有时与pt一起工作，有时与px一起工作。

有没有办法可以改变行为总是使用百分比或其他类型的相对比率而不是px或pt作为列宽？

<table border="1" cellpadding="1" cellspacing="1" style="width:1340px">
    <thead>
        <tr>
            <th scope="col" style="width:386px">1</th>
            <th scope="col" style="width:953px">
            <p>2</p>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:386px">3</td>
            <td style="width:953px">4</td>
        </tr>
    </tbody>
</table>

我的原帖是http://ckeditor.com/forums/CKEditor/CKEditor-Table-Width-and-Column-Width-Units。我决定在这里发帖，因为我的问题在两天内没有任何活动。

我正在寻找一种简单的方法来通过配置或通过JavaScript以编程方式调整CKEditor中的表插件来更改px中的单位，例如百分比或任何其他相对单位。

更新

我想要的是用户在WYSIWYG中看到一个表格，例如编辑时的宽度为100％。当用户更改列时，它们的百分比变化而不是像素。或者用户使表格的总宽度小于100％。然后表格在％而不是px中更改。

Answer 1

似乎没有配置设置来改变这种行为，编辑插件本身可能有点令人头疼。

你可以简单地给你的表一个百分比宽度，其余部分保持不变。大多数现代浏览器将按比例处理/调整细胞大小。您可以使用jquery强制执行此操作，甚至可以使用简单的CSS声明。例如：$("table").width("100%");或table { width: 100% !important; }。

或者，您可以使用jquery获取当前宽度并将其更改为百分比，例如类似于：

var tableWidth = $("table").width();
$("table tr").children().each(function( index ) {
    $(this).width(Math.round(100 * $(this).width() / tableWidth)+"%");
});

$("table").width("100%");

var tableWidth = $("table").width();
$("table tr").children().each(function( index ) {
    $(this).width(Math.round(100 * $(this).width() / tableWidth)+"%");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="1" cellspacing="1" style="width:1340px">
    <thead>
        <tr>
            <th scope="col" style="width:386px">1</th>
            <th scope="col" style="width:953px">
            <p>2</p>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:386px">3</td>
            <td style="width:953px">4</td>
        </tr>
    </tbody>
</table>

有关如何使用类名将其添加到特定目标CKEditor表的一些信息，请参阅： https://stackoverflow.com/a/7980775/2126792

CKEditor表宽度和列宽单位

1 个答案: