simditor 上传图片 php,Laravel-admin 集成 simditor
laravel5.5
laravel-admin 1.5.*
simditor 3.0.9
1. 创建Field扩展
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
class Simditor extends Field
{
protected $view = 'admin.simditor';
protected static $css = [
'/packages/simditor-2.3.6/styles/simditor.css',
];
protected static $js = [
'/packages/simditor-2.3.6/scripts/module.js',
'/packages/simditor-2.3.6/scripts/hotkeys.js',
'/packages/simditor-2.3.6/scripts/uploader.js',
'/packages/simditor-2.3.6/scripts/simditor.js',
];
public function render()
{
$name = $this->formatName($this->column);
$token = csrf_token();
$url = route('uploadImg');
$this->script = <<
$(document).ready(function(){
var editor = new Simditor({
textarea: $('#editor'),
toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'],
upload: {
url: '$url',
params: { _token: '$token'},
fileKey: 'upload_file',
connectionCount: 3,
leaveConfirm: '文件上传中,关闭此页面将取消上传。'
},
pasteImage: true,
});
});
EOT;
return parent::render();
}
}
2. 创建对应视图
{{$label}}
@include('admin::form.error')
{{ old($column, $value) }}
3. bootstrap.php中注册扩展
use App\Admin\Extensions\Simditor;
use Encore\Admin\Form;
Encore\Admin\Form::forget(['map', 'editor']);
Form::extend('seditor', Simditor::class);
4. 调用simditor
$form->seditor('body', '文章内容');
安装Intervention/image扩展包
composer require intervention/image
获取配置信息
php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"
创建工具类app/Handlers/ImageUploadHandler.php
namespace App\Handlers;
use Image;
class ImageUploadHandler
{
protected $allowed_ext = ["png", "jpg", "gif", 'jpeg'];
public function save($file, $folder, $file_prefix, $max_width = false)
{
// 构建存储的文件夹规则,值如:uploads/images/avatars/201709/21/
// 文件夹切割能让查找效率更高。
$folder_name = "uploads/images/$folder/" . date("Ym/d", time());
// 文件具体存储的物理路径,`public_path()` 获取的是 `public` 文件夹的物理路径。
// 值如:/home/vagrant/Code/larabbs/public/uploads/images/avatars/201709/21/
$upload_path = public_path() . '/' . $folder_name;
// 获取文件的后缀名,因图片从剪贴板里黏贴时后缀名为空,所以此处确保后缀一直存在
$extension = strtolower($file->getClientOriginalExtension()) ?: 'png';
// 拼接文件名,加前缀是为了增加辨析度,前缀可以是相关数据模型的 ID
// 值如:1_1493521050_7BVc9v9ujP.png
$filename = $file_prefix . '_' . time() . '_' . str_random(10) . '.' . $extension;
// 如果上传的不是图片将终止操作
if ( ! in_array($extension, $this->allowed_ext)) {
return false;
}
// 将图片移动到我们的目标存储路径中
$file->move($upload_path, $filename);
// 如果限制了图片宽度,就进行裁剪
if ($max_width && $extension != 'gif') {
// 此类中封装的函数,用于裁剪图片
$this->reduceSize($upload_path . '/' . $filename, $max_width);
}
return [
'path' => config('app.url') . "/$folder_name/$filename"
];
}
public function reduceSize($file_path, $max_width)
{
// 先实例化,传参是文件的磁盘物理路径
$image = Image::make($file_path);
// 进行大小调整的操作
$image->resize($max_width, null, function ($constraint) {
// 设定宽度是 $max_width,高度等比例双方缩放
$constraint->aspectRatio();
// 防止裁图时图片尺寸变大
$constraint->upsize();
});
// 对图片修改后进行保存
$image->save();
}
}
创建上传控制器和相关路由
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Handlers\ImageUploadHandler;
use Auth;
use Log;
class UploadsController extends Controller
{
public function uploadImg(Request $request, ImageUploadHandler $uploader)
// 初始化返回数据,默认是失败的
$data = [
'success' => false,
'msg' => '上传失败!',
'file_path' => ''
];
// 判断是否有上传文件,并赋值给 $file
if ($file = $request->upload_file) {
// 保存图片到本地
$result = $uploader->save($request->upload_file, 'article', \Auth::guard('admin')->user()->id, 600);
// 图片保存成功的话
if ($result) {
$data['file_path'] = $result['path'];
$data['msg'] = "上传成功!";
$data['success'] = true;
}
}
log::info($data);
return $data;
}
}
Route::post('uploadFile', 'UploadsController@uploadImg')->name('uploadImg');
6. 效果
本作品采用《CC 协议》,转载必须注明作者和本文链接
simditor 上传图片 php,Laravel-admin 集成 simditor相关推荐
- vuejs集成simditor
Simditor 是团队协作工具 Tower 使用的富文本编辑器,基于jQuery开发. 下面讲的是集成simditor到vuejs中: simditor官方文档:http://simditor.to ...
- simditor 上传图片php,simditor富文本编辑器最新最简单的使用方法
Simditor这个编辑器就不过多的介绍了,反正我个人感觉挺不错,界面好看并且使用起来也特别简单. 一.Simditor下载 官网链接https://simditor.tower.im/,可以直接下载 ...
- ueditor集成实例php,Laravel框架集成UEditor编辑器的方法图文与实例详解
本文实例讲述了Laravel框架集成UEditor编辑器的方法.分享给大家供大家参考,具体如下: 一. 背景 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 ...
- 最棒的 7 个 Laravel admin 后台管理系统推荐 - 卡拉云
本文完整版:<最棒的 7 个 Laravel admin 后台管理系统推荐> 目录 Laravel admin 后台管理系按类型选择 脚手架型 CRUD 接口型 可视化编程 新一代低代码开 ...
- simditor上传图片php,Simditor图片上传
上篇文章(Simditor使用方法)只是简单的默认配置,我们可自定义工具栏按钮使其更丰富和实现上传图片功能 初始化编辑器 $(function(){ toolbar = [ 'title', 'bol ...
- php simditor 上传图片,关于simditor上传图片的问题
我们可自定义工具栏按钮使simditor实现更丰富和实现上传图片功能 初始化编辑器 $(function(){ toolbar = [ 'title', 'bold', 'italic', 'unde ...
- Simditor 上传图片回显图片src base64 换成 图片链接
Simditor 是一款简介好用的富文本插件 使用过程中发现 添加图片后,后台报错说字段太长,无法存入内容 原因是:Simditor 没有找到上传图片后回显的图片地址,直接获取图片的源文件转成base ...
- simditor上传图片php,使用Simditor和七牛上传图片
Simditor是tower开源的一款网页编辑器官方网址:http://simditor.tower.im 为了使Simditor编辑文档时能将图片自动从前端上传到qn,需要修改它的uploader. ...
- Spring Boot Admin 集成诊断利器 Arthas 实践
作者 | 阿提说说 来源|阿里巴巴云原生公众号 前言 Arthas 是 Alibaba 开源的 Java 诊断工具,具有实时查看系统的运行状况:查看函数调用参数.返回值和异常:在线热更新代码:秒解决类 ...
最新文章
- php excel 转数组函数,使用PHPExcel将数组转换为Excel 2007
- 访问数据库_访问数据库
- 对数函数定义域和值域为r_对数函数
- Python List:合并多个list,listd的合并
- 联想拯救者电竞手机新特性确认:有望搭载双X轴线性马达
- 微服务网关Zuul和Gateway的区别
- Script:收集Exadata诊断信息
- 语音识别api_语音识别 api_免费语音识别api - 云+社区 - 腾讯云
- 百度坐标转换GPS坐标
- 淘淘商城项目mysql,idea搭建淘淘商城项目
- 5G UPF与MEC
- 为什么你的ASO效果不好_ASO优化重要吗
- 车牌识别SDK原理分析
- 2019杭电多校 Snowy Smile hdu6638 (线段树最大子段和)
- 数码科技分享_路由器01————TP-LINK AC1900无线桥接:没用的路由器千万别扔掉,它还可以当你的WiFi放大器
- 【java面对对象】分数类型加减乘除运算的实现
- 百慕大区块链战略不仅仅为了赢得新公司的青睐
- 计算机云盘不见了,为何重装了电脑,百度云盘里的文件不见了.而手机里还有
- 楷体描红字帖练起来@简洁字帖
- 好用的矢量绘图软件:EazyDraw 9 for Mac中文破解版!