热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

ckeditor最近修改一个上传的,原来的Image的上传插件功能很多,但是自己用,没有必要,就进行了修改,后来就改成了目前的样子,根据_samplesapi_dialog.htm

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

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

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

ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传
1.index.html调用页面

 

Index.html代码 ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传 ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传
  1. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. "http://www.w3.org/1999/xhtml">   
  3.   
  4.        
  5.     "text/html; charset=utf-8" http-equiv="content-type" />   
  6.        
  7.        
  8.   
  9.   
  10.     

      

  11.         CKEditor Sample   
  12.        
  13.     "80" id="editor1" name="editor1" rows="10">

    This is some sample text. You are using "http://ckeditor.com/">CKEditor.

      
  14.        
  15.   
  16.   


	
	
	
	


	

CKEditor Sample

 

2. mydialog.js

 

Js代码 ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传 ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传
  1. //外部调用函数   
  2. function makeEditor(id) {   
  3.     CKEDITOR.on( 'dialogDefinition'function( ev )   
  4.     {   
  5.             var dialogName = ev.data.name;   
  6.             var dialogDefinition = ev.data.definition;   
  7.             if ( dialogName == 'link' )   
  8.             {   
  9.                     var infoTab = dialogDefinition.getContents( 'info' );   
  10.                     //删除不要的标签页中选项   
  11.                     infoTab.remove( 'linkType' );   
  12.                     infoTab.remove( 'browse' );   
  13.                     var urlField = infoTab.get( 'url' );   
  14.                     //更改链接的文字   
  15.                     urlField['label'] = '链接地址';   
  16.                     //删除不要的tab标签页   
  17.                     dialogDefinition.removeContents( 'target' );   
  18.                     dialogDefinition.removeContents( 'advanced' );   
  19.                     //由于filebrowserUploadUrl的使用,删除链接dialog中出现的upload标签页   
  20.                     dialogDefinition.removeContents( 'upload' );   
  21.             }   
  22.     });   
  23.     var editor = CKEDITOR.replace( id,   
  24.     {   
  25.         toolbar : [[ 'Source','-','Bold','Italic','Underline','Strike','-','Link','-','Unlink','-','AddImage']],   
  26.         //引入上传   
  27.         filebrowserUploadUrl : 'http://127.0.0.1/editor/upload.php'  
  28.     });   
  29.     editor.on( 'pluginsLoaded'function( ev )   
  30.     {   
  31.         if ( !CKEDITOR.dialog.exists( 'myAddImage' ) )   
  32.         {   
  33.                 //生成调用js的地址 窗体函数   
  34.                 var href = 'http://' + window.location.host + '/editor/myAddImage.js';   
  35.                 CKEDITOR.dialog.add( 'myAddImage', href );   
  36.         }   
  37.         editor.addCommand( 'myImageCmd'new CKEDITOR.dialogCommand( 'myAddImage' ) );   
  38.         editor.ui.addButton( 'AddImage',   
  39.         {   
  40.                 label : '图片',   
  41.                 icon:'images/images.jpg'//增加按钮图标   
  42.                 command : 'myImageCmd'  
  43.         });   
  44.     });   
  45. }   
  46.   
  47. //获取CKEditorFuncNum的值   
  48. function getUrlParam(url)   
  49. {   
  50.   var reParam = new RegExp('(?:[\?&]|&)CKEditorFuncNum=([^&]+)''i') ;   
  51.   var match = url.match(reParam) ;   
  52.     
  53.   return (match && match.length > 1) ? match[1] : '' ;   
  54. }   
  55. /*  
  56.  * iframe的onload  
  57.  * params:  
  58.  *        t   obj iframe  
  59.  *        num int anonymous function number used to pass the url of a file to CKEditor (random number)  
  60.  */  
  61. function iframeLoad(t, num){   
  62.     t.style.display = 'none';   
  63.     var ret = t.contentWindow.document.body.innerHTML;   
  64.     var fchild = t.contentWindow.document.body.firstChild;   
  65.     // fchild.nodeType { 1 => form, 3 => textNode}    
  66.     if (fchild.nodeType == 3) {   
  67.         //我返回的ret是json数据,进行处理   
  68.         var data = eval("("+ret+")");    
  69.         if(data.picurl) {    
  70.             picurl = data.picurl;   
  71.             //触发filebrowser   
  72.             CKEDITOR.tools.callFunction(num, picurl);   
  73.         } else if(data.error) {    
  74.             CKEDITOR.tools.callFunction(num, '''上传失败'+data.error);   
  75.         }      
  76.     }   
  77.     t.style.display = '';   
  78. }  
//外部调用函数
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('(?:[\?&]|&)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

 

Js代码 ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传 ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传
  1. CKEDITOR.dialog.add( 'myAddImage'function( editor )   
  2. {   
  3.     var ADDIMAGE = 1,   
  4.     regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i;   
  5.     return {   
  6.             title : '添加图片',   
  7.             minWidth : 400,   
  8.             minHeight : 200,   
  9.             contents :    
  10.             [   
  11.                 {   
  12.                     id : 'addImage',   
  13.                     label : '添加图片',   
  14.                     title : '添加图片',   
  15.                     filebrowser : 'uploadButton',   
  16.                     elements :   
  17.                     [   
  18.                       {       
  19.                           id : 'txtUrl',   
  20.                           type : 'text',   
  21.                           label : '图片网址',   
  22.                           required: true  
  23.                       },   
  24.                       {   
  25.                             id : 'photo',   
  26.                             type : 'file',   
  27.                             label : '上传图片',   
  28.                             style: 'height:40px',   
  29.                             size : 38   
  30.                       },   
  31.                       {   
  32.                            type : 'fileButton',   
  33.                            id : 'uploadButton',   
  34.                            label : '上传',   
  35.                            filebrowser :   
  36.                            {   
  37.                                 action : 'QuickUpload',   
  38.                                 target : 'addImage:txtUrl'//更新的文本标签   
  39.                            },   
  40.                            onClick: function(){   
  41.                                 var d = this.getDialog();   
  42.                                 var _txtUrl = d.getContentElement('addImage','txtUrl');   
  43.                                 var _photo =  d.getContentElement('addImage','photo');   
  44.                                 var _frameId = _photo._.frameId;   
  45.                                 var _iframe =  CKEDITOR.document.getById(_frameId);   
  46.                                 //给iframe添加onload事件   
  47.                                 _iframe.setAttribute('onload',    
  48.                                         'getAjaxResult(this,'+getUrlParam(_photo.action)+')');   
  49.                            },   
  50.                            'for' : [ 'addImage''photo']   
  51.                       }   
  52.                     ]   
  53.                 }   
  54.            ],   
  55.            onOk : function(){   
  56.                _src = this.getContentElement('addImage''txtUrl').getValue();   
  57.                if (_src.match(regexGetSizeOrEmpty)) {   
  58.                    alert('请输入网址或者上传文件');   
  59.                    return false;   
  60.                }   
  61.                this.imageElement = editor.document.createElement( 'img' );   
  62.                this.imageElement.setAttribute( 'alt''' );   
  63.                this.imageElement.setAttribute( 'src', _src );   
  64.                editor.insertElement( this.imageElement );   
  65.            }   
  66.     };   
  67.  });  
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代码 ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传 ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传
  1. $str = '{"picurl":/l.jpg"}';   
  2. $str = '{"error":-304}';   
  3. echo $str;   
  4. ?>  
 

