Dcat Admin 将 tinyMCE 替换为 wangEditor5

dcat admin 自带的富文本编辑器 tinyMCE 体验一般，替换为国产的 wangEditor 编辑器，官方有给出替换方案，但示例代码是 wangEditor4：wangEditor4 集成方案 的，这里给出最新 wangEditor5 的集成方案。

将以下三个文件保存到本地：/public/vendor/dcat-admin/wangEditor-5.1.23

https://unpkg.com/@wangeditor/editor@latest/dist/index.js
https://unpkg.com/@wangeditor/editor@latest/dist/index.js.map
https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css

创建/修改以下 3 个文件
resources/views/admin/wang-editor-5.blade.php
app/Admin/Extensions/Form/WangEditor.php
app/Admin/bootstrap.php

1. resources/views/admin/wang-editor-5.blade.php

   <div class="{{$viewClass['form-group']}} form-editor">
   
    <label class="{{$viewClass['label']}} control-label">{{$label}}</label>
   
    <div class="{{$viewClass['field']}}">
   
        @include('admin::form.error')
   
        <div {!! $attributes !!} style="z-index: 999999; border: 1px solid #dbe3e6">
            <div id="toolbar-container" style="border-bottom: 1px solid #dbe3e6;"></div>
            <div id="editor-container" style="min-height: {!! $options['min_height'] !!}px;"></div>
        </div>
   
        <label>
            <textarea style="display: none" name="{{$name}}">{{ old($column, $value) }}</textarea>
        </label>
   
        @include('admin::form.help-block')
   
    </div>
   </div>
   <!-- script标签加上 "init" 属性后会自动使用 Dcat.init() 方法动态监听元素生成 -->
   <script require="@wang-editor" init="{!! $selector !!}">
    // 解决页面存在多个富文本问题
    $('#toolbar-container').attr('id', 'toolbar-container' + id);
    $('#editor-container').attr('id', 'editor-container' + id);
    const {createEditor, createToolbar} = window.wangEditor
    const editorConfig = {MENU_CONF: {}};
    editorConfig.placeholder = '{!! $placeholder !!}';
    editorConfig.readOnly = '{!! $options['readonly'] !!}' || false;
    editorConfig.maxLength = parseInt('{!! $options['max_length'] !!}')
    editorConfig.MENU_CONF['uploadImage'] = {
        server: '{!! $options['images_upload_url'] !!}',
        maxFileSize: parseInt('{!! $options['max_file_size'] !!}'),
        fieldName: 'file',
        customInsert(res, insertFn) {
            insertFn(res.location, '', res.location)
        },
        onBeforeUpload(file) {// 上传之前触发
            return file
        },
        onProgress(progress) {// 上传进度的回调函数
            console.log('progress', progress)// progress 是 0-100 的数字
        },
        onSuccess(file, res) {// 单个文件上传成功之后
            console.log(`${file.name} 上传成功`, res)
        },
        onFailed(file, res) {// 单个文件上传失败
            console.log(`${file.name} 上传失败`, res)
        },
        onError(file, err, res) {
            console.error('上传图片失败', err)
            alert('上传图片失败：' + err.message)
        }
    }
    editorConfig.onChange = (editor) => {
        const html = editor.getHtml()
        let FormEditor = $('.form-editor');
        FormEditor.find('textarea[name="{{ $name }}"]').val(html);
    }
    let html = $('.form-editor').find('textarea[name="{{ $name }}"]').val();
    const editor = createEditor({
        selector: '#editor-container' + id,
        html: html,
        config: editorConfig,
        mode: 'simple'
    })
    const toolbarConfig = {excludeKeys: ["group-video", "emotion"]};
    const toolbar = createToolbar({
        editor,
        config: toolbarConfig,
        selector: '#toolbar-container' + id,
        mode: 'default'
    })
   </script>

2. app/Admin/Extensions/Form/WangEditor.php 扩展了2个配置项方法

   <?php
   
   namespace App\Admin\Extensions\Form;
   
   use Dcat\Admin\Form\Field\Editor;
   
   /**
    * @see https://www.wangeditor.com/v5/editor-config.html
    * @see https://www.wangeditor.com/v5/API.html#%E5%9B%BE%E7%89%87
    */
   class WangEditor extends Editor
   {
    protected $view = 'admin.wang-editor-5';
    
    protected $imageUploadDirectory = 'uploads/images';
    
    protected $disk = 'public';
    
    /**
     * @var array
     * @see formatOptions 动态增加 readonly / images_upload_url 等基础通用配置项
     */
    protected $options = [
        'min_height'    => 400,            //400px
        'max_file_size' => 1024 * 1024 * 2,//2MB
        'max_length'    => 0,              //无限制
    ];
    
    /**
     * 文件上传最大字节数
     *
     * @param  int  $max_file_size  最大上传KB字节数
     *
     * @return \App\Admin\Extensions\Form\WangEditor
     */
    public function maxFileSize(int $max_file_size): WangEditor
    {
        return $this->mergeOptions([
            'max_file_size' => $max_file_size * 1024,
        ]);
    }
    
    /**
     * 输入最大长度
     *
     * @param  int  $max_length
     *
     * @return \App\Admin\Extensions\Form\WangEditor
     */
    public function maxLength(int $max_length): WangEditor
    {
        return $this->mergeOptions([
            'max_length' => $max_length,
        ]);
    }
   }

3. app/Admin/bootstrap.php

   Admin::asset()->alias('@wang-editor', [
    'js' => ['/vendor/dcat-admin/wangEditor-5.1.23/index.min.js'],
    'css' => ['/vendor/dcat-admin/wangEditor-5.1.23/style.min.css'],
   ]);
   
   // 替换系统自带的编辑器组件
   Form::extend('editor', WangEditor::class);

调用即可

/** @var \App\Admin\Extensions\Form\WangEditor $wangEditor */
$wangEditor = $form->editor('richtext', 'RichText')->disk('local');
$wangEditor->maxLength(100)->maxFileSize(2 * 1024);

注意：这里 WangEditor 继承的是 Editor，网上有不少教程都是去继承 Field，Editor 类虽然是对 tinyMCE 的封装，但继承后改写 $view 可以替换为自己的编辑器视图渲染。更重要，Editor 内封装了 disk, $imageUploadDirectory, 编辑器相关配置项的视图变量 $options，其中的 images_upload_url 可以作为 wangEditor 的图片上传接口，我看到还有自己额外实现了一套上传接口的😂。