laravel6+Laravel-admin1.8.11 一对多 hasMany 中集成UEditor富文本编辑器

首先是使用composer安装ueditor扩展

composer require codingyu/ueditor

发布资源

php artisan vendor:publish --provider='Codingyu\LaravelUEditor\UEditorServiceProvider'

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

'extensions' => ['ueditor' => [// 如果要关掉这个扩展，设置为false'enable' => true,// 编辑器的前端配置 参考：http://fex.baidu.com/ueditor/#start-config'config' => ['initialFrameHeight' => 400, // 例如初始化高度],// 'field_type' => '自定义名字']]

在form表单中使用

$form->UEditor('content');

到此，ueditor已经可以在laravel-admin的表单中使用。

但是！！！

当我们把它用在hasMany中时会发现，富文本编辑器只在第一个表单中显示，继续新增表单时，并不能增加新的富文本编辑器，这是因为UEditor生成富文本编辑器是根据容器的id去生成，但是在hasMany时的id是不变的（前端页面id属性唯一），所以我们需要自己动手改一改，让id属性可以根据新增表单的数量进行变动（我是给id后面加数字实现）。

1、在app\Admin\Extensions下创建新文件Editor.php和UEditor.php文件

Editor.php：


<?phpnamespace App\Admin\Extensions;use Encore\Admin\Form\Field;
use Encore\Admin\Extension;class Editor extends Field
{protected $view = 'admin.ueditor';protected static $js = ['vendor/ueditor/ueditor.config.js','vendor/ueditor/ueditor.all.js',];protected static $css = ['/vendor/ueditor/themes/iframe.css'];public function render(){$name = $this->formatName($this->column);$jsId = \Illuminate\Support\Str::studly(\Illuminate\Support\Str::slug($this->id));$config = Ueditor::config('config', []);$config = json_encode(array_merge($config, $this->options));$laravel_ueditor_route = config('ueditor.route.name');$token = csrf_token();$this->script = <<<EOTwindow.UEDITOR_CONFIG.serverUrl = '{$laravel_ueditor_route}';
var ue_{$jsId} = UE.getEditor('{$this->id}', {$config});
ue_{$jsId}.ready(function() {ue_{$jsId}.execCommand('serverparam', '_token', '$token');
});EOT;return parent::render();}}

静态资源JS和CSS发布资源后会自动生成

UEditor.php：


<?phpnamespace App\Admin\Extensions;use Encore\Admin\Extension;class Ueditor extends Extension
{public $name = 'ueditor';public $views = __DIR__.'/../resources/views';
}

如果遇到命名空间正确，但是提示UEditor.php不存在的情况，可以执行：

 composer dump-autoload

2、在resources\views\admin下新增ueditor.blade.php视图文件

ueditor.blade.php：


<div class="{{$viewClass['form-group']}} {!! !$errors->has($errorKey) ? '' : 'has-error' !!}"><label for="{{$id}}" class="{{$viewClass['label']}} control-label">{{$label}}</label><div class="{{$viewClass['field']}}">@include('admin::form.error')<textarea class="editor_container" id="{{$id}}" name="{{$name}}">{!! old($column, $value) !!}</textarea>@include('admin::form.help-block')</div>
</div>
<script>
(function ($) {$(function(){// 这里的class名需要注意，我1.8.10版本和1.8.11版本class名从has-many-extras-form变成了has-many-extends-form，导致我后面复用这段代码时无效，谢谢前端小姐姐的敏锐观察！                            $('.has-many-extras-form').each(function(i, form){var idx = i + 1;$(this).find('.editor_container').attr('id', '{{$id}}' + idx);createEdit('{{$id}}' + idx);});});
})(jQuery);function createEdit($id) {UE.delEditor($id);UE.getEditor($id);
}</script>

3、修改app\Admin\bootstrap.php文件，添加以下代码：

use App\Admin\Extensions\Editor;Encore\Admin\Form::extend('multiple_editor', Editor::class);

4、最后在laravel-admin form表单页面使用：

$form->multiple_editor('content', __('内容详情'));

5、完成效果

6、可能遇到的问题：

可能会遇到进入编辑页时富文本加载不出来的情况，需要刷新页面解决，我现在这种情况是偶尔出现。还在找原因，但不影响使用，功能实现了就行（手动滑稽）。

laravel6+Laravel-admin1.8.11 一对多 hasMany 中集成UEditor富文本编辑器相关推荐

wangeditor ajax,laravel 中 wangEditor 富文本编辑器使用指南
在本课程中,老师使用的富文本编辑器是 2.0 的版本,且输入区域使用的 textarea,但是在新的 3.0 版本中(新版本富文本编辑器只需要引用一个js文件即可),开发者不建议使用 textarea ...
11. Django 引入富文本编辑器KindEditor
打开微信扫一扫,关注微信公众号[数据与算法联盟] 转载请注明出处:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Gith ...
富文本框让最大四百像素_Django2.0.4 结合 KindEditor 4.1.11 富文本编辑器
{# 加载静态文件 #} {% load static %} 首页 {# 载入js库 #} 富文本查看 initKindEditor(); function initKindEditor() { v ...
Laravel结合wangEditor3富文本编辑器实现文章发布、多图片上传
写在前面 ①定义路由 Route::post('article/image/upload', 'ArticleController@imageUpload'); ②修改配置文件config/files ...
ueditor集成实例php,Laravel框架集成UEditor编辑器的方法图文与实例详解
本文实例讲述了Laravel框架集成UEditor编辑器的方法.分享给大家供大家参考,具体如下: 一. 背景在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 ...
laravel基础课程---11、lavarel的ajax操作（ajax优劣势是什么）
laravel基础课程---11.lavarel的ajax操作(ajax优劣势是什么) 一.总结一句话总结: 优势:用户友好度:异步通信,不会频繁刷新页面,用户友好度比较高优势:减轻数据库压力缺 ...
静电场与电流场_2021高考复习：静电场考点突破微专题11 带电粒子在交变电场中的运动 9.26...
静电场考点突破微专题11 带电粒子在交变电场中的运动一.知能掌握 1．常见的交变电场常见的产生交变电场的电压波形有方形波.锯齿波.正弦波等． 2．常见的题目类型 (1)粒子做单向直线运动(一般用 ...
laravel mysql rand_laravel如何从mysql数据库中随机抽取n条数据（高性能） - Laravel学习网...
laravel如何高性能地从mysql数据库中随机获取n条数据,有时候我们常常会需要从数据库随机获取数据,比如:给工作人员随机分配10个订单,随机从数据库中随机抽查100个用户:这样我们就需要随机从数 ...
Java 11：String类中的新方法
Java 11:String类中的新方法 Java 11没有很多特定于语言的功能.因此,令人惊讶的是,在Java String Class中引入了6种新方法. Java 11 String类新方法让 ...

laravel6+Laravel-admin1.8.11 一对多 hasMany 中集成UEditor富文本编辑器

但是！！！

laravel6+Laravel-admin1.8.11 一对多 hasMany 中集成UEditor富文本编辑器相关推荐

最新文章

热门文章