UEditor编辑器(笔记)

最近公司在换系统后台文本编辑器。选的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编辑器双引号 &ldquo;&rdquo;转义BUG的修复

http://blog.csdn.net/wanghao3616/article/details/25816747

最近在使用ueditor编辑器的时候发现,它会把正常的&ldquo; 与 &rdquo;转义为 &amp;ldquo; &amp;rdquo; 

检查转义的方法发现对于&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 {
                    '<':'&lt;',
                    '&':'&amp;',
                    '"':'&quot;',
                    '>':'&gt;',
                    "'":'&#39;'
                }[a]
            }

        }) : '';
    },

   
    html:function (str) {
        return str ? str.replace(/&((g|l|quo)t|amp|#39|nbsp);/g, function (m) {
            return {
                '&lt;':'<',
                '&amp;':'&',
                '&quot;':'"',
                '&gt;':'>',
                '&#39;':"'",
                '&nbsp;':' '
            }[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 {
                '&lt;':'<',
                '&quot;':'"',
                '&gt;':'>',
                '&#39;':"'",
                '&nbsp;':' ',
                '&ldquo;':'“',
                '&rdquo;':'”',
                '&amp;':'&'

            }[m]
        }) : '';
    },











  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值