改进 Editor.MD 独立为 组件

改进 工单 Markdown 编辑器

app/View/Components/MarkdownEditor.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class MarkdownEditor extends Component
+{
+    public string $name;
+    public ?string $placeholder;
+    public ?string $value;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct($name, $placeholder = null, $value = null)
+    {
+        $this->name = $name;
+        $this->placeholder = $placeholder;
+        $this->value = $value;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View
+     */
+    public function render(): View
+    {
+        return view('components.markdown-editor');
+    }
+}

resources/views/admin/notifications/create.blade.php

@@ -3,11 +3,8 @@
 @section('title', '通知')
 
 @section('content')
-    <link rel="stylesheet" href="{{ asset('vendor/editor.md/css/editormd.min.css') }}"/>
-
     <h3>通知</h3>
 
-
     @if (Request::isNotFilled('user_id'))
         <h5>首先，我们得先筛选出要通知哪些用户。</h5>
 
@@ -123,10 +120,7 @@
                 <input type="text" name="title" id="title" class="form-control" placeholder="要通知的标题" value="{{ old('title') }}">
             </div>
 
-            <div id="content" class="mt-3">
+            <x-markdown-editor name="content" :value="old('content')"/>
-                <textarea name="content" style="display:none;" aria-label="通知内容">{{ old('content') }}</textarea>
-            </div>
-
 
             <div class="form-check mt-1">
                 <label class="form-check-label" for="send_mail">
@@ -139,42 +133,6 @@
             <button type="submit" class="btn btn-primary mt-2">发送</button>
             <span class="text-muted d-block mt-2">通知一旦发送，将无法撤销！</span>
         </form>
-
-
-        <script src="{{ asset('vendor/editor.md/lib/zepto.min.js') }}"></script>
-        <script src="{{ asset('vendor/editor.md/lib/marked.min.js') }}"></script>
-        <script src="{{ asset('vendor/editor.md/lib/prettify.min.js') }}"></script>
-        <script src="{{ asset('vendor/editor.md/lib/underscore.min.js') }}"></script>
-        <script src="{{ asset('vendor/editor.md/lib/flowchart.min.js') }}"></script>
-        <script src="{{ asset('vendor/editor.md/lib/jquery.flowchart.min.js')}}"></script>
-        <script src="{{ asset('vendor/editor.md/editormd.min.js') }}"></script>
-        <script>
-            let editor;
-
-            let darkTheme = false;
-
-            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                darkTheme = true;
-            }
-
-            editor = editormd("content", {
-                width: "100%",
-                height: 740,
-                path: '{{ asset('vendor/editor.md/lib') }}/',
-                theme: darkTheme ? 'dark' : 'default',
-                previewTheme: darkTheme ? 'dark' : 'default',
-                editorTheme: darkTheme ? 'pastel-on-dark' : 'default',
-                markdown: "{{ old('content') }}",
-                codeFold: true,
-                saveHTMLToTextarea: false,
-                searchReplace: true,
-                htmlDecode: "style,script,iframe|on*",
-                imageUpload: false,
-                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
-                imageUploadURL: "./php/upload.php",
-            });
-        </script>
-
     @else
         <h5 class="mt-4">没有符合条件的用户。</h5>
     @endif

resources/views/admin/work-orders/edit.blade.php

@@ -11,10 +11,6 @@
     <x-work-order-status :status="$workOrder->status"></x-work-order-status>
     <a href="{{ route('admin.work-orders.show', $workOrder) }}">查看工单</a>
 
-
-
-
-
     @if ($workOrder->status !== 'pending')
         <form method="post" action="{{ route('admin.work-orders.update', $workOrder) }}">
             @csrf

resources/views/admin/work-orders/reply_edit.blade.php

@@ -1,18 +1,16 @@
 @extends('layouts.admin')
 
-@section('title', '回复: ' . $reply->workOrder->title)
+@section('title', '修改 ' . $reply->workOrder->title . ' 的回复')
 
 @section('content')
+    <h3>修改 {{ $reply->workOrder->title }} 的回复</h3>
+
     @if (!$reply->is_pending)
         <form method="post" action="{{ route('admin.work-orders.replies.update', [$work_order, $reply]) }}">
             @csrf
             @method('PATCH')
 
