wang-editor

app/Admin/Controllers/ProductSpuController.php

@@ -76,7 +76,7 @@ class ProductSpuController extends AdminController
                 }
             });
 
-            $grid->tools(function  (Grid\Tools  $tools)  { 
+            $grid->tools(function  (Grid\Tools  $tools)  {
                 // Excel导入
                 $tools->append(new  \App\Admin\Actions\Modal\ProductImport());
                 $tools->append(new  \App\Admin\Actions\Grid\ProductDownloadTemplate());

app/Admin/Controllers/SettingController.php

@@ -113,7 +113,7 @@ class SettingController extends AdminController
                     'ios' => ['name' => 'IOS配置', 'form' => new Ios(), 'route' => admin_route('settings.index', ['type'=>'ios'])],
                     'android' => ['name' => 'Android配置', 'form' => new Android(), 'route' => admin_route('settings.index', ['type'=>'android'])],
                     'kuaidi100' => ['name' => '快递100配置', 'form' => new Kuaidi100(), 'route' => admin_route('settings.index', ['type'=>'kuaidi100'])],
-                    'unipush' => ['name' => 'Uni-push配置', 'form' => new Unipush(), 'route' => admin_route('settings.index', ['type'=>'unipush'])],
+                    // 'unipush' => ['name' => 'Uni-push配置', 'form' => new Unipush(), 'route' => admin_route('settings.index', ['type'=>'unipush'])],
                     'custom' => ['name' => '自定义配置', 'form' => new Custom(), 'route' => admin_route('settings.index', ['type'=>'custom'])],
                 ];
                 if (isset($tabs[$type])) {

app/Admin/Controllers/WangEditoController.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Admin\Controllers;
+
+use Illuminate\Contracts\Filesystem\Filesystem;
+use Illuminate\Filesystem\FilesystemAdapter;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\Storage;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+class WangEditoController extends Controller
+{
+    public function upload(Request $request)
+    {
+        $file = $request->file('file');
+        $dir = $request->get('dir', 'wang-editor');
+        $disk = $this->disk();
+
+        $newName = $this->generateNewName($file);
+
+        $disk->putFileAs($dir, $file, $newName);
+
+        return [
+            'errno' => 0,
+            'data' => [
+                'url' => $disk->url("{$dir}/$newName")
+            ]
+        ];
+    }
+
+    protected function generateNewName(UploadedFile $file): string
+    {
+        return uniqid(md5($file->getClientOriginalName())).'.'.$file->getClientOriginalExtension();
+    }
+
+    /**
+     * @return Filesystem|FilesystemAdapter
+     */
+    protected function disk()
+    {
+        $disk = request()->get('disk') ?: config('admin.upload.disk');
+
+        return Storage::disk($disk);
+    }
+
+}

app/Admin/Extensions/Form/WangEditor.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Admin\Extensions\Form;
+
+use Dcat\Admin\Form\Field;
+
+class WangEditor extends Field
+{
+    protected $view = 'admin.form.wang-editor';
+}

app/Admin/bootstrap.php

@@ -4,6 +4,7 @@ use App\Admin\Extensions\Column\CircleDot;
 use App\Admin\Extensions\Column\Modal;
 use App\Admin\Extensions\Form\Product\SelectAttr;
 use App\Admin\Extensions\Form\Product\SelectSpec;
+use App\Admin\Extensions\Form\WangEditor;
 use App\Admin\Extensions\Show\Label;
 use Dcat\Admin\Admin;
 use Dcat\Admin\Form;
@@ -34,6 +35,12 @@ use Illuminate\Support\Arr;
 
 Admin::css('/dist/admin/css/app.css');
 
+Admin::asset()->alias('@wang-editor', [
+    'css' => ['/wang-editor/style.css', '/wang-editor/custom.css'],
+    'js' => ['/wang-editor/index.js'],
+]);
+
+
 Column::extend('modal', Modal::class);
 Column::extend('circleDot', CircleDot::class);
 
@@ -55,12 +62,14 @@ Form::resolving(function (Form $form) {
 Form::extend('selectAttr', SelectAttr::class);
 Form::extend('selectSpec', SelectSpec::class);
 
-Editor::resolving(function (Editor $editor) {
-    // 设置默认配置
-    $editor->options([
-        'branding'=> false,
-    ]);
-});
+Form::extend('editor', WangEditor::class);
+
+// Editor::resolving(function (Editor $editor) {
+//     // 设置默认配置
+//     $editor->options([
+//         'branding'=> false,
+//     ]);
+// });
 
 ShowField::extend('showLabel', Label::class);
 ShowField::macro('circleDot', function ($options = [], $default = 'default') {

app/Admin/routes.php

@@ -198,4 +198,7 @@ Route::group([
 
     $router->resource('user-vip', 'UserVipController')->only(['index', 'show'])->names('user_vip');
     $router->resource('vip', 'VipController')->names('vip');
+
+    // wang-editor update
+    $router->post('wang-editor/upload', 'WangEditoController@upload');
 });

public/wang-editor/custom.css

@@ -0,0 +1,11 @@
+.wang-editor {
+    border: 1px solid #ccc;
+}
+
+.wang-editor .toolbar {
+    border-bottom: 1px solid #ccc;
+}
+
+.wang-editor .editor {
+    min-height: 300px;
+}

resources/views/admin/form/wang-editor.blade.php

@@ -0,0 +1,65 @@
+<div class="{{$viewClass['form-group']}}">
+
+    <label class="{{$viewClass['label']}} control-label">{{$label}}</label>
+
+    <div class="{{$viewClass['field']}}">
+
+        @include('admin::form.error')
+
+        <div {!! $attributes !!} style="width: 100%; height: 100%;">
+            <div class="wang-editor full-screen-container">
+                <div class="toolbar" id="editor-toolbar"></div>
+                <div class="editor" id="editor"></div>
+            </div>
+        </div>
+
+
+        <input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />
+
+        @include('admin::form.help-block')
+
+    </div>
+</div>
+
+<!-- script标签加上 "init" 属性后会自动使用 Dcat.init() 方法动态监听元素生成 -->
+<script require="@wang-editor" init="{!! $selector !!}">
+    const { createEditor, createToolbar } = window.wangEditor
+    // id 变量是 Dcat.init() 自动生成的，是一个唯一的随机字符串
+
+    // 编辑器配置
+    const editorConfig = {}
+    editorConfig.placeholder = '请输入内容'
+    // 当编辑器选区、内容变化时，即触发
+    editorConfig.onChange = (editor) => {
+        $(editor.getEditableContainer()).parents('.form-field').find('input[type="hidden"]').val(editor.getHtml());
+    }
+    // 上传图片
+    editorConfig.MENU_CONF = {
+        uploadImage: {
+            server: '/admin/wang-editor/upload',
+            fieldName: 'file',
+            meta: {
+                _token: '{{ csrf_token() }}',
+            },
+        }
+    }
+
+    // 编辑器
+    const editor = createEditor({
+        selector: '#editor',
+        config: editorConfig,
+        mode: 'simple'
+    })
+    // 工具栏
+    const toolbar = createToolbar({
+        editor,
+        selector: '#editor-toolbar',
+        config: {
+            excludeKeys: ['insertVideo']
+        },
+        mode: 'simple'
+    })
+
+    // 设置默认值
+    editor.setHtml('{!! $value !!}');
+</script>