最近公司在换系统后台文本编辑器。选的UEditor.遇见要去除编辑器中表格td的的自动换行功能(即去除样式中的 word-break:break-all)。搜索了一大圈没有找到解决方法,最后苦逼的自己研究出来了。
1. 去除表格td 换行
找到ueditor.all.js,搜索 me.addListener('keydown', function ()
var timer;
me.addListener('keydown', function () {
clearTimeout(timer);
timer = setTimeout(function () {
var rng = me.selection.getRange(),
cell = domUtils.findParentByTagName(rng.startContainer, ['th', 'td'], true);
if (cell) {
var table = cell.parentNode.parentNode.parentNode;
if (table.offsetWidth > table.getAttribute("width")) {
//注释这里,表格td不自动添加换行功能。
//cell.style.wordBreak = "break-all";
}
}
}, 100);
});
注释 cell.style.wordBreak = "break-all"; 或者上面的整段注释都可以。
2. 禁止UEditor编辑器自动去除表格边框
搜索 domUtils.removeAttributes(table, ['style', 'border']); 去掉后面的 border
removeStyleSize(table, true);
//domUtils.removeAttributes(table, ['style', 'border']);
domUtils.removeAttributes(table, ['style']);
utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {
if (isEmptyBlock(td)) {
domUtils.fillNode(me.document, td);
}
removeStyleSize(td, true);
domUtils.removeAttributes(td, ['style'])
});
3. 设置表格边框
参考 http://blog.csdn.net/lllljz/article/details/45247945
百度编辑器ueditor插入一个表格后,在编辑过程中有表格,但是保存后,在前台网页中没有边框,也没有颜色。找了很久的源码,终于解决了。
1. 打开编辑器根目录下面的ueditor.all.js文件,找到:
for (var c = 0; c < colsNum; c++) {
html.push('<td width="' + tdWidth + '" vAlign="' + opt.tdvalign + '" >' + (browser.ie ? domUtils.fillChar : '<br/>') + '</td>')
}
改成:
for (var c = 0; c < colsNum; c++) {
html.push('<td style="border:1px solid #ccc;" width="' + tdWidth + '" vAlign="' + opt.tdvalign + '" >' + (browser.ie ? domUtils.fillChar : '<br/>') + '</td>')
}
不同的版本的代码可能略微有点不同。
2. 在ueditor.all.js文件中找到:table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled"); 在这句代码下面加一行:table.setAttribute("style", "border-collapse:collapse;");
3. 在ueditor.all.js文件中找到:return '<table><tbody>' + html.join('') + '</tbody></table>' 改为:return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>' 。
此时,再刷新后台,插入一个表格,就有边框了。因为改的是ueditor.all.js,所以调用ueditor.all.js才有效,要是调用的ueditor.all.min.js,那么就需要更改ueditor.all.min.js文件了。
这三处代码弄清楚后,要是你还想扩展一些新的样式效果也是可以直接在这几个地方修改就好了。
(2)设置表格边线不显示问题。
根据上面的可以解决新插入表格不现实边线问题,但是如果追加行或者列,新追加行列表格边框不能显示。
请这样操作,鼠标移至表格内,右击,选择“表格”,然后选择子菜单中“设置表格边框可见”就可以了。
要对表格操作可以选子菜单中的“表格属性”。(一直以为这是人家的bug,最后才明白是我们不会用)
参考原文链接:https://blog.csdn.net/kingqiji01/article/details/65495647
4.关于ueditor编辑器双引号 “”转义BUG的修复
http://blog.csdn.net/wanghao3616/article/details/25816747
最近在使用ueditor编辑器的时候发现,它会把正常的“ 与 ”转义为 &ldquo; &rdquo;
检查转义的方法发现对于“ ”是没有做处理的,需要自己加上去
ueditor.all.js
unhtml:function (str, reg) {
return str ? str.replace(reg || /[&<">'](?:(amp|lt|quot|gt|#39|nbsp);)?/g, function (a, b) {
if (b) {
return a;
} else {
return {
'<':'<',
'&':'&',
'"':'"',
'>':'>',
"'":'''
}[a]
}
}) : '';
},
html:function (str) {
return str ? str.replace(/&((g|l|quo)t|amp|#39|nbsp);/g, function (m) {
return {
'<':'<',
'&':'&',
'"':'"',
'>':'>',
''':"'",
' ':' '
}[m]
}) : '';
},
修复方法:
第一个方法 unhtml 把 amp|lt|quot|gt|#39|nbsp 替换为 amp|lt|quot|gt|#39|nbsp|ldquo|rdquo就可以了
第二个方法html
修改成
html:function (str) {
return str ? str.replace(/&((g|l|quo)t|#39|nbsp|ldquo|rdquo|amp);/g, function (m) {
return {
'<':'<',
'"':'"',
'>':'>',
''':"'",
' ':' ',
'“':'“',
'”':'”',
'&':'&'
}[m]
}) : '';
},