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

杰克工作室

由于经常写博客，而且还要上传一些图片，特别是截图的图片要先保存到电脑上，然后再上传到服务器，太麻烦。为了提高生产力，就写了“粘贴剪切板中的图片”。

我们先来理一下思路：

第1步、先用截图工具截图

第2步、JS读取剪切板中的图片，并使用base64格式显示图片

第3步、JS将base64图片POST到PHP上，保存，并返回图片在服务器上的地址。

 

好，开始：

第1步：修改ckeditor4的配置文件，config.js，使之加载我们写好的插件：

    var extraPlugins    = config.extraPlugins;
    config.extraPlugins = extraPlugins  + ',imagepaste';//imagepaste粘贴剪切板插件

    config.allowedContent = true;
    config.fullPage = true;

    config.imagepasteUrl   = '/admin.php/admin/misc/imagepaste';

第2步：在ckeditor/plugins/目录创建目录imagepaste，在目录 ckeditor/plugins/imagepaste/下创建文件plugin.js：内容如下：

CKEDITOR.plugins.add( 'imagepaste',
{
    init : function( editor )
    {
        function uploadbase64( base64body ) {
            var imageUrl = '';
            var url  = editor.config.imagepasteUrl;
            url  = url + (url.indexOf("?") == -1  ? "?" : "&");
            url += 'CKEditor=' + editor.name + '&CKEditorFuncNum=2&langCode=' + editor.langCode;

            jQuery.ajax({
                url  : url,
                data : {'base64img':'imagepaste', 'data':base64body},
                type : 'POST',
                async : false,
                dataType : 'json',
                cache : false,
                success : function(ret){
                    imageUrl = ret['data'];
                }
            });
            return imageUrl;
        }

        var fckid = editor['name'];
        // Paste from clipboard:
        CKEDITOR.instances[fckid].on('instanceReady', function(e) {
            this.document.on("paste", function(e) {
                var items = e.data.$.clipboardData.items;
                for(var i = 0; i < items.length; ++i) {
                    var item = items[i];
                    if(item.kind == 'file' && item.type == 'image/png') {
                        var imgFile = item.getAsFile();
                        if(!imgFile) {
                            return true;
                        }
                        var reader = new FileReader();
                        reader.readAsDataURL(imgFile);
                        reader.onload = function(e) {
                            //显示文件
                            //CKEDITOR.instances[fckid].insertHtml('<img alt="" src="' + this.result + '" />');//显示base64图片
                            var src = uploadbase64(this.result);
                            CKEDITOR.instances[fckid].insertHtml('<img alt="" src="' + src + '" />');//替换base64图片为服务器地址
                        }
                        return false;
                    }
                }
            });
        });
         return true;
    }
}
);

第3步：上传base64图片：config.imagepasteUrl   = '/admin.php/admin/misc/imagepaste';  注意，这里的地址可以根据你的需求自定义，未必要和我的地址一样。

    public function imagepaste()
    {
        $from_type  = input('base64img');
        $from_type  = $from_type ?:  'imagepaste';//这里的$from_type用于标示是哪里来的base64图片，你也可以设置此值为空
        $base64_img = input('data');
        preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result);

        if(empty($result[2])){
            ajaxOut(400, '文件错误');
        }

        $type = $result[2];

        if(!in_array($type, array('pjpeg','jpeg','jpg','gif','bmp','png'))){
            ajaxOut(400, '图片上传类型错误');
        }

        $filename = $from_type . '_'. date('Y-m-d_H-i-s', time()) . '_' . mt_rand(0,1000) . '.' . $type;
        $file_dir = config('upload_path') . DS . 'images/' . date('Ymd') . '/';
        if(!is_dir($file_dir)){
            mkdir($file_dir, 0755, true);
        }
        $absolute_path = $file_dir . $filename;
        $image_body    = str_replace($result[1], '', $base64_img);
        if(file_put_contents($absolute_path, base64_decode($image_body))){
            $img_ret      = str_ireplace(config('upload_path') . DS , '', $absolute_path);
            $img_ret      = '/uploads/' . $img_ret;
            ajaxOut(200, $img_ret);
        }else{
            ajaxOut(400, '图片上传失败');
        }

    }

第4步：大功告成。

请右键查看图片名称。

杰克工作室

注：发现ckeditor4.19.x已经集成了此功能，所以高版本的ckeditor使用者无须理会此插件。