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

猜你喜欢


评论

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

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

    Vien Avatar
    Vien - 6 months ago

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

    Bug行者 Avatar
    Bug行者 - 5 months ago

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

    Vien Avatar
    Vien - 5 months ago

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

    Bug行者 Avatar
    Bug行者 - 5 months ago

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

    Vien Avatar
    Vien - 5 months ago

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

未登录

登录后即可发表评论

登录或注册

亲情非友情链接