laravel-admin 使用 wangEditor 的一些小方法

在我们使用 laravel-admin 作为系统管理后台的时候经常会用到 editor 作为编辑器来给我们编辑内容，但是在 laravel-admin 的官网上只介绍了怎么下载使用，其中有一个问题就是上传图片的问题，我们需要开发一个上传图片的接口。

基本的下载安装去看 laravel-admin 官网，下面我来贴一下代码

先来新建一个 ImageUploadHandler.php 来作为处理传入的图片：

<?phpnamespace App\Handlers;class ImageUploadHandler
{// 只允许以下后缀名的图片文件上传protected $allowed_ext = ["png", "jpg", "gif", 'jpeg'];public function save($file, $folder, $file_prefix){// 构建存储的文件夹规则，值如：uploads/images/avatars/201709/21/// 文件夹切割能让查找效率更高。$folder_name = "uploads/$folder/" . date("Ym", time()) . '/'.date("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);return ['path' => config('app.url') . "/$folder_name/$filename"];}
}

然后新建 UploadController 接口：

<?phpnamespace App\Admin\Controllers;use App\Http\Controllers\Controller;
use App\Handlers\ImageUploadHandler;
use Illuminate\Http\Request;class UploadController extends Controller
{public function upImage(Request $request, ImageUploadHandler $uploader){// 初始化返回数据，默认是失败的$data = ['errno'   => 1,];// 判断是否有上传文件，并赋值给 $fileif ($file = $request->upload_file) {// 保存图片到本地$result = $uploader->save($request->upload_file, 'admin', 1, 1024);// 图片保存成功的话if ($result) {$data['data'][] = $result['path'];$data['errno']   = 0;}}return $data;}
}

然后我们还需要修改一个 wangEditor.php 的代码：

<?phpnamespace App\Admin\Extensions;use Encore\Admin\Form\Field;class WangEditor extends Field
{protected $view = 'admin.wang-editor';protected static $css = ['/vendor/wangEditor-3.0.9/release/wangEditor.min.css',];protected static $js = ['/vendor/wangEditor-3.0.9/release/wangEditor.min.js',];public function render(){$name = $this->formatName($this->column);$token = csrf_token();$this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.zIndex = 0;
editor.customConfig.debug = true;
editor.customConfig.pasteFilterStyle = true
editor.customConfig.uploadImgServer = '/admin/up_image';
editor.customConfig.uploadFileName = "upload_file";
editor.customConfig.uploadImgParams = {_token: '{$token}'
}editor.customConfig.onchange = function (html) {$('input[name=$name]').val(html);
}
editor.create()EOT;return parent::render();}
}

最后在路由中新加一个路由就行了。

laravel-admin 使用 wangEditor 的一些小方法相关推荐

php 多图上传编辑器,laravel中使用WangEditor及多图上传
1. 创建项目及安装所需安装包 1.1 创建项目 composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist 1 ...
最棒的 7 个 Laravel admin 后台管理系统推荐 - 卡拉云
本文完整版:<最棒的 7 个 Laravel admin 后台管理系统推荐> 目录 Laravel admin 后台管理系按类型选择脚手架型 CRUD 接口型可视化编程新一代低代码开 ...
Laravel中encrypt与decrypt的实现方法详解
这篇文章主要给大家介绍了关于Laravel中encrypt和decrypt的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习 ...
一个java删除文件夹的小方法
java删除文件夹都是从里向外删除,使用递归的方法. public class IO_FILEdemo09 {public static void main(String[] args) {// TO ...
测试网站访问速度的几个小方法
1:用Ping命令简单测网站速度的方法 Ping可以用来检查网络是否通畅或者网络连接速度,点击开始→运行在运行中输入"cmd"回车或点击确定,输入ping www.你的网址.co ...
python方法测试_python 测试常用小方法
python 测试常用的小方法 def xia_to_tuo(src: str, firstUpper: bool = False): """ 将下划线分隔的名字,转换为 ...
盘点上班族和大学生都适用的8个赚外快的小方法总有一个适合你
每天不论是工作还是学习,都会有很多空闲时间,那么怎么使这些时间变成金钱呢?今天给大家推荐几个赚外快的小方法其实每一个操作的门槛都不高,关键是看个人的执行力了.最忌讳的就是大钱赚不到,小钱看不上.在执行 ...
11个提升编程能力的小方法
编程是当今社会最为实用的技能之一.从能够创造一个公司网站到知道怎么修复一个重定向错误,这些技能带来的价值,不管是对雇主还是对程序员自身,都是无法估量的. 但是,保持你当前的状态,停滞不前,那你永远无法 ...
app store 服务器维护,AppStore无法连接怎么办？几个小方法教你解决问题
原标题:AppStore无法连接怎么办?几个小方法教你解决问题苹果用户都知道,AppStore我们下载应用的地方,无论是自带软件还是第三方软件都能在这里找到.但是有时候我们会遇上AppStore无法 ...

laravel-admin 使用 wangEditor 的一些小方法

laravel-admin 使用 wangEditor 的一些小方法相关推荐

最新文章

热门文章