美文网首页让前端飞Web前端之路
ueditor使用editor.execCommand( 'li

ueditor使用editor.execCommand( 'li

作者: 李佳明先生 | 来源:发表于2019-12-17 00:25 被阅读0次

介绍

因为项目需要,所以要在百度富文本编辑器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'
 });

SUCCESS

相关文章

网友评论

    本文标题:ueditor使用editor.execCommand( 'li

    本文链接:https://www.haomeiwen.com/subject/vepjnctx.html