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行者 - 10 months ago

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

    Vien Avatar
    Vien - 10 months ago

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

未登录

登录后即可发表评论

登录或注册

标签

AdSense Anaconda Android API apt Auth AWS B-tree Bandwagon Blog bower brew bytes Caffe Catalina cloudcone Composer conda CPU crontab CSS Cuda cv2 datetime Digitalocean DNS Docker Docker-Compose export Flask FTP GET Git GitHub Gmail GoDaddy Google GTM hash Homebrew Homestead HTML http HTTPS IDEA image imagemagick imagick imgick import InnoDB ISO8601 iTerm2 Java JPG Keras Laravel Laravel-Admin lazyload Linux list lnmp load logs Lravel Mac Markdown matplotlib md5 mix Mojave mongo MongoDB MySQL Namesilo Nginx npm numpy Nvidia Nvidia-Docker onevps OpenCV Openpose Outline parse PayPal PHP php-fpm PhpStorm PHP扩展 PIL Pillow pip PNG POST Protobuf PyCharm pyenv pymongo Python Python,人工智能,机器学习,VOC,xml Queue Redis requests save selenium SEO Shadowsock Shadowsocks ShadowsocksR simplemde Spring Boot SQLServer ssd SSH SSL证书 SSR str Sublime sudo swap Tensorflow Terminal Terminator Ubuntu urllib UTC v2ray Valet Validation Validator VienBlog virtualenvs VPN VPS Vultr Web Windows WordPress Xcode zip zmq zsh 下载图片 云主机 云服务器 人工智能 优化 优惠码 伪原创 作弊与反作弊 免费ss账号 免费提现 切片 前端 加密 协议 博客 友链 后台运行 命令 图片操作 图片转换 域名 大小写转换 安卓模拟器 安装 定时任务 定时执行 导出导入 延迟加载 慢查询 懒加载 提现 搜索引擎 搬瓦工 搭梯子 教程 数据库 文件上传 无法登录 日志 时区 时间戳 服务器 机器学习 梯子 港版支付宝 生活服务 科学上网 系统升级 索引 编辑器 自动付款 英文伪原创 计划任务 语法 远程连接 重定向 错误异常 错误提示 队列 阿里云 香港 香港手机号
亲情非友情链接