提取FCK编辑器中上传的图片地址

前段时间因项目功能需求，要将FCK编辑器中的图片的地址提取出来，经过一段时间的摸索与测试，基本完成了这个功能，只需在页面中加入如下代码即可

function FCKeditor_OnComplete(editorInstance){ editorInstance.Events.AttachEvent('OnBlur', onEditorBlur); } function onEditorBlur(){ try{ var oEditor = FCKeditorAPI.GetInstance("content"); if(!oEditor.IsDirty()) return; var newDiv = document.createElement('div'); newDiv.innerHTML = oEditor.GetXHTML(true); var imgs = newDiv.getElementsByTagName('img'); var srcs = []; for(var i = 0; i < imgs.length; i++) { var src = imgs[i].src; srcs[srcs.length] = src.replace(getDomainName(), ''); } addImageURL(srcs); }catch(e){} } var domainName = ''; function getDomainName(){ if('' != domainName) return domainName; domainName = "http://" + window.location.host; return domainName; } function addImageURL(srcs) { var uploadImages = document.getElementById("uploadImages"); uploadImages.options.length = 0; uploadImagesoptions.add(new Option('不选择','')); for(var i = 0; i < srcs.length; i++) { uploadImages.options.add(new Option(srcs[i],srcs[i])); } }

对代码做个简单的介绍，首先，function FCKeditor_OnComplete(editorInstance)方法，在页面加载完成后FCK会默认的调用这个方法，具体可见FCK源码：fckeditor.html文件中的

if ( typeof( window.parent.FCKeditor_OnComplete ) == 'function' ) window.parent.FCKeditor_OnComplete( FCK ) ;

FCK对象会以参数的形式传递进来，我们调用FCK中自定义的方法对其增加OnBlur事件，在该事件中通过FCKeditorAPI获取编辑器中的内容，对其内容进行一些处理然后通过getElementsByTagName('img')来获取上传的图片对象，再通过一些程序处理得到我们需要的图片地址，最后将其地址加入到选择框中，供用户选择。

在这里面需要注意的是一些FCK中内置的一些对象及属性的应用，比如oEditor.IsDirty()方法的使用等。

这种方法的主要优点就是不需要更改FCK的源码，与FCK完全的解耦，使用起来也比较方便，FCK升级时也无需更改代码