laravel admin ueditor 第二次加载问题多个加载问题

2019-02-27 12:06:46 Laravel

先上代码

这是自定义的uEditor组件那个类

<?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();
    }
}

这是前端模板文件

<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>

说说原因

很多博客里写的是

UE.delEditor("{$this->id}");
        // 默认id是ueditor
        var ue = UE.getEditor('{$this->id}', {
                ...

或者

UE.delEditor("ueditor");
        // 默认id是ueditor
        var ue = UE.getEditor("ueditor", {
                ...

如果是一个的话这两种其实没啥问题，但如果超过一个就出问题了，因为组件默认id是'ueditor', 前端用同一个id就导致了后面的无法加载而我的解决思路是给他们不同的id。那什么不同呢？当然是column不同了！我们知道，在使用语法$form->input('colum','label')这类语法的时候，我们都要设定column，而column是对应数据库的一个字段，数据库一张表不可能有相同的字段名因此，column是不可能重复的。由此，我们将代码写成:

UE.delEditor("{$this->column}");
        // 默认id是ueditor
        var ue = UE.getEditor('{$this->column}', {
                ...

相应的，view文件设置的id也要是$this->column, 即

id="{{$column}}"

可喜可贺，可口可乐，完。

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

laravel admin ueditor 第二次加载问题多个加载问题

先上代码

这是自定义的uEditor组件那个类

这是前端模板文件

说说原因

可喜可贺，可口可乐，完。

猜你喜欢

评论

Bug行者 - 5 years ago

Vien - 5 years ago

未登录

标签

laravel admin ueditor 第二次加载问题 多个加载问题

先上代码

这是自定义的uEditor组件那个类

这是前端模板文件

说说原因

可喜可贺，可口可乐，完。

猜你喜欢

评论

Bug行者 - 5 years ago

Vien - 5 years ago

未登录

标签

laravel admin ueditor 第二次加载问题多个加载问题