UEditor手动保存远程图片

UEditor是比较受欢迎的一款富文本编辑器，但是还有许多不人性化的地方，这里要说的就是教大家如何把自动抓取远程图片并保存改成手动的。

第一步：注释掉ueditor.all.js文件里catchremoteimage插件中的监听事件，代码如下；

1
2
3
4
//注释掉监听粘贴后事件，这样它会听话些，不会任性的保存图片了
// me.addListener("afterpaste", function () {
    // me.fireEvent("catchRemoteImage");
// });

第二步：在工具栏添加一个触发保存远程图片的按钮，方法很多，这里以官方模板来添加，代码如下；

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
UE.registerUI('catchRemoteImage',function(editor,uiName){
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName,{
        execCommand:function(){
            alert('execCommand:' + uiName);
        }
    });
 
    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name:uiName,
        //提示
        title: '保存远程图片到本地',
        //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
        cssRules :'background-position: -651px -77px;',
        //点击时执行的命令
        onclick:function () {
            //如果可以点击操作的话，就触发保存远程图片时间
            editor.fireEvent("catchremoteimage");
        }
    });
 
    //当点到编辑内容上时，按钮要做的状态反射
    editor.addListener('selectionchange', function () {
        //获取编辑器内容
        var html = editor.getContent();
        //正则提取src为http://开头的img标签
        var url = html.match(/<img.+?src=\"http:\/\/.+?\/>/g);
        //判断正则提取标签是否为空
        if(url != null){
            //对每个提取出来的链接进行循环判断，如果存在远程图片，则图片抓取按钮高亮，否则不可操作（灰色）
            for(var i = 0;i < url.length;i++){
                var domian = url[i].match(/http:\/\/([^\/]+?)\//);
                if(domian[1] != document.domain){
                    btn.setDisabled(false);
                    break;//存在远程图片，退出循环
                }
            }
        }
        else{
            btn.setDisabled(true);
        };
    });
 
    //因为你是添加button,所以需要返回这个button
    return btn;
},56,'content'/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);