laravel-admin自定义百度编辑器

电玩女神 2022-03-29 10:21 459阅读 0赞

博主最近在开发一个功能时,需要用到编辑器，因为是使用Laravel-admin系统，但是Laravel-admin自带的编辑器有点不够用(其实是丑，哈哈)，所以决定自定义百度编辑器，下面将为大家分享如何自定义百度编辑器。

** 一、下载ueditor样式文件**

首先我们先去ueditor下载所需的JS、css文件，并保存在项目根目录下的public/vendor下，传送门->[ueditor][]，路径如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70][]

**二、创建自定义编辑器模板文件  **

然后我们在项目根目录下的resources/views下新建一个UEditor.blade.php的模板文件，代码如下：

<div class="form-group {!! !$errors->has($errorKey) ?: 'has-error' !!}">
        <label for="{
       {$id}}" class="col-sm-2 control-label">{
       {$label}}</label>
    <div class="col-sm-8">
        @include('admin::form.error')
        <textarea class="{
       { $class }}" id="{
       {$name}}" name="{
       {$name}}" 
           placeholder="{
       { $placeholder }}" {!! $attributes !!} >
           {
       { old($column, $value) }}
        </textarea>
        @include('admin::form.help-block')
    </div>
    </div>

路径如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70 1][]

**三、创建控件文件**

**      **完成模板文件的创建，我们接下来便开始新建一个控件UEditor.php的文件，代码如下：

<?php
    /**
     * Created by PhpStorm.
     * User: pc001
     * Date: 2018/10/8
     * Time: 16:31
     */
    
    namespace App\Admin\Extensions;
    
    use Encore\Admin\Form\Field;
    
    class UEditor extends Field
    {
        protected static $css = [
        ];
        public static $isJs=false;
        protected static $js = [
            'vendor/ueditor/ueditor.config.js',
            'vendor/ueditor/ueditor.all.js',
        ];
        protected $view = 'UEditor';
        public function render()
        {
            $this->script = <<<EOT
            UE.delEditor('{$this->id}');
                 var  ue = UE.getEditor('{$this->id}');
                 
    EOT;
            return parent::render();
        }
    }

路径如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70 2][]

**      四、配置文件配置**

完成以上操作之后，我们便在跟目录下的app/Admin下的bootstrap.php文件下进行配置，代码如下：

use Encore\Admin\Form;
    use App\Admin\Extensions\UEditor;
    
    Encore\Admin\Form::forget(['map']);
    Form::extend('ueditor', UEditor::class);

**      五、调用自定义控件**

完成以上所有操作，我们便可以在我们的控制器中调用我们的自定义百度编辑器的了，调用如下：

$form->ueditor('rule', '抽奖规则');

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70 3][]

这样我们便完成了自定义编辑器~

更多文章请关注微信公众号

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70 4][]

[ueditor]: https://ueditor.baidu.com/website/onlinedemo.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70]: /images/20220329/8379e5a6561442fc96682b7ece862d96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70 1]: /images/20220329/3a5da4c1de4b475cbe7ae6ccbd4d10e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70 2]: /images/20220329/ef6958367c614a60956d8d34134d224f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70 3]: /images/20220329/184a634104af435788492ef9ab88c719.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70 4]: /images/20220329/4749ab449d7d4261ba517188f505942b.png