如何给百度富文本编辑器超链接添加nofollow，即如何给百度文本编辑器添加一个nofollow标签添加的功能，可以方便文本编辑超链接的时候，对站外或者站内的链接添加nofollow标签，有效的防止站点权重的分散。
第一步确认百度富文本编辑器的原理
使用百度富文本编辑器的时候主要通过引用如下ueditor.config.js和ueditor.all.js文件实现的，ueditor.all.js是百度富文本编辑器的引入的主要入口文件，我们先找到添加超级链接的函数。
ueditor.all.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
UE.plugins['link'] = function(){
function optimize( range ) {
var start = range.startContainer,end = range.endContainer;
if ( start = domUtils.findParentByTagName( start, 'a', true ) ) {
range.setStartBefore( start );
}
if ( end = domUtils.findParentByTagName( end, 'a', true ) ) {
range.setEndAfter( end );
}
}
UE.commands['unlink'] = {
execCommand : function() {
var range = this.selection.getRange(),
bookmark;
if(range.collapsed && !domUtils.findParentByTagName( range.startContainer, 'a', true )){
return;
}
bookmark = range.createBookmark();
optimize( range );
range.removeInlineStyle( 'a' ).moveToBookmark( bookmark ).select();
},
queryCommandState : function(){
return !this.highlight && this.queryCommandValue('link') ? 0 : -1;
}
};
function doLink(range,opt,me){
var rngClone = range.cloneRange(),
link = me.queryCommandValue('link');
optimize( range = range.adjustmentBoundary() );
var start = range.startContainer;
if(start.nodeType == 1 && link){
start = start.childNodes[range.startOffset];
if(start && start.nodeType == 1 && start.tagName == 'A' && /^(?:https?|ftp|file)\s*:\s*\/\//.test(start[browser.ie?'innerText':'textContent'])){
start[browser.ie ? 'innerText' : 'textContent'] = utils.html(opt.textValue||opt.href);
}
}
if( !rngClone.collapsed || link){
range.removeInlineStyle( 'a' );
rngClone = range.cloneRange();
}
if ( rngClone.collapsed ) {
var a = range.document.createElement( 'a'),
text = '';
if(opt.textValue){
text = utils.html(opt.textValue);
delete opt.textValue;
}else{
text = utils.html(opt.href);
}
domUtils.setAttributes( a, opt );
start = domUtils.findParentByTagName( rngClone.startContainer, 'a', true );
if(start && domUtils.isInNodeEndBoundary(rngClone,start)){
range.setStartAfter(start).collapse(true);
}
a[browser.ie ? 'innerText' : 'textContent'] = text;
range.insertNode(a).selectNode( a );
} else {
range.applyInlineStyle( 'a', opt );
}
}
UE.commands['link'] = {
execCommand : function( cmdName, opt ) {
var range;
opt._href && (opt._href = utils.unhtml(opt._href,/[<">]/g));
opt.href && (opt.href = utils.unhtml(opt.href,/[<">]/g));
opt.textValue && (opt.textValue = utils.unhtml(opt.textValue,/[<">]/g));
doLink(range=this.selection.getRange(),opt,this);
//闭合都不加占位符，如果加了会在a后边多个占位符节点，导致a是图片背景组成的列表，出现空白问题
range.collapse().select(true);
},
queryCommandValue : function() {
var range = this.selection.getRange(),
node;
if ( range.collapsed ) {
// node = this.selection.getStart();
//在ie下getstart()取值偏上了
node = range.startContainer;
node = node.nodeType == 1 ? node : node.parentNode;
if ( node && (node = domUtils.findParentByTagName( node, 'a', true )) && ! domUtils.isInNodeEndBoundary(range,node)) {
return node;
}
} else {
//trace:1111 如果是<p><a>xx</a></p> startContainer是p就会找不到a
range.shrinkBoundary();
var start = range.startContainer.nodeType == 3 || !range.startContainer.childNodes[range.startOffset] ? range.startContainer : range.startContainer.childNodes[range.startOffset],
end = range.endContainer.nodeType == 3 || range.endOffset == 0 ? range.endContainer : range.endContainer.childNodes[range.endOffset-1],
common = range.getCommonAncestor();
node = domUtils.findParentByTagName( common, 'a', true );
if ( !node && common.nodeType == 1){
var as = common.getElementsByTagName( 'a' ),
ps,pe;
for ( var i = 0,ci; ci = as[i++]; ) {
ps = domUtils.getPosition( ci, start ),pe = domUtils.getPosition( ci,end);
if ( (ps & domUtils.POSITION_FOLLOWING || ps & domUtils.POSITION_CONTAINS)
&&
(pe & domUtils.POSITION_PRECEDING || pe & domUtils.POSITION_CONTAINS)
) {
node = ci;
break;
}
}
}
return node;
}
},
queryCommandState : function() {
//判断如果是视频的话连接不可用
//fix 853
var img = this.selection.getRange().getClosedNode(),
flag = img && (img.className == "edui-faked-video" || img.className.indexOf("edui-upload-video")!=-1);
return flag ? -1 : 0;
}
};
};
从此我们可以得知百度富文本编辑器超链的函数是‘link’，如果我们需要实现给超链接也就是a标签里添加一个rel=“nofollow”，这个时候我们还需要在ueditor.config.js配置一下link函数允许的参数。
ueditor.config.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
whitList: {
a: ['target', 'href', 'title', 'class', 'style','rel'],
abbr: ['title', 'class', 'style'],
address: ['class', 'style'],
area: ['shape', 'coords', 'href', 'alt'],
article: [],
aside: [],
audio: ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'],
b: ['class', 'style'],
bdi: ['dir'],
bdo: ['dir'],
big: [],
blockquote: ['cite', 'class', 'style'],
br: [],
caption: ['class', 'style'],
center: [],
cite: [],
code: ['class', 'style'],
col: ['align', 'valign', 'span', 'width', 'class', 'style'],
colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],
dd: ['class', 'style'],
del: ['datetime'],
details: ['open'],
div: ['class', 'style'],
dl: ['class', 'style'],
dt: ['class', 'style'],
em: ['class', 'style'],
font: ['color', 'size', 'face'],
footer: [],
h1: ['class', 'style'],
h2: ['class', 'style'],
h3: ['class', 'style'],
h4: ['class', 'style'],
h5: ['class', 'style'],
h6: ['class', 'style'],
header: [],
hr: [],
i: ['class', 'style'],
img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],
ins: ['datetime'],
li: ['class', 'style'],
mark: [],
nav: [],
ol: ['class', 'style'],
p: ['class', 'style'],
pre: ['class', 'style'],
s: [],
section:[],
small: [],
span: ['class', 'style'],
sub: ['class', 'style'],
sup: ['class', 'style'],
strong: ['class', 'style'],
table: ['width', 'border', 'align', 'valign', 'class', 'style'],
tbody: ['align', 'valign', 'class', 'style'],
td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
tfoot: ['align', 'valign', 'class', 'style'],
th: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
thead: ['align', 'valign', 'class', 'style'],
tr: ['rowspan', 'align', 'valign', 'class', 'style'],
tt: [],
u: [],
ul: ['class', 'style'],
video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']
}
};给a标签添加一个rel参数，如果不修改此处，那么后边不管你怎么操作你会发现始终无法在a标签中添加rel参数。
第二部找到超链接视图文件
找到超链接视图文件，添加一个启用nofollow功能的按钮，这个很简单的啦，超链编辑的窗口有是否在新窗口打开的选项卡，我们只需要照抄改下参数就可以了。link的视图文件在百度编辑器的根目录下的/dialogs/link/link.html文件中。
nofollow样式效果展示
link.html
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
<tr>
<td colspan="2">
<label for="target"><var id="lang_input_target"></var></label>
<input id="target" type="checkbox"/>
</td>
</tr>
<tr>
<td colspan="2">
<label for="rel"><var id="lang_input_rel"></var></label>
<input id="rel" type="checkbox"/>
</td>
</tr>
添加nofollow按钮，在28行后添加label for="rel"，当然这样只是有一个选框，没有文字内容，文字内来源于<var id="lang_input_rel"></var>，如果想要文字描述就要去/dialogs/lang/zh-cn/zh-cn.js,去添加对应的文字内容。
zh-cn.js
javascript
1
2
3
4
5
6
7
8
9
10
11
'link':{
'static':{
'lang_input_text':'文本内容：',
'lang_input_url':'链接地址：',
'lang_input_title':'标题：',
'lang_input_target':'是否在新窗口打开：',
'lang_input_rel':'启用nofollow：'//添加内容
},
'validLink':'只支持选中一个链接时生效',
'httpPrompt':'您输入的超链接中不包含http等协议名称，默认将为您添加http://前缀'
},
最后一步，rel内容添加的控制
我们的思路是当勾选nofollow选框的时候，给a标签中添加rel=“nofollow”，否则就不做任何处理；很简单照抄原有的target参数的写法就可以，继续回到/dialogs/link/link.html文件来操作。
link.html
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$G("title").value = url ? link.title : "";
$G("href").value = url ? url: '';
$G("target").checked = url && link.target == "_blank" ? true : false;
$G("rel").checked = url && link.rel == "nofollow" ? true : false;//76行处添加
$focus($G("href"));
var obj = {
'href' : href,
'target' : $G("target").checked ? "_blank" : '_self',
'rel' : $G("rel").checked ? "nofollow" : '',//88行处添加
'title' : $G("title").value.replace(/^\s+|\s+$/g, ''),
'_href':href
};
