laravel-admin集成百度富文本编辑器ueditor
首先要说的是laravel-admin真的是一个非常适合做管理后台的package。官方文档有集成wangEditor、ckeditor、PHP editor的示例,如果这几个编辑器能满足你的需求可以参照官方文档操作。ueditor是百度开源的一款编辑器,其中它的源代码模式真的是非常实用的,能让你更大限度的定制你的内容。这里再介绍一个package laravel-u-edit...
首先要说的是laravel-admin真的是一个非常适合做管理后台的package。
官方文档有集成wangEditor、ckeditor、PHP editor的示例,如果这几个编辑器能满足你的需求可以参照官方文档操作。
ueditor是百度开源的一款编辑器,其中它的源代码模式真的是非常实用的,能让你更大限度的定制你的内容。
这里再介绍一个package laravel-u-editor 它是ueditor的laravel composer版本。基于UEditor 1.4.3.3开发,支持en、zh_CN、zh_TW,并且支持本地和七牛云存储,默认为本地上传 public/uploads。
composer安装
在composer.json中增加
"stevenyangecho/laravel-u-editor": "~1.4"
然后执行
composer update
然后在config/app.php的providers下增加一行
Stevenyangecho\UEditor\UEditorServiceProvider::class
然后执行
php artisan vendor:publish
增加laravel-admin组件文件、视图文件
增加组件文件:app/Admin/Extensions/Form/uEditor.php:
<?php
/**
* Created by PhpStorm.
* User: zhumingzhen
* Email: z@it1.me
* Date: 2018/5/10
* Time: 22:44
*/
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()
{
$this->script = <<<EOT
//解决第二次进入加载不出来的问题
UE.delEditor("ueditor");
// 默认id是ueditor
var ue = UE.getEditor('ueditor', {
// 自定义工具栏
toolbars: [
['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft', 'justifycenter', 'justifyright', 'link', 'insertimage', 'source', 'fullscreen']
],
elementPathEnabled: false,
enableContextMenu: false,
autoClearEmptyNode: true,
wordCount: false,
imagePopup: false,
autotypeset: {indent: true, imageBlockLine: 'center'}
});
ue.ready(function () {
ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
});
EOT;
return parent::render();
}
}
增加视图文件: resources/views/admin/uEditor.blade.php
{{--
Created by PhpStorm.
User: zhumingzhen
Email: z@it1.me
Date: 2018/5/10
Time: 22:44
--}}
<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>
{{-- 注意:如果你实用script标签有一些奇怪的问题,更换textarea就可以解决了。 --}}
然后注册进laravel-admin,在app/Admin/bootstrap.php中添加以下代码:
use App\Admin\Extensions\Form\uEditor;
use Encore\Admin\Form;
Form::extend('ueditor', uEditor::class);
调用:
$form->ueditor('content', '内容')->rules('required');;
最后你就可以看到效果:
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)