生成的dialog的样子和editor

 

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

 

  • ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传
  • 大小: 17.4 KB
  • ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传
  • 大小: 12.8 KB
  • editor.zip (330.5 KB)
  • 下载次数: 137

推荐阅读
  • 本文详细介绍了跨站脚本攻击(XSS)的基本概念、工作原理,并通过实际案例演示如何构建XSS漏洞的测试环境,以及探讨了XSS攻击的不同形式和防御策略。 ... [详细]
  • ServletContext接口在Java Web开发中扮演着重要角色,它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext,开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]
  • 本文探讨了如何在JavaScript中动态地引用由PHP生成的变量,特别是在循环中变量名随迭代变化的情况。通过示例代码展示了实现这一功能的具体步骤。 ... [详细]
  • 本文探讨了一个项目中遇到的挑战,即如何通过技术手段解决不同菜单项触发时,跨域IFrame页面的高度自适应问题。通过创建中介页面和利用JavaScript与Cookie机制,实现无缝的用户体验。 ... [详细]
  • 本文介绍了如何通过安装和配置php_uploadprogress扩展来实现文件上传时的进度条显示功能。通过一个简单的示例,详细解释了从安装扩展到编写具体代码的全过程。 ... [详细]
  • 本文探讨了互联网服务提供商(ISP)如何可能篡改或插入用户请求的数据流,并提供了有效的技术手段来防止此类劫持行为,确保网络环境的安全与纯净。 ... [详细]
  • 本文详细介绍超文本标记语言(HTML)的基本概念与语法结构。HTML是构建网页的核心语言,通过标记标签描述页面内容,帮助开发者创建结构化、语义化的Web页面。 ... [详细]
  • 本文详细探讨了JavaScript中的作用域链和闭包机制,解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例,帮助读者更好地理解和掌握这些概念。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • AJAX技术允许网页在不重新加载整个页面的情况下进行异步更新,通过向服务器发送请求并接收JSON格式的数据,实现局部内容的动态刷新。 ... [详细]
  • 探讨在 Vue 框架中遇到的数据更新延迟或失败的问题,并提供解决方案。 ... [详细]
  • 右下角动态通知实现
    本文介绍如何在网页中实现右下角滑动通知的功能,包括前后台代码示例及具体实现步骤。 ... [详细]
author-avatar
没得名儿呀没名字
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有