PHP试题网_中国最大的免费网络PHP试题测试平台,PHP试卷调查,PHP试卷模板、PHP考试测验
公告: PHP试题网于2022.06.21变更为少儿编程学院

可能有些人觉得ueditor已经加入此功能了,在复制时就可以抓取内容里的图片并保存在本地。但有些时间,我们复制的不是网页的内容,还是代码,这个时候ueditor就傻眼了,不认了。无论怎么切换模式,都不会再抓取复制代码里的图片。于是就有了此篇文章。


PS:个人觉得复制网页内容就自动抓取内容里的图片,不经过发布人的同意,不好。不如搞成一个按钮,让发布人自个操作。



思路:

    在编辑器上加一个按钮,取名:抓取远程图片,点击此按钮开始对编辑器里的内容进行分析,然后开始抓取。这和我写Fckeditor抓取远程图片的思路一致。


加按钮:其实就是扩展。

根据ueditor的规矩:写扩展,需要在指定的文件名里:addCustomizeButton.js。


在addCustomizeButton.js里写入以下代码:

UE.registerUI('button',function(editor,uiName){

    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name:'远程图片',
        //提示
        title:'获取远程图片',
        //需要添加的额外样式,指定icon图标,这里默认使用一个重复的icon
        cssRules :'background-position: -500px 0;',
        //点击时执行的命令
        onclick:function () {
           //这里可以不用执行命令,做你自己的操作也可
           //editor.execCommand(uiName);
           editor.fireEvent("catchRemoteImage");
        }
    });

    //当点到编辑内容上时,按钮要做的状态反射
    editor.addListener('selectionchange', function () {
    //editor.addListener('click', function () {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });

    //因为你是添加button,所以需要返回这个button
    return btn;
}
/*index 指定添加到工具栏上的那个位置,默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的,
默认是页面上所有的编辑器都会添加这个按钮*/);


这个文件必须要加载ueditor后,再加载。



效果:

image.png


点击这个“抓取远程图片”按钮后的抓取的效果:

image.png


注意:官方抓取远程图片后居然在PHP里用了return,奇怪,其它地方都是用的echo,搞得我看到图片是抓取下来了,但就是没有替换掉,后来将这个return改为echo 数据体,再return空,就行了。



老的Fckeditor2.6.6已经不兼容新的标准浏览器了,可惜当年花了大把力气改了N多很顺手的功能。唉,现在也只能找个功能差不多,可以写写技术文章的编辑器。


如果想要Fckeditor2.6.6的可以找群主发邮件。


作者:OK兄 浏览次数:55