laravel-admin集成ueditor推荐使用laravel-u-editor,它是ueditor的laravel composer版本。基于UEditor 1.4.3.3开发,支持en、zh_CN、zh_TW,并且支持本地和七牛云存储,默认为本地上传 public/uploads

安装

composer require stevenyangecho/laravel-u-editor
然后在config/app.php的providers下增加一行
Stevenyangecho\UEditor\UEditorServiceProvider::class
执行
php artisan vendor:publish

基本配置

1.增加组件文件:app/Admin/Extensions/Form/uEditor.php:<?php
namespace App\Admin\Extensions\Form;
use Encore\Admin\Form\Field;/*** 百度编辑器* Class uEditor* @package App\Admin\Extensions\Form*/
class uEditor extends Field
{// 定义视图protected $view = 'admin.uEditor';// css资源protected static $css = [];// js资源protected static $js = ['laravel-u-editor/ueditor.config.js','laravel-u-editor/ueditor.all.min.js','laravel-u-editor/lang/zh-cn/zh-cn.js'];public function render(){$cs=csrf_token();$this->script = <<<EOT//解决第二次进入加载不出来的问题UE.delEditor("ueditor");// 默认id是ueditorvar ue = UE.getEditor('ueditor'); ue.ready(function () {ue.execCommand('serverparam', '_token', '$cs');});EOT;return parent::render();}
}2. 增加视图文件: resources/views/admin/uEditor.blade.php<div class="form-group {!! !$errors->has($errorKey) ?: 'has-error' !!}"><label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label><div class="col-sm-8">@include('admin::form.error'){{-- 这个style可以限制他的高度,不会随着内容变长 --}}<textarea type='text/plain' style="height:400px;" id='ueditor' id="{{$id}}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!}  class='ueditor'>{!! old($column, $value) !!}</textarea>@include('admin::form.help-block')</div>
</div>3. 然后注册进laravel-admin,在app/Admin/bootstrap.php中添加以下代码:use App\Admin\Extensions\Form\uEditor;
Encore\Admin\Form::extend('ueditor', uEditor::class);4. 调用:
$form->ueditor('content', '内容')->rules('required');

配置七牛服务

打开文件config\UEditorUpload.php配置七牛配置参数// 将下一行注释
//        'mode'=>'local',//上传方式,local 为本地   qiniu 为七牛'mode'=>'qiniu',//上传方式,local 为本地   qiniu 为七牛//七牛配置,若mode='qiniu',以下为必填.'qiniu'=>['accessKey'=>'。。。','secretKey'=>'。。。','bucket'=>'。。。','url'=>'。。。',//七牛分配的CDN域名,注意带上http://]],

修复上传界面中无法管理文件列表的问题

