ckeditor4.x添加插件 - 上传剪切板中的图片 - 非网上流传[iz7z8.net开发] - 亲测可用
<p>由于经常写博客，而且还要上传一些图片，特别是截图的图片要先保存到电脑上，然后再上传到服务器，太麻烦。为了提高生产力，就写了“粘贴剪切板中的图片”。</p><p>我们先来理一下思路：</p>
<p>第1步、先用截图工具截图</p>
<p>第2步、JS读取剪切板中的图片，并使用base64格式显示图片</p>
<p>第3步、JS将base64图片POST到PHP上，保存，并返回图片在服务器上的地址。</p>
<p> </p>
<p>好，开始：</p>
<p>第1步：修改ckeditor4的配置文件，config.js，使之加载我们写好的插件：</p>
<pre>
var extraPlugins = config.extraPlugins;
config.extraPlugins = extraPlugins+ ',imagepaste';//imagepaste粘贴剪切板插件
config.allowedContent = true;
config.fullPage = true;
config.imagepasteUrl = '/admin.php/admin/misc/imagepaste';</pre>
<p>第2步：在ckeditor/plugins/目录创建目录imagepaste，在目录 ckeditor/plugins/imagepaste/下创建文件plugin.js：内容如下：</p>
<pre>
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.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;
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.insertHtml('<img alt="" src="' + this.result + '" />');//显示base64图片
var src = uploadbase64(this.result);
CKEDITOR.instances.insertHtml('<img alt="" src="' + src + '" />');//替换base64图片为服务器地址
}
return false;
}
}
});
});
return true;
}
}
);</pre>
<p>第3步：上传base64图片：config.imagepasteUrl = '/admin.php/admin/misc/imagepaste'; 注意，这里的地址可以根据你的需求自定义，未必要和我的地址一样。</p>
<pre>
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)){
ajaxOut(400, '文件错误');
}
$type = $result;
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, '', $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, '图片上传失败');
}
}</pre>
<p>第4步：大功告成。</p>
<p><img alt="" src="data/attachment/forum/202302/23/2023-02-23_16-35-42_707.png" /></p>
<p>请右键查看图片名称。</p>
注：发现ckeditor4.19.x已经集成了此功能，所以高版本的ckeditor使用者无须理会此插件。
页:
[1]