去评论
dz插件网

ckeditor4.x添加插件 - 上传剪切板中的图片 - 非网上流传[iz7z8.net开发] - 亲测可用

xiao9469
2023/04/21 17:30:35
由于经常写博客，而且还要上传一些图片，特别是截图的图片要先保存到电脑上，然后再上传到服务器，太麻烦。为了提高生产力，就写了“粘贴剪切板中的图片”。
我们先来理一下思路：
第1步、先用截图工具截图
第2步、JS读取剪切板中的图片，并使用base64格式显示图片
第3步、JS将base64图片POST到PHP上，保存，并返回图片在服务器上的地址。

好，开始：
第1步：修改ckeditor4的配置文件，config.js，使之加载我们写好的插件：
  1. var extraPlugins    = config.extraPlugins;
  2.     config.extraPlugins = extraPlugins  + ',imagepaste';//imagepaste粘贴剪切板插件
  4.     config.allowedContent = true;
  5.     config.fullPage = true;
  7.     config.imagepasteUrl   = '/admin.php/admin/misc/imagepaste';
第2步：在ckeditor/plugins/目录创建目录imagepaste，在目录 ckeditor/plugins/imagepaste/下创建文件plugin.js：内容如下：
  1. CKEDITOR.plugins.add( 'imagepaste',
  2. {
  3.     init : function( editor )
  4.     {
  5.         function uploadbase64( base64body ) {
  6.             var imageUrl = '';
  7.             var url  = editor.config.imagepasteUrl;
  8.             url  = url + (url.indexOf("?") == -1  ? "?" : "&");
  9.             url += 'CKEditor=' + editor.name + '&CKEditorFuncNum=2&langCode=' + editor.langCode;
  11.             jQuery.ajax({
  12.                 url  : url,
  13.                 data : {'base64img':'imagepaste', 'data':base64body},
  14.                 type : 'POST',
  15.                 async : false,
  16.                 dataType : 'json',
  17.                 cache : false,
  18.                 success : function(ret){
  19.                     imageUrl = ret['data'];
  20.                 }
  21.             });
  22.             return imageUrl;
  23.         }
  25.         var fckid = editor['name'];
  26.         // Paste from clipboard:
  27.         CKEDITOR.instances[fckid].on('instanceReady', function(e) {
  28.             this.document.on("paste", function(e) {
  29.                 var items = e.data.$.clipboardData.items;
  30.                 for(var i = 0; i < items.length; ++i) {
  31.                     var item = items[i];
  32.                     if(item.kind == 'file' && item.type == 'image/png') {
  33.                         var imgFile = item.getAsFile();
  34.                         if(!imgFile) {
  35.                             return true;
  36.                         }
  37.                         var reader = new FileReader();
  38.                         reader.readAsDataURL(imgFile);
  39.                         reader.onload = function(e) {
  40.                             //显示文件
  41.                             //CKEDITOR.instances[fckid].insertHtml('<img alt="" src="' + this.result + '" />');//显示base64图片
  42.                             var src = uploadbase64(this.result);
  43.                             CKEDITOR.instances[fckid].insertHtml('<img alt="" src="' + src + '" />');//替换base64图片为服务器地址
  44.                         }
  45.                         return false;
  46.                     }
  47.                 }
  48.             });
  49.         });
  50.          return true;
  51.     }
  52. }
  53. );
第3步：上传base64图片：config.imagepasteUrl   = '/admin.php/admin/misc/imagepaste';  注意，这里的地址可以根据你的需求自定义，未必要和我的地址一样。
  1. public function imagepaste()
  2.     {
  3.         $from_type  = input('base64img');
  4.         $from_type  = $from_type ?:  'imagepaste';//这里的$from_type用于标示是哪里来的base64图片，你也可以设置此值为空
  5.         $base64_img = input('data');
  6.         preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result);
  8.         if(empty($result[2])){
  9.             ajaxOut(400, '文件错误');
  10.         }
  12.         $type = $result[2];
  14.         if(!in_array($type, array('pjpeg','jpeg','jpg','gif','bmp','png'))){
  15.             ajaxOut(400, '图片上传类型错误');
  16.         }
  18.         $filename = $from_type . '_'. date('Y-m-d_H-i-s', time()) . '_' . mt_rand(0,1000) . '.' . $type;
  19.         $file_dir = config('upload_path') . DS . 'images/' . date('Ymd') . '/';
  20.         if(!is_dir($file_dir)){
  21.             mkdir($file_dir, 0755, true);
  22.         }
  23.         $absolute_path = $file_dir . $filename;
  24.         $image_body    = str_replace($result[1], '', $base64_img);
  25.         if(file_put_contents($absolute_path, base64_decode($image_body))){
  26.             $img_ret      = str_ireplace(config('upload_path') . DS , '', $absolute_path);
  27.             $img_ret      = '/uploads/' . $img_ret;
  28.             ajaxOut(200, $img_ret);
  29.         }else{
  30.             ajaxOut(400, '图片上传失败');
  31.         }
  33.     }
第4步：大功告成。

请右键查看图片名称。
进入原文参与互动