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

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

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

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


    1.index.html调用页面

    Index.html代码 复制代码 收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    2. <html xmlns="http://www.w3.org/1999/xhtml">   
    3. <head>   
    4.     <title>Using API to customize dialogs - CKEditor Sample</title>   
    5.     <meta content="text/html; charset=utf-8" http-equiv="content-type" />   
    6.     <script type="text/javascript" src="./ckeditor.js"></script>   
    7.     <script type="text/javascript" src="./mydialog.js"></script>   
    8. </head>   
    9. <body>   
    10.     <h1>   
    11.         CKEditor Sample   
    12.     </h1>   
    13.     <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>   
    14.     <script type="text/javascript">   
    15.             //调用封装的函数   
    16.             makeEditor('editor1');   
    17.     </script>   
    18. </body>   
    19. </html>  
     

    2. mydialog.js

    Js代码 复制代码 收藏代码
    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('(?:[\?&]|&amp;)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. }  
     

    3. myAddImage.js

    Js代码 复制代码 收藏代码
    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.  });  
     

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

    Php代码 复制代码 收藏代码
    1. <?php   
    2. $str = '{"picurl":/l.jpg"}';   
    3. $str = '{"error":-304}';   
    4. echo $str;   
    5. ?>  
     

    生成的dialog的样子和editor

     

     

    • 大小: 17.4 KB
    • 大小: 12.8 KB
  • 相关阅读:
    WC2021 游记
    TC11054
    P5904
    CF741D
    CF1467 题解
    [CTSC2008]网络管理 [树剖+整体二分]
    [HNOI2015]接水果[整体二分]
    [SDOI2010]粟粟的书架 [主席树]
    整体二分的一些见解[整体二分学习笔记]
    P2710 数列[fhq treap]
  • 原文地址：https://www.cnblogs.com/hannover/p/2121545.html
Copyright © 2020-2023  润新知