Add (post editor): add image block, add 'standard' post format

2023-07-31 01:39:39 +08:00
parent 73062716b9
commit 9ed9671f09
29 changed files with 382 additions and 40 deletions
--- a/resources/js/vue/AdminApp.vue
+++ b/resources/js/vue/AdminApp.vue
--- a/resources/js/admin-app.js
+++ b/resources/js/admin-app.js
@@ -4,7 +4,7 @@ import "./bootstrap";

 import { createApp, defineAsyncComponent } from "vue";

-import AdminApp from "@/vue/AdminApp.vue";
+import AdminApp from "@/AdminApp.vue";

 const app = createApp({ AdminApp });
 const vueComponents = import.meta.glob("@/vue/**/*.vue", {
--- a/resources/js/vue/PostEditor.vue
+++ b/resources/js/vue/PostEditor.vue
@@ -187,6 +187,7 @@ import VueEditorJs from "./VueEditorJs.vue";

 import List from "@editorjs/list";
 import Header from "@editorjs/header";
+import ImageTool from "@editorjs/image";

 import { mapActions, mapState } from "pinia";

@@ -253,13 +254,160 @@ export default {
            class: List,
            inlineToolbar: true,
          },
+          image: {
+            class: ImageTool,
+            config: {
+              field: "file",
+              endpoints: {
+                byFile: null, // Your backend file uploader endpoint
+                byUrl: null, // Your endpoint that provides uploading by Url
+              },
+            },
+          },
        },
        onReady: () => {},
        onChange: (args) => {},
        data: {
-          time: 1591362820044,
-          blocks: [],
-          version: "2.25.0",
+          time: 1690738306815,
+          blocks: [
+            {
+              id: "DYr36VT6KH",
+              data: {
+                text: "Introduction",
+                level: 3,
+              },
+              type: "header",
+            },
+            {
+              id: "TAh-E2RIrs",
+              data: {
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              },
+              type: "paragraph",
+            },
+            {
+              id: "sQWS7Ivg74",
+              data: {
+                text: "First Point",
+                level: 3,
+              },
+              type: "header",
+            },
+            {
+              id: "Y9GYmrtsEk",
+              data: {
+                file: {
+                  url: "https://cdn1.productalert.co/uploads/1690738207_3b4cf9ff-c617-4062-b910-22e61e1751d0.jpg",
+                },
+                caption: "Picture of First Point",
+                stretched: false,
+                withBorder: false,
+                withBackground: false,
+              },
+              type: "image",
+            },
+            {
+              id: "7qzQF_jale",
+              data: {
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              },
+              type: "paragraph",
+            },
+            {
+              id: "_oYWs021IJ",
+              data: {
+                text: "Second Point",
+                level: 3,
+              },
+              type: "header",
+            },
+            {
+              id: "PzXRqEDx1Z",
+              data: {
+                file: {
+                  url: "https://cdn1.productalert.co/uploads/1690738243_8eb9f5b2-f3ad-45d9-a626-8ef160ef4068.jpg",
+                },
+                caption: "Picture of Second Point",
+                stretched: false,
+                withBorder: false,
+                withBackground: false,
+              },
+              type: "image",
+            },
+            {
+              id: "oD5oZ_q0Qo",
+              data: {
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              },
+              type: "paragraph",
+            },
+            {
+              id: "am9pIHopIw",
+              data: {
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              },
+              type: "paragraph",
+            },
+            {
+              id: "iFvJ1tYZk-",
+              data: {
+                text: "Third Point",
+                level: 3,
+              },
+              type: "header",
+            },
+            {
+              id: "zqwukyGttU",
+              data: {
+                file: {
+                  url: "https://cdn1.productalert.co/uploads/1690738271_180a520a-22df-4b98-aad3-9962e10832d6.jpg",
+                },
+                caption: "Picture of Third Point",
+                stretched: false,
+                withBorder: false,
+                withBackground: false,
+              },
+              type: "image",
+            },
+            {
+              id: "uuR88uia0m",
+              data: {
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              },
+              type: "paragraph",
+            },
+            {
+              id: "KNVtnJ5lou",
+              data: {
+                text: "Fourth Point",
+                level: 3,
+              },
+              type: "header",
+            },
+            {
+              id: "SWdpL4jh6G",
+              data: {
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              },
+              type: "paragraph",
+            },
+            {
+              id: "dQqWsgP_FO",
+              data: {
+                text: "Conclusion",
+                level: 3,
+              },
+              type: "header",
+            },
+            {
+              id: "I7FOByi69M",
+              data: {
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              },
+              type: "paragraph",
+            },
+          ],
+          version: "2.27.2",
        },
      },
    };
@@ -378,7 +526,7 @@ export default {
        .then((response) => {
          console.warn(response);
          if (response.data.action == "redirect_back") {
-            history.back();
+            window.location.replace(route("posts.manage"));
          }
        });

@@ -469,6 +617,15 @@ export default {
    },
  },
  mounted() {
+    this.config.tools.image.config.endpoints.byFile = route(
+      "api.admin.upload.cloud.image"
+    );
+    this.config.tools.image.config.additionalRequestHeaders = {
+      "X-CSRF-TOKEN": document
+        .querySelector('meta[name="csrf-token"]')
+        .getAttribute("content"),
+    };
+
    this.fetchCountryLocales().then(() => {
      this.setDefaultLocale();

--- a/resources/views/front/country.blade.php
+++ b/resources/views/front/country.blade.php
@@ -57,7 +57,8 @@ class="text-decoration-none">{{ $post->title }}</a>
                                        {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
-                                        <small class="text-body-secondary">{{ $post->publish_date->format('j F Y') }}</small>
+                                        <small
+                                            class="text-body-secondary">{{ $post->publish_date->format('j F Y') }}</small>
                                        {{-- <small class="text-body-secondary">9 min read</small> --}}
                                    </div>
                                </div>
--- a/resources/views/front/country_all.blade.php
+++ b/resources/views/front/country_all.blade.php
@@ -39,7 +39,7 @@
                                                </small>
                                            @endforeach
                                            <small
-                                                        class="text-body-secondary ms-2">{{ $post->publish_date->format('j F Y') }}</small>
+                                                class="text-body-secondary ms-2">{{ $post->publish_date->format('j F Y') }}</small>
                                        </p>

                                    </div>
--- a/resources/views/front/country_category.blade.php
+++ b/resources/views/front/country_category.blade.php
@@ -38,7 +38,7 @@
                                                </small>
                                            @endforeach
                                            <small
-                                                        class="text-body-secondary ms-2">{{ $post->publish_date->format('j F Y') }}</small>
+                                                class="text-body-secondary ms-2">{{ $post->publish_date->format('j F Y') }}</small>
                                            {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
                                        </p>

--- a/resources/views/layouts/admin/app.blade.php
+++ b/resources/views/layouts/admin/app.blade.php
@@ -7,6 +7,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>{{ config('app.name', 'Laravel') }}</title>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+

    @vite('resources/sass/admin-app.scss')

--- a/resources/views/layouts/front/app.blade.php
+++ b/resources/views/layouts/front/app.blade.php
@@ -11,6 +11,8 @@
    {!! Twitter::generate() !!}
    {!! JsonLdMulti::generate() !!}
    <meta property="fb:app_id" content="{{ config('seotools.fb_app_id') }}" />
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+

    @vite('resources/sass/front-app.scss')