Ueditor表格增加自定义表格宽度功能_ueditor中table默认自带width配置

之前有用户提到Ueditor的表格，不能设置表格的宽度，所以自定义预览页面的时候，导致表格不是自己想要的样式。所以简单了做了个功能，使用户可以做简单的更改。

1. 找到dialogs/table文件夹，修改edittable.html文件，在

<li>
    <label><input type="radio" id="J_autoSizePage" name="size" /><var id="lang_autoSizePage"></var></label>
</li>

下面添加代码

<!--设置自定义宽度 start-->
<li>
    <label><input type="radio" id="J_setSizePage" name="size" />自定义页面宽度</label>
</li>
<li>
    <input id="J_setText" type="text" style="display:none;width:60px;" value="40%" onchange="SetText(this)"/>
</li>
<!--end-->

2. 找到dialogs/table文件夹，修改edittable.js文件，

a.在autoSizePage = $G("J_autoSizePage"),下面增加代码

setSizePage = $G("J_setSizePage"),//设置自定义宽度 
setSizeText = $G("J_setText"),//设置自定义宽度 

b.在domUtils.on(autoSizePage, "click", me.autoSizePageHanler);下面增加代码

domUtils.on(setSizePage, "click", me.setSizePageHanler);//设置自定义宽度 

c.autoSizeContentHanler、autoSizePageHanler都增加一句代码

var txtSize = $G("J_setText");
txtSize.style.display = "none";

d. 在autoSizePageHanler后面增加一段代码

        setSizePageHanler: function () {   //设置自定义宽度 
            var example = $G("J_example");
            var txtSize = $G("J_setText");
            txtSize.style.display = "block";
            var tds = example.getElementsByTagName(example, "td");
            utils.each(tds, function (td) {
                td.removeAttribute("width");
            });
            example.setAttribute('width', txtSize.value);
        },

e. 找到dialog.onok事件，在    editor.execCommand("edittable", tone.value);上面加一段代码

//设置自定义宽度  
if (setSizePage.checked) {
    editor.execCommand("settablesize", setSizeText.value);       
}

3. 修改ueditor.all.js文件，

a.搜索UE.commands['edittable']，大概在19676行，注释为"//表格属性"，在执行方法后面再新建一个方法，代码如下

    //表格属性  宽度设置  
    UE.commands['settablesize'] = {
        queryCommandState: function () {
            return getTableItemsByRange(this).table ? 0 : -1
        },
        execCommand: function (cmd, width) {
            var rng = this.selection.getRange(),
                table = domUtils.findParentByTagName(rng.startContainer, 'table');
            if (table) {
                table.width = width;
            }
        }
    };

b. 搜索UE.commands["adaptbytext"]，大概在19459行，修改方法，代码如下

   //修改表格属性 宽度设置  
    UE.commands["adaptbytext"] =
        UE.commands["adaptbywindow"] = {
            queryCommandState: function () {
                return getTableItemsByRange(this).table ? 0 : -1
            },
            execCommand: function (cmd) {
                var tableItems = getTableItemsByRange(this),
                    table = tableItems.table;
                if (table) {
                    if (cmd == 'adaptbywindow') {
                        table.removeAttribute("width");
                        resetTdWidth(table, this);
                    } else {
                        var cells = domUtils.getElementsByTagName(table, "td th");
                        utils.each(cells, function (cell) {
                            cell.removeAttribute("width");
                        });                        
                        table.removeAttribute("width");
                        table.width = "100%";
                    }
                }
            }
        };

修改完成后，效果图如下：

 

 

这个是简单的修改方式，可做进一步优化，替换成下拉框的方式也可以，而且现在不能进行数据的反绑，是一个问题，以上单元格属性、表格属性都可以扩展。