介绍
因为项目需要,所以要在百度富文本编辑器ueditor上二次开发,有一个就是在富文本中插入链接的功能;
官方文档如下:
execCommand(String cmd, Object options)
执行当前命令
参数列表
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
options | Object | 设置自定义属性,例如:url、title、target |
示例
editor.execCommand( 'link', '{
url:'ueditor.baidu.com',
title:'ueditor',
target:'_blank'
}' );
这里首先要纠正下,这里官方的代码演示是错误的,第二个参数应该是一个对象,而不是字符串,所以,正确用法应该是
editor.execCommand( 'link', {
url:'ueditor.baidu.com',
title:'ueditor',
target:'_blank'
});
复现问题
当插入链接(调用此方法)后,文本框没有反应;
然后我们尝试着去检查富文本编辑框html代码,会发现:
链接加上了,但没有文字,原来title字段是a 标签的title属性。。。然而官方文档也没有详细说明;
解决办法
通过断点查找,找到了 ueditor \ utf8-php \ dialogs \ link的link.html文件,如下有这么一段代码:
function handleDialogOk(){
var href =$G('href').value.replace(/^\s+|\s+$/g, '');
if(href){
if(!hrefStartWith(href,["http","/","ftp://",'#'])) {
href = "http://" + href;
}
var obj = {
'href' : href,
'target' : $G("target").checked ? "_blank" : '_self',
'title' : $G("title").value.replace(/^\s+|\s+$/g, ''),
'_href':href
};
//修改链接内容的情况太特殊了,所以先做到这里了
//todo:情况多的时候,做到command里
if(orgText && text.value != orgText){
link[browser.ie ? 'innerText' : 'textContent'] = obj.textValue = text.value;
range.selectNode(link).select()
}
if(range.collapsed){
obj.textValue = text.value;
}
editor.execCommand('link',utils.clearEmptyAttrs(obj) );
dialog.close();
}
}
结果测试,是obj.textValue
起到了关键作用,所以,可以改为
editor.execCommand( 'link', {
url:'ueditor.baidu.com',
title:'ueditor',
target:'_blank',
textValue:'ueditor'
});