laravel-admin 富文本编辑器ueditor集成解决第二次加载问题解决多个加载问题

2019-02-27 11:55:01 Laravel

Laravel Laravel-Admin

下载UEditor, 放在public目录下
新建php文件，app/Admin/Extensions/Form/uEditor.php
编辑uEditor.php

<?php
/**
 * Created by PhpStorm.
 * User: vien
 * Date: 2019/2/26
 * Time: 1:00 AM
 */

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("{$this->column}");
        // 默认id是ueditor
        var ue = UE.getEditor('{$this->column}', {
            // 自定义工具栏
            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文件，并写入以下内容：

<div class="form-group {!! !$errors->has($errorKey) ?: 'has-error' !!}">
    <label for="{{$column}}" 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="{{$column}}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!}  class='{{$column}}'>
            {!! old($column, $value) !!}
        </textarea>
        @include('admin::form.help-block')
    </div>
</div>

在app/Admin/bootstrap.php中加入以下内容：

use Encore\Admin\Form;
use App\Admin\Extensions\Form\uEditor; //这两句写在头部use引用位置

Form::extend('ueditor', uEditor::class); //这句写在最后

在form中的使用

$form->ueditor('column', 'label');

欢迎小伙伴们在下方评论区留言 ~ O(∩_∩)O
文章对我有帮助, 点此请博主吃包辣条 ~ O(∩_∩)O

猜你喜欢

Bug行者 - 5 years ago

页面同时引入两个，第二个就是普通文本框了，这是为什么？

Vien - 5 years ago

因为你在网上看的其他版本都是针对一个的，然后id是一样的，所以多个就会出问题，文中用column名作为id，已经解决这个问题了。

Bug行者 - 5 years ago

为什么我的还是不行。。。。改了之后还是那样的呢？

Vien - 5 years ago

有没有尝试全部按照文章操作，代码都复制呢。我感觉还是你哪里没有改对。改了之后强制刷新页面试一下。

Bug行者 - 5 years ago

额、、、全部复制也不行；我用的是点击按钮新增一个富文本编辑器；这样的话会有冲突吗

Vien - 5 years ago

没有这样玩过...很抱歉、没能帮到你