Dcat Admin 2 integrated rich text editor wangEditor 5

Since I don't like the default TinyMCE personally, I replaced it with the domestic rich text editor wangEditor

Dcat Admin document example: integrated rich text editor wangEditor

But the official example is written for wangEditor 4, here only points out the difference to version 5

get file

Save the following three files locally:

If you need to save server resources in China and choose CDN, you can refer to the following two:

Create view file

Write WangEditorthe class according to the Dcat Admin documentation and inherit from\Dcat\Admin\Form\Field

resources/viewsUnder , create a path of your liking and create wang-editor.blade.phpa file, for example:resources/views/admin/editor/wang-editor.blade.php

Modify WangEditorthe member variables of the classview

<?php

namespace App\Admin\Extensions\Form;

use Dcat\Admin\Form\Field;

class WangEditor extends Field {
    
    

    protected $view = 'admin.editor.wang-editor';
}

Write wang-editor.blade.php, the content is as follows:

<style>
    #wang-editor—wrapper {
      
      
        border: 1px solid #e1e8ea;
        border-radius: .25rem;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    }
</style>

<div class="{
     
     { $viewClass['form-group'] }}">

    <label class="{
     
     { $viewClass['label'] }} control-label">{!! $label !!}</label>

    <div class="{
     
     { $viewClass['field'] }}">

        @include('admin::form.error')

        <div id="wang-editor—wrapper">
            <div id="toolbar-container"></div>
            <div {!! $attributes !!} style="height: 100%; min-height: 300px;"></div>
        </div>

        <!--suppress HtmlFormInputWithoutLabel -->
        <textarea class="hidden" name="{
     
     { $name }}">{
   
   { $value }}</textarea>

        @include('admin::form.help-block')

    </div>
</div>

<!-- The init attribute will auto invoked Dcat.init() method to listen elements generate -->
<!--suppress HtmlUnknownAttribute -->
<script require="@wang-editor" init="{!! $selector !!}">
    const {
      
      createEditor, createToolbar} = window.wangEditor;
    const editorConfig = {
      
      
        placeholder: '在此输入文字或通过工具栏插入相关内容...',
        onChange(editor) {
      
      
            $this.parents('.form-field').find('textarea[name="{
      
      { $name }}"]').val(editor.getHtml());
        }
    }

    const editor = createEditor({
      
      
        selector: '#' + id,
        config: editorConfig,
        mode: 'default',
        html: '{!! $value !!}'
    })

    const toolbarConfig = {
      
      }

    const toolbar = createToolbar({
      
      
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default',
    })
</script>

For custom toolbar or editor-related APIs, please refer to the documentation: https://www.wangeditor.com/v5

Modify bootstrap.php

Edit app/Admin/bootstrap.phpthe file and add the following two lines:

Admin::asset()->alias('@wang-editor', [
    // 此处如需使用本地文件，将之前下载的 3 个文件放到喜欢的路径下
    // 路径相对 public 目录，将下方 URL 替换为 /vendor/dcat-admin/dcat/plugins/wangEditor/index.js 类似路径即可
    'js' => ['https://cdn.staticfile.org/wangeditor5/5.1.23/index.min.js'],
    'css' => ['https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css'],
]);

Form::extend('editor', WangEditor::class);

form use

Still use editorthe method:

$form->editor('column_name');

sample graph

example