1. 创建image.js

    wKiom1aLNyujJPmKAATQGA4DZtQ309.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
( function  () {
 
     var  imageUploadId =  "imageUploadId_"  +  new  Date().getTime() + parseInt(Math.random() * 1000);  // 生成唯一编号
 
     function  init(editor) {
         return  {
             title: editor.lang.image[ "title" ],
             minWidth: 420,
             minHeight: 360,
             onShow:  function  () {
                 var  selectedImg = editor.getSelectedHtml();
                 var  imgSrc = $(selectedImg[ "$" ].firstChild).attr( "src" );
                 var  imgStyle = $(selectedImg[ "$" ].firstChild).attr( "style" );
                 $( "#"  + imageUploadId +  " img.previewImage" ).attr( "src" , imgSrc);
                 $( "#"  + imageUploadId +  " img.previewImage" ).attr( "style" , imgStyle);
             },
             onOk:  function  () {
                 var  previewImg = $( "#"  + imageUploadId +  " img.previewImage" );
                 var  previewImageSrc = previewImg.attr( "src" );
                 var  previewImageStyle = previewImg.attr( "style" );
                 if  (previewImageSrc ==  null  || previewImageSrc ==  "" ) {
                     return ;
                 }
                 var  image = editor.document.createElement( 'img' );
                 image.setAttribute( "src" , previewImageSrc);
                 image.setAttribute( "style" , previewImageStyle);
                 editor.insertElement(image);
 
             },
             onLoad:  function  () {
 
             },
             onHide:  function  () {
                 $( "#"  + imageUploadId +  " img.previewImage" ).attr( "src" ,  "" );
                 $( "#"  + imageUploadId +  " .width" ).val( "" );
                 $( "#"  + imageUploadId +  " .height" ).val( "" );
                 $( "#"  + imageUploadId +  " img.previewImage" ).css( "width" ,  "inherit" );
                 $( "#"  + imageUploadId +  " img.previewImage" ).css( "height" ,  "inherit" );
             },
             contents: [
                 {
                     id:  "info" ,
                     label: editor.lang.image.infoTab,
                     accessKey:  "I" ,
                     elements: [{
                         type:  "html" ,
                         html:  "<div style='margin-bottom:20px' id='"  + imageUploadId +  "' >"  +
                                   "<div style='padding-bottom:20px;'>"  +
                                       "<a class='uploadFile cke_dialog_ui_button cke_dialog_ui_button_ok' style='cursor: pointer;'>上传文件</a>"  +
                                       "<label style='margin-left:20px;'>宽度</label><input class='width cke_dialog_ui_input_text' style='width:120px;' type='text'/>px"  +
                                       "<label style='margin-left:20px;'>高度</label><input class='height cke_dialog_ui_input_text' style='width:120px;' type='text'/>px"  +
                                   "</div>"  +
                                   "<img class='previewImage'/>"  +
                               "</div>"
                     }]
                 }]
         }
     };
     CKEDITOR.dialog.add( "image" ,  function  (editor) {
         return  init(editor)
     });
 
 
     // 注册事件
     $( "#"  + imageUploadId +  " .uploadFile" ).ysSimpleUploadFile({
         changeCallback:  function  (file) {
             var  fileReader =  new  FileReader();
             fileReader.onload =  function  () {
                 $( "#"  + imageUploadId +  " img.previewImage" ).attr( "src" ,  this .result);
             };
             fileReader.readAsDataURL(file);
         }
     });
 
     $(document).on( "keyup" ,  "#"  + imageUploadId +  " .width" ,  function  (e) {
         e.stopPropagation();
         e.preventDefault();
         var  val = $( this ).val();
         if  (isNaN(parseInt(val))) {
             return ;
         }
         $( "#"  + imageUploadId +  " img.previewImage" ).css( "width" , val);
     });
 
     $(document).on( "keyup" ,  "#"  + imageUploadId +  " .height" ,  function  (e) {
         e.stopPropagation();
         e.preventDefault();
         var  val = $( this ).val();
         if  (isNaN(parseInt(val))) {
             return ;
         }
         $( "#"  + imageUploadId +  " img.previewImage" ).css( "height" , val);
     });
 
 
})();

2. 创建 ys_simple_file_upload.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
( function ($){
 
     var  defaultSettings = {
         acceptTypes:[ "jpg" , "png" ],  // 接受的上传文件类型
         changeCallback: function (file){
 
         }  // 自定义input[type=file] change事件
     };
 
     var  renderHtml =  "<input type='file' style='display:none;'/>" ;
 
     // 添加隐藏的
     function  renderInputFile(target,settings){
         // 生成dialog唯一标识
         var  id =  "ys_simple_file_upload_" + new  Date().getTime()+ "" +parseInt(Math.random());
         $(target).attr( "ys_simple_file_upload" ,id);
         $(renderHtml).attr( "id" ,id).appendTo( "html" );  // 添加到文档中去
         return  $( "#" +id);
     }
 
     function  bindEventHandlers(container,settings){
         var  changeCallback = settings.changeCallback;
 
         $(container).change( function (e){
             e.preventDefault();
             e.stopPropagation();
             var  file = e.target.files[0];
 
             if (file== null ){
                 return ;
             }
 
             if (!validateFileType(file,settings)){
                 alert( "文件类型不正确!" );
                 return ;
             }
 
             changeCallback(file);
 
             // 清除value
             $( this ).val( "" );
         });
     }
 
     // 验证文件类型
     function  validateFileType(file,settings){
         var  acceptTypes = settings.acceptTypes;
         var  name = file.name;
         var  fileSuffix = name.substr(name.lastIndexOf( "." )+1);
         for ( var  i=0;i<acceptTypes.length;i++){
             var  acceptType = acceptTypes[i];
             if (acceptType==fileSuffix){
                 return  true ;
             }
         }
         return  false ;
     }
 
     var  options = {
         ysSimpleUploadFile: function (settings) {
             var  mergedSettings = {};
             $.extend(mergedSettings,defaultSettings,settings);
 
             var  container = renderInputFile( this ,mergedSettings);
 
             bindEventHandlers(container,mergedSettings);
             $(document).on( "click" ,$( this )[ "selector" ], function (e){
                 e.preventDefault();
                 e.stopPropagation();
                 $(container).click();
             });
             //$(this).click(function(e){
             //    e.preventDefault();
             //    e.stopPropagation();
             //    $(container).click();
             //});
         }
     };
     $.fn.extend(options);
})(jQuery);

3. editor.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
< head >
     < meta  charset = "utf-8" >
     < meta  http-equiv = "X-UA-Compatible"  content = "IE=edge,chrome=1" >
     < title ></ title >
< body >
< textarea  id = "editor" ></ textarea >
 
< script  src = "../static/dist/js/jquery-1.11.3.min.js" ></ script >
< script  src = "../static/dist/js/ckeditor.js" ></ script >
< script  src = "../static/js/ys_ui_plugin/ys_simple_file_upload.js" ></ script >
< script  src = "../static/dist/js/plugins/imageupload/dialogs/image.js" ></ script >
 
< script >
     CKEDITOR.replace( 'editor');
</ script >
 
</ body >
</ html >

4. 效果

wKioL1aLOZCgu1mUAAqI8KsUQiM302.png