Browse Source

添加编辑器的table功能

luyanan 6 years ago
parent
commit
6c9f23490d
4 changed files with 64 additions and 93 deletions
  1. 3 2
      cmp-portal/css/common.css
  2. 2 1
      css/common.css
  3. 54 23
      js/ueditor/ueditor.all.js
  4. 5 67
      js/ueditor/ueditor.config.js

+ 3 - 2
cmp-portal/css/common.css

@ -1,8 +1,8 @@
1 1
@charset "utf-8";
2 2
/*reset*/
3
p,dl,dt,dd,ul,ol,li,a,em,div,span,th,td{margin:0;padding:0; word-break:break-all; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
3
p,dl,dt,dd,ul,ol,li,a,em,div,span{margin:0;padding:0; word-break:break-all; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
4 4
form,label,button,input,select,textarea{font-size:14px; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
5
h1,h2,h3,h4,h5,h6{font-size:100%;margin:0;padding:0; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
5
h1,h2,h3,h4,h5,h6{font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
6 6
html,body{height:100%; width:100%; margin:0;padding:0;font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
7 7
input{vertical-align:middle; outline:none;}
8 8
img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic;border:0;padding:0; margin:0;}
@ -10,6 +10,7 @@ small{font-size:12px;}
10 10
ul,ol{list-style:none;}
11 11
button,input,select,textarea{font-size:100%;}
12 12
table{border-collapse:collapse;border-spacing:0;}
13
table>tbody>tr>td,table>tbody>tr>th{padding: 5px 10px;border: 1px solid #DDD;}
13 14

14 15
body{height:auto;position: relative;min-height: 100%;}
15 16
a{text-decoration:none;color:#666}

+ 2 - 1
css/common.css

@ -2,7 +2,7 @@
2 2
/*reset*/
3 3
p,dl,dt,dd,ul,ol,li,a,em,div,span,th,td{margin:0;padding:0; word-break:break-all; font-family: PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif}
4 4
form,label,button,input,select,textarea{font-size:14px; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif}
5
h1,h2,h3,h4,h5,h6{font-size:100%;margin:0;padding:0; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
5
h1,h2,h3,h4,h5,h6{font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
6 6
html,body{height:100%; width:100%; margin:0;padding:0;font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
7 7
input{vertical-align:middle; outline:none;}
8 8
img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic;border:0;padding:0; margin:0;}
@ -10,6 +10,7 @@ small{font-size:12px;}
10 10
ul,ol{list-style:none;}
11 11
button,input,select,textarea{font-size:100%;}
12 12
table{border-collapse:collapse;border-spacing:0;}
13
table>tbody>tr>td,table>tbody>tr>th{padding: 5px 10px;border: 1px solid #DDD;}
13 14
a,a:active,a:hover{outline:0;text-decoration:none;}
14 15
/* CSS Document */
15 16


+ 54 - 23
js/ueditor/ueditor.all.js

@ -18966,12 +18966,12 @@ UE.plugins['video'] = function (){
18966 18966
                for (var r = 0; r < rowsNum; r++) {
18967 18967
                    html.push('<tr' + (r == 0 ? ' class="firstRow"':'') + '>');
18968 18968
                    for (var c = 0; c < colsNum; c++) {
18969
                        html.push('<td width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie && browser.version < 11 ? domUtils.fillChar : '<br/>') + '</td>')
18969
                        html.push('<td style="border:1px solid #ccc;" width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie && browser.version < 11 ? domUtils.fillChar : '<br/>') + '</td>')
18970 18970
                    }
18971 18971
                    html.push('</tr>')
18972 18972
                }
18973 18973
                //禁止指定table-width
18974
                return '<table><tbody>' + html.join('') + '</tbody></table>'
18974
                return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>'
18975 18975
            }
18976 18976

18977 18977
            if (!opt) {
@ -19826,13 +19826,21 @@ UE.plugins['video'] = function (){
19826 19826
            if (!table) return -1;
19827 19827
            return 0;
19828 19828
        },
19829
        execCommand: function () {
19830
            var table = getTableItemsByRange(this).table;
19831
            utils.each(domUtils.getElementsByTagName(table,'td'),function(td){
19832
                td.style.borderWidth = '1px';
19833
                td.style.borderStyle = 'solid';
19834
            })
19835
        }
19829
        execCommand: function () {
19830
		    var table = getTableItemsByRange(this).table;
19831
		    utils.each(domUtils.getElementsByTagName(table,'td'),function(td){
19832
		        td.style.borderWidth = '1px';
19833
		        td.style.borderStyle = 'solid';
19834
		        td.style.borderColor = 'windowtext';
19835
		    });
19836
		    //增加下面一段
19837
		    utils.each(domUtils.getElementsByTagName(table,'th'),function(th){
19838
		        th.style.borderWidth = domUtils.getComputedStyle(th, "border-width");
19839
		        th.style.borderStyle = 'solid';
19840
		        th.style.borderColor = 'windowtext';
19841
		    });
19842
		}
19843

19836 19844
    };
19837 19845
    function resetTdWidth(table, editor) {
19838 19846
        var tds = domUtils.getElementsByTagName(table,'td th');
@ -20237,18 +20245,41 @@ UE.plugins['table'] = function () {
20237 20245
                    if (domUtils.findParentByTagName(me.selection.getStart(), 'caption', true)) {
20238 20246
                        div.innerHTML = div[browser.ie ? 'innerText' : 'textContent'];
20239 20247
                    }
20240
                } else {
20241
                    utils.each(tables, function (table) {
20242
                        removeStyleSize(table, true);
20243
                        domUtils.removeAttributes(table, ['style', 'border']);
20244
                        utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {
20245
                            if (isEmptyBlock(td)) {
20246
                                domUtils.fillNode(me.document, td);
20247
                            }
20248
                            removeStyleSize(td, true);
20249
//                            domUtils.removeAttributes(td, ['style'])
20250
                        });
20251
                    });
20248
                } else {
20249
                	utils.each(tables, function (table) {                        
20250
                        //粘贴进来的表格table定义属性
20251
                        domUtils.setAttributes(table, {
20252
                            style:'border-left:1px solid #666; border-top:1px solid #ccc;',
20253
                        });                                            
20254
                        
20255
                        removeStyleSize(table, true);
20256
                        domUtils.removeAttributes(table, ['style', 'border']);
20257
                        //domUtils.removeAttributes(table, ['style']);//no remove table Style
20258
                        utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {
20259
                            
20260
                            //粘贴进来的表格td定义属性
20261
                            domUtils.setAttributes(td, {
20262
                                style:'border-bottom:1px solid #666; border-right:1px solid #ccc; padding:5px;',
20263
                            });                        
20264
                        
20265
                            if (isEmptyBlock(td)) {
20266
                                domUtils.fillNode(me.document, td);
20267
                            }
20268
                            removeStyleSize(td, true);
20269
                            //domUtils.removeAttributes(td, ['style'])
20270
                        });
20271
                    });
20272

20273
//                  utils.each(tables, function (table) {
20274
//                      removeStyleSize(table, true);
20275
//                      domUtils.removeAttributes(table, ['style']); // ['style', 'border']
20276
//                      utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {
20277
//                          if (isEmptyBlock(td)) {
20278
//                              domUtils.fillNode(me.document, td);
20279
//                          }
20280
//                          removeStyleSize(td, true);
20281
//                      });
20282
//                  });
20252 20283
                }
20253 20284
                html.html = div.innerHTML;
20254 20285
            }
@ -21908,6 +21939,7 @@ UE.plugins['tablesort'] = function () {
21908 21939
        execCommand: function (cmd) {
21909 21940
            var table = getTableItemsByRange(this).table;
21910 21941
            table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled");
21942
            table.setAttribute("style", "border-collapse:collapse;");
21911 21943
            cmd == "enablesort" ? domUtils.addClass(table,"sortEnabled"):domUtils.removeClasses(table,"sortEnabled");
21912 21944
        }
21913 21945
    };
@ -23830,7 +23862,6 @@ UE.plugin.register('autoupload', function (){
23830 23862
                if (json.state == 'SUCCESS' && json.url) {
23831 23863
                    successHandler(json);
23832 23864
                } else {
23833
                	alert(1111);
23834 23865
                    errorHandler(json.state);
23835 23866
                }
23836 23867
            }catch(er){
@ -25996,7 +26027,7 @@ UE.ui = baidu.editor.ui = {};
25996 26027
                '<div class="edui-box edui-icon"></div>' +
25997 26028
                '</div>' +
25998 26029
                '<div class="edui-box edui-splitborder"></div>' +
25999
//              '<div class="edui-box edui-arrow" onclick="$$._onArrowClick();"></div>' +
26030
                '<div class="edui-box edui-arrow" onclick="$$._onArrowClick();"></div>' +
26000 26031
                '</div></div></div>';
26001 26032
        },
26002 26033
        showPopup: function (){

+ 5 - 67
js/ueditor/ueditor.config.js

@ -40,7 +40,8 @@
40 40
            'insertorderedlist', 'insertunorderedlist', '|',
41 41
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
42 42
            'spechars', '|',
43
           	'superscript', 'subscript','|','link','simpleupload','insertimage','formatmatch',
43
           	'superscript', 'subscript','|','link','simpleupload','insertimage', '|', 'formatmatch', '|',
44
           	'inserttable', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols'
44 45
        ]]
45 46
        
46 47
        /*, toolbars: [[
@ -121,7 +122,7 @@
121 122
        //粘贴只保留标签,去除标签所有属性
122 123
        //,retainOnlyLabelPasted: false
123 124
124
        ,pasteplain:true  //是否默认为纯文本粘贴。false为不使用纯文本粘贴,true为使用纯文本粘贴
125
        ,pasteplain:false  //是否默认为纯文本粘贴。false为不使用纯文本粘贴,true为使用纯文本粘贴
125 126
        //纯文本粘贴模式下的过滤规则
126 127
        //'filterTxtRules' : function(){
127 128
        //    function transP(node){
@ -373,7 +374,7 @@
373 374
		,outputXssFilter: true
374 375
		// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
375 376
		,whitList: {
376
			/*a:      ['target', 'href', 'title', 'class', 'style'],
377
			a:      ['target', 'href', 'title', 'class', 'style'],
377 378
			abbr:   ['title', 'class', 'style'],
378 379
			address: ['class', 'style'],
379 380
			area:   ['shape', 'coords', 'href', 'alt'],
@ -435,70 +436,7 @@
435 436
			tt:     [],
436 437
			u:      [],
437 438
			ul:     ['class', 'style'],
438
			video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']*/
439
			a:      ['target', 'href', 'title', 'class', 'style'],
440
			abbr:   [],
441
			address: [],
442
			area:   [],
443
			article: [],
444
			aside:  [],
445
			audio:  [],
446
			b:      [],
447
			bdi:    [],
448
			bdo:    [],
449
			big:    [],
450
			blockquote: [],
451
			br:     [],
452
			caption: [],
453
			center: [],
454
			cite:   [],
455
			code:   [],
456
			col:    [],
457
			colgroup: [],
458
			dd:     [],
459
			del:    [],
460
			details: [],
461
			div:    [],
462
			dl:     [],
463
			dt:     [],
464
			em:     [],
465
			font:   [],
466
			footer: [],
467
			h1:     [],
468
			h2:     [],
469
			h3:     [],
470
			h4:     [],
471
			h5:     [],
472
			h6:     [],
473
			header: [],
474
			hr:     [],
475
			i:      [],
476
			img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],
477
			ins:    [],
478
			li:     [],
479
			mark:   [],
480
			nav:    [],
481
			ol:     [],
482
			p:      ['style'],
483
			pre:    [],
484
			s:      [],
485
			section:[],
486
			small:  [],
487
			span:   [],
488
			sub:    [],
489
			sup:    [],
490
			strong: [],
491
			table:  [],
492
			tbody:  [],
493
			td:     [],
494
			tfoot:  [],
495
			th:     [],
496
			thead:  [],
497
			tr:     [],
498
			tt:     [],
499
			u:      [],
500
			ul:     [],
501
			video:  []
439
			video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']
502 440
		}
503 441
    };
504 442