[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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>   <title>Using API to customize dialogs - CKEditor Sample</title>   <metacontent="text/html; charset=utf-8"http-equiv="content-type" />   <scripttype="text/javascript"src="./ckeditor.js"></script>   <scripttype="text/javascript"src="./mydialog.js"></script>
</head>
<body>   <h1>CKEditor Sample</h1>   <textareacols="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>   <scripttype="text/javascript">   //调用封装的函数
makeEditor('editor1');</script>
</body>
</html>

2. mydialog.js

//外部调用函数
functionmakeEditor(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的值
functiongetUrlParam(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)*/
functioniframeLoad(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 );   }   };   });

4. upload.php页面，就直接返回了些数据，php的上传程序就略过了

Php代码

<?php
$str = '{"picurl":/l.jpg"}';
$str = '{"error":-304}';
echo $str;
?>

生成的dialog的样子和editor

原文地址:http://www.cnblogs.com/hannover/archive/2011/07/29/2121545.html

转载于:https://www.cnblogs.com/101rico/archive/2013/01/20/2868398.html

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

easy-mock写的一个简单的模拟二页的反馈
用easy-mock写的一个简单的模拟二页的反馈,因为后端团队比较传统,所以设计的结构不太规范. 功能:每页10条,共2页,共12条记录,超出参数范围会返错误码: easy模板: {code: fun ...
AndroidSDK开发6我用kotlin协程写了一个简单sdk
目录 AndroidSDK开发6我用kotlin协程写了一个简单sdk 1.kotlin的依赖和导包如下:(//如果不使用协程可以去掉协程的导包减少sdk包大小) 2.Application代码如下: ...
用shell脚本写的一个简单的俄罗斯方块
用shell脚本写的一个简单的俄罗斯方块代码代码测试下载链接代码代码 #!/bin/bash #version 1.2,若非正常退出,请使用附带的killel.sh脚本杀死进程 #定义用于 ...
最近写了一个简单的面向对象的脚本语言 Q 语言
最近写了一个简单的面向对象的脚本语言 Q 语言,语法类似于 Javascript, 加入了一些 python 的语法功能. 同时实现了部分的 Javascript prototype 的功能 (个人觉 ...
自己写的一个简单的android记事本app
自己写的一个简单的记事本app,效果如下: 一.首先是第一个界面的编写,最上面是一个TextView,中间是一个Linearlayout中嵌套一个listview布局,最下面是一个button.下面附 ...
用li写的一个简单的横向导航菜单demo
用ul li写的一个简单的横向导航菜单,很实用: /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ ...
使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）
使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API(代码可直接运行) 代码很简单,适合初学者学习借鉴.可以当成一个小工具使用. 注意: 1.代码应联网使用. 2.在输入密钥和id时 ...
用VB6写的一个简单俄罗斯方块代码
网络上有很多俄罗斯方块代码.它们大都为了视觉效果,程序比较复杂,不利于学习游戏编程.所以我写了个简单俄罗斯方块代码,尽量用VB本身的功能,没有复杂的DirectX. 下载(注意修改下载后的扩展名) m ...
php和python写爬虫-一个简单的Python写的XML爬虫
一个简单的Python写的XML爬虫来源:程序员人生发布时间:2013-11-06 16:22:29 阅读次数:1578次原理很简单,读XML结构,返回值,判断,根据返回的值得到下一个XML的地 ...

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

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

最新文章

热门文章