laravel-admin集成富⽂本编辑器wangEditor教程laravel-admin 集成富⽂本编辑器wangEditor教程
运⾏环境：
系统 win10 ， 环境：集成环境 phpstudy8 WNMP
php: >=7.0.0,
barryvdh/laravel-ide-helper: ^2.4,
doctrine/dbal: ~2.3,
encore/laravel-admin: 1.5.*
laravel/laravel: 5.5.*
wangEditor:3.1.1
准备⼯作
⼀、然后新建组件类
app/Admin/Extensions/WangEditor.php
<?php
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
class WangEditor extends Field
{
//加载的视图地址：resources/views/admin/wang-editor; protected$view='admin.wang-editor';
//加载css,js地址/public/
protected static$css=[
'/vendor/wangEditor-3.1.1/release/wangEditor.min.css', ];
protected static$js=[
'/vendor/wangEditor-3.1.1/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}');
editor.customConfig.uploadFileName = 'mypic[]';
editor.customConfig.uploadImgHeaders = {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
editor.customConfig.zIndex = 0;
editor.customConfig.uploadImgServer = '/uploadFile'; hange = function (html) {
$('input[name=$name]').val(html);
}
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
console.log(result);
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 6:
<("最多可以上传4张图⽚");
break;
case 5:
<("请选择⼀个⽂件");
break;
case 4:
<("上传失败");
break;
case 3:
<(result['info']);
break;
case 2:
<("⽂件类型不合法");
break;
case 1:
<(result['info']);
break;
}
}
}
EOT;
return parent::render();
}
}
⼆、新建视图⽂件
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::')
<div id="{{$id}}" >
<p>{!!old($column,$value)!!}</p>
</div>
<input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}"/>
</div>
</div>
三、然后注册进laravel-admin
在app/Admin/bootstrap.php中添加以下代码：
<?php
use App\Admin\Extensions\WangEditor;
use Encore\Admin\Form;
Form::extend('editor', WangEditor::class);
四、上传图⽚，使⽤集成好的编辑器上传图⽚
由于WangEditor.php配置中没有设置token，上传图⽚会报错，还需要配置⼏个信息1： token，不配置token会报419错误
2： 上传路径，使⽤base64储存会报长度过长错误，所以需要⾃⾏上传到服务器3： ⾃定义上传⽂件创建 appHttpControllersUploadsController.php
4： ⾃定义上传⼤⼩限制，可选
五、创建上传图⽚控制器
appHttpControllersUploadsController.php 代码:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UploadsController extends Controller
{
function uploadImg(Request $request)
{
$file=$request->file("mypic");
//        return response()->json([$file[0]]);
if(!empty($file)){
$len=count($file);
if($len>25){
return response()->json(['ResultData'=>6,'info'=>'最多可以上传25张图⽚']);
}
$m=0;
$k=0;
for($i=0;$i<$len;$i++){
// $n 表⽰第⼏张图⽚
$n=$i+1;
if($file[$i]->isValid()){
if(in_array(strtolower($file[$i]->extension()),['jpeg','jpg','gif','gpeg','png'])){
$picname=$file[$i]->getClientOriginalName();//获取上传原⽂件名
$ext=$file[$i]->getClientOriginalExtension();//获取上传⽂件的后缀名
// 重命名
$filename=time().str_random(6).".".$ext;
$re= Storage::disk('public')->putFile('upload',$file[$i]);
if($re){
$newFileName=config('filesystems.disks.public.url').'/'.$re;
$m=$m+1;
// return response()->json(['ResultData' => 0, 'info' => '上传成功', 'newFileName' => $newFileName ]);
}else{
$k=$k+1;
// return response()->json(['ResultData' => 4, 'info' => '上传失败']);
}
$msg=$m."张图⽚上传成功 ".$k."张图⽚上传失败<br>";
$return[]=['ResultData'=>0,'info'=>$msg,'newFileName'=>$newFileName];
}else{
return response()->json(['ResultData'=>3,'info'=>'第'.$n.'张图⽚后缀名不合法!<br/>'.'只⽀持jpeg/jpg/png/gif格式']);
}
}else{
return response()->json(['ResultData'=>1,'info'=>'第'.$n.'张图⽚超过最⼤限制!<br/>'.'图⽚最⼤⽀持2M']);
}
}
}else{
return response()->json(['ResultData'=>5,'info'=>'请选择⽂件']);
}
return$return;
}
六、路由配置 routesweb.php
Route::post('/uploadFile','UploadsController@uploadImg');
七、访问图⽚地址
public 磁盘适⽤于要公开访问的⽂件。默认情况下， public 磁盘使⽤ local 驱动，并且将这些⽂件存储
在 storage/app/public ⽬录下。为了使它们能通过⽹络访问，你需要创建 public/storage 到 storage/app/public 的符号链接（就是⽣成window的快捷⽅式）。这种⽅式能把可公开访问⽂件都保留在同⼀个⽬录下，以便在使⽤零停机时间部署系统如 Envoyer 的时候，就可以轻松地在不同的部署之间共享这些⽂件。
你可以使⽤ Artisan 命令 storage:link 来创建符号链接：
php artisan storage:link
它会在根⽬录（public⽬录）下⽣成⼀个storage/upload符号链接。你就可以正常访问图⽚了。
⼋、调⽤:asp富文本编辑器
$form->editor('content','内容');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。