-            {{--    编辑   --}}
+            <x-markdown-editor name="content" :placeholder="$reply->content" :value="$reply->content"/>
-            <div class="form-group">
-                <label for="content">内容</label>
-                <textarea name="content" id="content" class="form-control" rows="10">{{ $reply->content }}</textarea>
-            </div>
 
             <button type="submit" class="btn btn-primary mt-3">修改</button>
 

resources/views/admin/work-orders/show.blade.php

@@ -6,9 +6,9 @@
     <h3>{{ $workOrder->title }}</h3>
     <p>
         UUID: {{ $workOrder->uuid }}
-        <br />
+        <br/>
         创建时间: {{ $workOrder->created_at }}, {{ $workOrder->created_at->diffForHumans() }}。
-        <br />
+        <br/>
         最后更新时间: {{ $workOrder->updated_at }}。
     </p>
     <a href="{{ route('admin.work-orders.edit', $workOrder) }}">编辑此工单</a>
@@ -87,14 +87,13 @@
     <h4 class="mt-3">您的回复</h4>
     <form method="POST" action="{{ route('admin.work-orders.replies.store', $workOrder->id) }}">
         @csrf
-        {{-- label --}}
+
-        <div class="form-group">
+
-            <label for="content">内容</label>
+        <x-markdown-editor name="content" placeholder="作为 {{ config('app.display_name') }} 的 {{ Auth::guard('admin')->user()->name }} 回复。" />
-            <textarea class="form-control" id="content" name="content" rows="10"
-                      placeholder="作为 {{ config('app.display_name') }} 的 {{ Auth::guard('admin')->user()->name }} 回复。"></textarea>
-        </div>
 
         <button type="submit" class="btn btn-primary mt-3 mb-3">提交</button>
+
     </form>
 
+
 @endsection

resources/views/components/markdown-editor.blade.php

@@ -0,0 +1,49 @@
+<div>
+    <link rel="stylesheet" href="{{ asset('vendor/editor.md/css/editormd.min.css') }}"/>
+
+    @php($rand = rand(0, 1000))
+    <div id="md_{{$rand}}_{{ $name }}" class="mt-3">
+
+        <textarea name="{{ $name }}" style="display:none;" placeholder="{{ $placeholder }}"
+                  aria-label="{{ $placeholder }}">{{ $value ?? old($name) }}</textarea>
+
+    </div>
+
+
+    <script src="{{ asset('vendor/editor.md/lib/zepto.min.js') }}"></script>
+    <script src="{{ asset('vendor/editor.md/lib/marked.min.js') }}"></script>
+    <script src="{{ asset('vendor/editor.md/lib/prettify.min.js') }}"></script>
+    <script src="{{ asset('vendor/editor.md/lib/underscore.min.js') }}"></script>
+    <script src="{{ asset('vendor/editor.md/lib/flowchart.min.js') }}"></script>
+    <script src="{{ asset('vendor/editor.md/lib/jquery.flowchart.min.js')}}"></script>
+    <script src="{{ asset('vendor/editor.md/editormd.min.js') }}"></script>
+    <script>
+        @php($editor = 'editor_' . $rand)
+        let {{ $editor }};
+
+        let darkTheme = false;
+
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            darkTheme = true;
+        }
+
+        {{ $editor }} = editormd("md_{{$rand}}_{{ $name }}", {
+            width: "100%",
+            height: 740,
+            path: '{{ asset('vendor/editor.md/lib') }}/',
+            theme: darkTheme ? 'dark' : 'default',
+            previewTheme: darkTheme ? 'dark' : 'default',
+            editorTheme: darkTheme ? 'pastel-on-dark' : 'default',
+            markdown: "{{ old('content') }}",
+            codeFold: true,
+            saveHTMLToTextarea: false,
+            searchReplace: true,
+            htmlDecode: "style,script,iframe|on*",
+            imageUpload: false,
+            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
+            imageUploadURL: "./php/upload.php",
+            placeholder: "{{ $placeholder }}",
+        });
+    </script>
+
+</div>