可能有些人觉得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后,再加载。
效果:
点击这个“抓取远程图片”按钮后的抓取的效果:
注意:官方抓取远程图片后居然在PHP里用了return,奇怪,其它地方都是用的echo,搞得我看到图片是抓取下来了,但就是没有替换掉,后来将这个return改为echo 数据体,再return空,就行了。
老的Fckeditor2.6.6已经不兼容新的标准浏览器了,可惜当年花了大把力气改了N多很顺手的功能。唉,现在也只能找个功能差不多,可以写写技术文章的编辑器。
如果想要Fckeditor2.6.6的可以找群主发邮件。
作者:OK兄 浏览次数:57