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

xiao9469 · 发表于 2023-4-21 17:30:35

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

由于经常写博客，而且还要上传一些图片，特别是截图的图片要先保存到电脑上，然后再上传到服务器，太麻烦。为了提高生产力，就写了“粘贴剪切板中的图片”。
我们先来理一下思路：
第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.x添加插件 - 上传剪切板中的图片 - 非网上流传[iz7z8.net开发] - 亲测可用添加,插件,上传,剪切板,图片

请右键查看图片名称。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

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

马上注册，免费下载更多dz插件网资源。

相关帖子

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com