laravel-admin引用wangEditor编辑器 使用一:上传图片

2024-01-31 18:58

本文主要是介绍laravel-admin引用wangEditor编辑器 使用一:上传图片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.安装wangEditor

安装

composer require laravel-admin-ext/wang-editor

然后

php artisan vendor:publish --tag=laravel-admin-wangEditor

配置

config/admin.php文件的extensions,加上属于这个扩展的一些配置

    'extensions' => ['wang-editor' => [// 如果要关掉这个扩展,设置为false'enable' => true,// 编辑器的配置'config' => []]]

详见:https://github.com/laravel-admin-extensions/wangEditor

https://www.kancloud.cn/wangfupeng/wangeditor3/335776 使用手册

2.新建组件:app/Admin/Extensions/WangEditor.php 如下:

<?php
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
class WangEditor extends Field
{protected $view = 'admin.wang-editor';protected static $css = ['/vendor/laravel-admin-ext/wang-editor/wangEditor-3.0.10/release/wangEditor.min.css'];protected static $js = ['/vendor/laravel-admin-ext/wang-editor/wangEditor-3.0.10/release/wangEditor.min.js',];public function render(){$name = $this->formatName($this->column);$this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{$this->id}');// 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
//    editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0editor.customConfig.debug = true
editor.customConfig.uploadFileName = 'mypic';
editor.customConfig.uploadImgHeaders = {'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
editor.customConfig.zIndex = 0;
editor.customConfig.uploadImgServer = '/uploadimg'; //这里是图片上传请求接口 路由中已经配好 否则找不到
editor.customConfig.onchange = function (html) {$('input[name=$name]').val(html);
}editor.customConfig.uploadImgHooks = {customInsert: function (insertImg, result, editor) {if (typeof(result.length) != "undefined") {for (var i = 0; i <= result.length - 1; i++) {var j = i;var url = result[i].newFileName;insertImg(url);}toastr.success(result[j]['info']);}switch (result['ResultData']) {case 7:toastr.error("图片过大");break;case 6:toastr.error("最多可以上传1张图片");break;case 5:toastr.error("请选择一个文件");break;case 4:toastr.error("上传失败");break;case 3:toastr.error(result['info']);break;case 2:toastr.error("文件类型不合法");break;case 1:toastr.error(result['info']);break;}}
}editor.create();
EOT;return parent::render();}
}

3.新建视图文件 resources/views/admin/wang-editor.blade.php

如下:

<div class="form-group {!! !$errors->has($label) ?: 'has-error' !!}">
    <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
    <div class="{{$viewClass['field']}}">
        @include('admin::form.error')
        <div id="{{$id}}" style="width: 100%; height: 100%;">
            <p>{!! old($column, $value) !!}</p>
        </div>
        <input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />
    </div>
</div>

4.然后注册进laravel-admin

在app/Admin/bootstrap.php中添加以下代码:

use App\Admin\Extensions\WangEditor;
use Encore\Admin\Form;
Form::extend('wangeditor', WangEditor::class);

5.新建图片上传控制器 作图片上传处理(我的是上传到阿里云)

   public function uploadimg(Request $request){$mypic = $_FILES['mypic'];if (!empty($mypic)) {$ext = strtolower(substr($mypic['type'], strrpos($mypic['type'], '/') + 1));$exts = ['jpg', 'png', 'gif', 'jpeg'];if (!in_array($ext, $exts)) {$response[] = ['ResultData' => 2, 'info' => '文件类型不允许,请上传常规的图片(gif、jpg、jpeg与png)文件'];return $response;}$content = file_get_contents($mypic['tmp_name']);$filename = date('His') . uniqid() . "." . $ext;$env = config('app.env', 'local');$savePath = 'uploads/official/img/' . date("Y/m/d");$file = "/storage/{$savePath}/{$filename}";if ($env !== 'production') {$file = "/storage/$env/{$savePath}/{$filename}";}Storage::cloud()->put($file, $content);//删除本地图片$l = substr(strstr($localPath, "public"), 7);//区分线上还是测试机if ($env == 'production') {$l = '/var/www/zx/storage/app/public/'.$l;} else {$l = '/var/www/html/dev_admin/storage/app/public/'.$l;}if(file_exists($l)){unlink($l);}$filenames = '你的网址' . $file;$response[] = ['ResultData' => 0, 'info' => '上传成功', 'newFileName' => $filenames];return $response;}else{$response[] = ['ResultData' => 5, 'info' => '请选择一个文件'];return $response;}}

6.路由配置

Route::post('/uploadimg', 'UploadsController@uploadimg');

7.管理后台调用:

 public function form(){return FormBuilder::buildFrom(OfficialDevelopments::class, function (Form $form) {$form->wangeditor('content', '内容')->rules('required', ['required' => '必填']);})->get();}

然后就出现下图:

 

这篇关于laravel-admin引用wangEditor编辑器 使用一:上传图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/664742

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取