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

2019-02-27 11:55:01   Laravel
  1. 下载UEditor, 放在public目录下
  2. 新建php文件,app/Admin/Extensions/Form/uEditor.php
  3. 编辑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();
    }
}
  1. 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>
  1. 在app/Admin/bootstrap.php中加入以下内容:
use Encore\Admin\Form;
use App\Admin\Extensions\Form\uEditor; //这两句写在头部use引用位置

Form::extend('ueditor', uEditor::class); //这句写在最后
  1. 在form中的使用
$form->ueditor('column', 'label');
viencoding.com版权所有,允许转载,但转载请注明出处和原文链接: https://viencoding.com/article/103
欢迎小伙伴们在下方评论区留言 ~ O(∩_∩)O
文章对我有帮助, 点此请博主吃包辣条 ~ O(∩_∩)O

猜你喜欢


评论

  • Bug行者 Avatar
    Bug行者 - 1 year ago

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

    Vien Avatar
    Vien - 1 year ago

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

    Bug行者 Avatar
    Bug行者 - 1 year ago

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

    Vien Avatar
    Vien - 1 year ago

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

    Bug行者 Avatar
    Bug行者 - 1 year ago

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

    Vien Avatar
    Vien - 1 year ago

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

未登录

登录后即可发表评论

登录或注册

标签

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 ios iPhone ISO8601 iTerm2 Java JPG Keras Laravel Laravel-Admin lazyload Linux list lnmp load logs Lravel Mac Markdown matplotlib md5 mix MobileNet 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 RGB save selenium SEO Shadowsock Shadowsocks ShadowsocksR simplemde Spring Boot SQLServer ssd SSH SSL证书 SSR str Sublime sudo swap Swift Tensorflow Terminal Terminator Ubuntu urllib UTC v2ray Valet Validation Validator VienBlog virtualenvs VPN VPS Vultr Web Windows WordPress Xcode yaml YUV zip zmq zsh 下载图片 云主机 云服务器 人工智能 优化 优惠码 伪原创 作弊与反作弊 免费ss账号 免费提现 切片 前端 加密 协议 博客 友链 双击事件 后台运行 后端 命令 图片操作 图片转换 域名 大小写转换 姿态检测 安卓模拟器 安装 定时任务 定时执行 导出导入 小程序码 延迟加载 微信小程序 慢查询 懒加载 提现 搜索引擎 搬瓦工 搭梯子 教程 数据库 文件上传 无法登录 日志 日期 时区 时间 时间戳 服务器 机器学习 权限 梯子 模拟浏览器 港版支付宝 爬虫 生活服务 科学上网 系统升级 索引 组件开发 编辑器 自动付款 英文伪原创 计划任务 计算机视觉 语法 远程连接 配置文件 重定向 错误异常 错误提示 队列 阿里云 香港 香港手机号
亲情非友情链接