CKEditor Table 宽度和列宽单位

Question

我目前正在测试 CKEditor。

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

到目前为止我发现它似乎有时使用 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>

我原来的 post 在 http://ckeditor.com/forums/CKEditor/CKEditor-Table-Width-and-Column-Width-Units 上。我决定在这里 post 因为我的问题已经两天没有 activity

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

更新

我想要的是用户在所见即所得中看到 table 在编辑时例如 100% 宽度。当用户更改列时，他们会以百分比而不是像素为单位进行更改。或者用户使 table 小于总宽度的 100%。然后 table 以 % 而不是 px 的形式发生变化。

Answer 1

似乎没有更改此行为的配置设置，编辑插件本身可能有点令人头疼。

您可以简单地给 table 一个百分比宽度，其余的保持原样。大多数现代浏览器都会 treat/resize 按比例显示单元格。您可以使用 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>

有关如何使用 class 名称添加此内容以专门针对 CKEditor tables 的一些信息，请参阅：

CKEditor Table 宽度和列宽单位

CKEditor Table Width and Column Width Units

javascript

html

css

ckeditor