vendor\stevenyangecho\laravel-u-editor\src\ListsQiniu.php
public function getList(){$size = $this->request->get('size', $this->listSize);$start = $this->request->get('start', '');$auth = new Auth(config('UEditorUpload.core.qiniu.accessKey'), config('UEditorUpload.core.qiniu.secretKey'));$bucketManager = new BucketManager($auth);// 注释掉下面的行
//        list($items, $marker, $error) = $bucketManager->listFiles(config('UEditorUpload.core.qiniu.bucket'), $this->path, $start, $size);
// 下面三行是修改的$result1 = $bucketManager->listFiles(config('UEditorUpload.core.qiniu.bucket'), $this->path, $start, $size);$size = count($result1);// 如果不取到items,报找不到key的错误$items = $result1[0]['items'];
// 判断是否错误if ($size > 2) {return ["state" => $error->message(),"list" => array(),"start" => $start,"total" => 0];}if(empty($items)){return ["state" => "no match file","list" => array(),"start" => $start,"total" => 0];}$files=[];
//        dd($items['items']);foreach ($items as  $v) {if (preg_match("/\.(" . $this->allowFiles . ")$/i", $v['key'])) {$files[] = array('url' =>rtrim(config('UEditorUpload.core.qiniu.url'),'/').'/'.$v['key'],'mtime' => $v['mimeType'],);}}if(empty($files)){return ["state" => "no match file","list" => array(),"start" => $start,"total" => 0];}/* 返回数据 */$result = ["state" => "SUCCESS","list" => $files,"start" => $start,"total" => count($files)];return $result;}

laravel-admin集成ueditor编辑器的图片列表显示问题解决方法相关推荐

  1. ueditor集成实例php,Laravel框架集成UEditor编辑器的方法图文与实例详解

    本文实例讲述了Laravel框架集成UEditor编辑器的方法.分享给大家供大家参考,具体如下: 一. 背景 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 ...

  2. PHP百度编辑器使用方法,百度UEditor编辑器使用教程与使用方法

    标签: 我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟 ...

  3. laravel-admin集成ueditor编辑器

    laravel-admin集成UEditor 1.根据说明操作 star很少不止为何 https://github.com/laravel-admin-extensions/UEditor 2.修改配 ...

  4. 帝国cms后台集成ueditor编辑器

    我更换成百度编辑器的原因有以下几点: 1.使用百度编辑器的图片粘贴上传功能,这个功能实在是太有必要了,有开发的过程中或上传的过程中,通常用qq直接截图,直接放到文章上面,避免了再放到本地保存的情况,真 ...

  5. 百度UEditor编辑器使用教程与使用方法

    第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://uedito ...

  6. css图片缝隙问题解决方法

    在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的问题 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的 ...

  7. Spring Boot集成Ueditor富文本编辑器,实现图片上传,视频上传,返回内容功能并且通过OSS转换为链接并且解决Spring Security静态资源访问以及跨域问题

    学习自https://cloud.tencent.com/developer/article/1452451 现在是晚上22点,刚刚和我们的前端交流完了富文本编辑器的一些意见和看法 还是老样子 需求 ...

  8. kind富文本编辑器_在VueJs中集成UEditor 富文本编辑器

    来源 | http://www.mshady.com/archives/378 在vue的项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和 ...

  9. Ueditor编辑器图片上传

    Ueditor编辑器图片上传 UEditor的图片上传采用了Flash上传的方式,在功能上支持批量.本地预览和实时进度提示,在界面上支持自定义背景.上传按钮和预览框等视觉元素的样式属性,基本能够满足各 ...

最新文章

  1. PCB的EMC设计之PCB叠层结构
  2. c语言malloc函数用法_C语言内存模型!小本本记起来啊!
  3. python免费自学爬虫_这套Python爬虫学习教程,不到一天即可新手到进阶!免费领...
  4. nodejs连接mysql报connect ECONNREFUSED错误的解决方法
  5. Windows/Linux中手动添加路由
  6. ReviewForJob——希尔排序(缩小增量排序)之塞奇威克增量序列
  7. 【Java学习】JDBC可以再深一点理解
  8. 演练 base调用父类的方法 c# 1613713591
  9. 用贝叶斯定理解决三门问题并用Python进行模拟(Bayes‘ Rule Monty Hall Problem Simulation Python)
  10. 软件项目管理题外话篇-项目计划与结婚
  11. qt中使用mysql模糊查询_mysql数据库模糊查询简介
  12. 新概念第二册 Lesson 1 句子 结构 分析
  13. 搜狗浏览器 中文显示乱码
  14. 漫步数学分析二十二——魏尔斯特拉斯测试
  15. 证书与签名(一):数字签名是什么
  16. 网址 URL 最后的斜杠 / 是作甚的?
  17. 恒指赵鑫:8.7恒指德指喊单记录与晚盘前瞻
  18. unity PUN PhotonView莫名奇妙viewID冲突
  19. 一文网尽CV/Robotics顶会论文常用高级词汇/句式!
  20. 网站分析-网站分析工具-免费网站分析软件

热门文章

  1. 驰骋工作流程引擎案例-水质检测工作流程设计开发实现过程
  2. Chapter 3、Java语法基础(二)----Java基本数据类型、变量与常量 (20th,Feb)
  3. android Image zImage uImage boot.img分别是什么?个人笔记
  4. 基于loudmouth的XMPP客户端DEMO
  5. Linux下的版本升级只是浮云
  6. “Account is trusted for delegation is not shown || cannot see the Delegation tab
  7. oracle io profile,ORACLE 中 PROFILE的管理
  8. gdb php-fpm,使用 gdb 调试 php-fpm 异常错误
  9. 易想团购 注入 user.php,易想团购系统通杀SQL注入漏洞分析及利用漏洞预警 -电脑资料...
  10. 合并两个对象 java_在Java中合并两个对象列表8