Ueditor表格增加自定义表格宽高功能

时间：2021-03-11 00:58:35

​​Ueditor​​的表格，不能设置表格的宽高，所以自定义预览页面的时候，导致表格不是自己想要的样式。参考插入图片设置宽高的样式，自定义宽高输入框。

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

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

下面添加代码

<ul>
<!--设置自定义宽度-->
<li>
<label><input type="radio" id="J_setTableWidth" name="size"/><var id="lang_setTableWidth"></var></label>
</li>
</ul>
<!--自定义宽度输入区-->
<ul id="J_setTableText" style="display:none">
<li>
<label> <var id="lang_width"></var><input id="J_setWidthText" type="text" style="display:inline-none;width:60px;" value="200"  />px</label>
</li>
<li>
<label> <var id="lang_height"></var><input id="J_setHeightText" type="text" style="display:inline-none;width:60px;" value="200" />px</label>
</li>

</ul>

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

1)在​autoSizePage = $G("J_autoSizePage"),​下面增加代码，初始化变量

setTableWidth = $G("J_setTableWidth"),//设置自定义宽度 
setTableText = $G("J_setTableText"),//设置宽高的区
setWidthText = $G("J_setWidthText"),//宽度
setHeightText = $G("J_setHeightText"),//高度

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

domUtils.on(setTableWidth, "click", me.setTableWidthHanler);//点击设置自定义宽度，触发示例发生变化
domUtils.on(setWidthText, "blur", me.setTableWidthHanler);//设置宽度，失焦触发示例发生变化 
domUtils.on(setHeightText, "blur", me.setTableWidthHanler);//设置高度，失焦触发示例发生变化

3)​autoSizeContentHanler​、​autoSizePageHanler​两个函数内都增加一句代码。点击其他选择时，隐藏宽高输入区

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

4)在​autoSizePageHanler​函数后面增加一段代码，显示宽高输入区，设置示例宽高为输入的值

setTableWidthHanler: function () {   //设置自定义宽度 
var example = $G("J_example");
var txtSize = $G("J_setTableText");
var txtSize1 = $G("J_setWidthText");
var txtSize2 = $G("J_setHeightText");
txtSize.style.display = "block";
var tds = example.getElementsByTagName(example, "td");
utils.each(tds, function (td) {
td.removeAttribute("width");
td.removeAttribute("height");
            });
example.setAttribute('width', txtSize1.value+'px');
example.setAttribute('height', txtSize2.value+'px');
        },

5)找到​​dialog.onok​事件,该事件为设置后点击确定的监听事件，在 ​editor.execCommand("edittable", tone.value);​上面加一段代码，当设置自定义宽度被选中，设置表格的宽高。

//设置自定义宽度  
if (setTableWidth.checked) {
editor.execCommand("settablesize", setWidthText.value,setHeightText.value);       
        }
  1. 修改​​ueditor.all.min.js​​文件。(有些人的组件读取的方法是​​ueditor.all.js​​​内的，只要修改对应的区域即可，以下是两个文件的代码）

首先是ueditor.all.min.js

1)内搜索​​UE.commands.edittable​​，大概在12540行，在执行方法后面再新建一个方法，代码如下。我是以px为单位，大家可以根据需要修改。

以下是ueditor.all.js

1)​内搜索​​UE.commands['edittable']​​，大概在19743行，注释为"//表格属性"，在执行方法后面再新建一个方法，代码如下。我是以px为单位，大家可以根据需要修改。

//设置表格宽度
        (UE.commands.settablesize = {
queryCommandState: function () {
return e(this).table ? 0 : -1;
          },
execCommand: function (a, b,c) {
console.log("调用设置表格宽高",b,c)
var d = this.selection.getRange(),
e = domUtils.findParentByTagName(d.startContainer, "table");
if (e) {
if(b){
e.width=b+'px';
              }
if(c){
e.height=c+'px';
              }
            }
          },
        }),

2)搜索​​UE.commands.adaptbytext​​，大概在12363行，修改方法，代码如下

(UE.commands.adaptbytext = UE.commands.adaptbywindow =
          {
queryCommandState: function () {
return e(this).table ? 0 : -1;
            },
execCommand: function (b) {
var c = e(this),
d = c.table;
if (d)
if ("adaptbywindow" == b) a(d, this);
else {
var f = domUtils.getElementsByTagName(d, "td th");
utils.each(f, function (a) {
a.removeAttribute("width");
                  }),
d.removeAttribute("width");
d.width="100%";
                }
            },
          }),

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

Ueditor表格增加自定义表格宽高功能

Ueditor表格增加自定义表格宽高功能

Ueditor表格增加自定义表格宽高功能

标签：

相关文章