1. 程式人生 > >laravel-admin整合百度富文字編輯器ueditor

laravel-admin整合百度富文字編輯器ueditor

首先要說的是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@it
1.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');;

最後你就可以看到效果:
image.png