[ckeditor系列]ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传

ckeditor最近修改一个上传的，原来的Image的上传插件功能很多，但是自己用，没有必要，就进行了修改，后来就改成了目前的样子，根据_samples/api_dialog.html 进行了修改，把页面里面的调用都进行了修改.

1.添加网址和上传在一个tab中

2.图片上传之后会直接把生成的值放到图片网址的input中。

1.index.html调用页面

.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   <title>Using API to customize dialogs - CKEditor Sample</title>   <meta content="text/html; charset=utf-8" http-equiv="content-type" />   <script type="text/javascript" src="./ckeditor.js"></script>   <script type="text/javascript" src="./mydialog.js"></script>   
</head>   
<body>   <h1>   CKEditor Sample   </h1>   <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>   <script type="text/javascript">   //调用封装的函数   
            makeEditor('editor1');   </script>   
</body>   
</html>

2. mydialog.js

//外部调用函数   
function makeEditor(id) {   CKEDITOR.on( 'dialogDefinition', function( ev )   {   var dialogName = ev.data.name;   var dialogDefinition = ev.data.definition;   if ( dialogName == 'link' )   {   var infoTab = dialogDefinition.getContents( 'info' );   //删除不要的标签页中选项   infoTab.remove( 'linkType' );   infoTab.remove( 'browse' );   var urlField = infoTab.get( 'url' );   //更改链接的文字   urlField['label'] = '链接地址';   //删除不要的tab标签页   dialogDefinition.removeContents( 'target' );   dialogDefinition.removeContents( 'advanced' );   //由于filebrowserUploadUrl的使用,删除链接dialog中出现的upload标签页   dialogDefinition.removeContents( 'upload' );   }   });   var editor = CKEDITOR.replace( id,   {   toolbar : [[ 'Source','-','Bold','Italic','Underline','Strike','-','Link','-','Unlink','-','AddImage']],   //引入上传   filebrowserUploadUrl : 'http://127.0.0.1/editor/upload.php'  });   editor.on( 'pluginsLoaded', function( ev )   {   if ( !CKEDITOR.dialog.exists( 'myAddImage' ) )   {   //生成调用js的地址 窗体函数   var href = 'http://' + window.location.host + '/editor/myAddImage.js';   CKEDITOR.dialog.add( 'myAddImage', href );   }   editor.addCommand( 'myImageCmd', new CKEDITOR.dialogCommand( 'myAddImage' ) );   editor.ui.addButton( 'AddImage',   {   label : '图片',   icon:'images/images.jpg', //增加按钮图标   command : 'myImageCmd'  });   });   
}   //获取CKEditorFuncNum的值   
function getUrlParam(url)   
{   var reParam = new RegExp('(?:[\?&]|&amp;)CKEditorFuncNum=([^&]+)', 'i') ;   var match = url.match(reParam) ;   return (match && match.length > 1) ? match[1] : '' ;   
}   
/*  * iframe的onload  * params:  *        t   obj iframe  *        num int anonymous function number used to pass the url of a file to CKEditor (random number)  */  
function iframeLoad(t, num){   t.style.display = 'none';   var ret = t.contentWindow.document.body.innerHTML;   var fchild = t.contentWindow.document.body.firstChild;   // fchild.nodeType { 1 => form, 3 => textNode}    if (fchild.nodeType == 3) {   //我返回的ret是json数据,进行处理   var data = eval("("+ret+")");    if(data.picurl) {    picurl = data.picurl;   //触发filebrowser   
            CKEDITOR.tools.callFunction(num, picurl);   } else if(data.error) {    CKEDITOR.tools.callFunction(num, '', '上传失败'+data.error);   }      }   t.style.display = '';

3. myAddImage.js

CKEDITOR.dialog.add( 'myAddImage', function( editor )   
{   var ADDIMAGE = 1,   regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i;   return {   title : '添加图片',   minWidth : 400,   minHeight : 200,   contents :    [   {   id : 'addImage',   label : '添加图片',   title : '添加图片',   filebrowser : 'uploadButton',   elements :   [   {       id : 'txtUrl',   type : 'text',   label : '图片网址',   required: true  },   {   id : 'photo',   type : 'file',   label : '上传图片',   style: 'height:40px',   size : 38   },   {   type : 'fileButton',   id : 'uploadButton',   label : '上传',   filebrowser :   {   action : 'QuickUpload',   target : 'addImage:txtUrl'//更新的文本标签   
                           },   onClick: function(){   var d = this.getDialog();   var _txtUrl = d.getContentElement('addImage','txtUrl');   var _photo =  d.getContentElement('addImage','photo');   var _frameId = _photo._.frameId;   var _iframe =  CKEDITOR.document.getById(_frameId);   //给iframe添加onload事件   _iframe.setAttribute('onload',    'getAjaxResult(this,'+getUrlParam(_photo.action)+')');   },   'for' : [ 'addImage', 'photo']   }   ]   }   ],   onOk : function(){   _src = this.getContentElement('addImage', 'txtUrl').getValue();   if (_src.match(regexGetSizeOrEmpty)) {   alert('请输入网址或者上传文件');   return false;   }   this.imageElement = editor.document.createElement( 'img' );   this.imageElement.setAttribute( 'alt', '' );   this.imageElement.setAttribute( 'src', _src );   editor.insertElement( this.imageElement );   }   };   });