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

可喜可贺,可口可乐,完。

vien.tech版权所有,允许转载,但转载请注明出处和原文链接: https://viencoding.com/article/104
欢迎小伙伴们在下方评论区留言 ~ O(∩_∩)O
文章对我有帮助, 点此请博主吃包辣条 ~ O(∩_∩)O

猜你喜欢


评论

  • Bug行者 Avatar
    Bug行者 - 5 months ago

    设置之后还是不行,我的就是有多个编辑器,就地一个生效。。。。求解答

    Vien Avatar
    Vien - 5 months ago

    您可以参考 http://vien.tech/article/103 , 完全按照文章操作,应该就没有问题了

未登录

登录后即可发表评论

登录或注册

亲情非友情链接