hoàn thành block editor của Pages

2026-06-25 16:38:03 +07:00
parent 5c644545b8
commit 6fe098bc5b
32 changed files with 2036 additions and 8 deletions
@@ -312,3 +312,57 @@ spring:
    username: sisvietnam
    password: sisvietnam
 ```
+
+## Admin Pages & Block Editor Management
+
+We have implemented a WordPress-like static pages management feature at `/manage/pages`. This includes an interactive block-based editor powered by **Editor.js**.
+
+### 1. How to Run and Access
+1. Start your Oracle database or ensure it is accessible.
+2. Run the application in development mode:
+   ```powershell
+   ./gradlew bootRun
+   ```
+3. Open your browser and navigate to: [http://localhost:8080/manage/pages](http://localhost:8080/manage/pages)
+
+### 2. Form Fields & Features
+When creating or editing a page (`/manage/pages/new` or `/manage/pages/{id}/edit`):
+- **Title**: Name of the page (e.g. `About Us`, `Giới thiệu`).
+- **Slug**: The URL path. If left blank, it is automatically generated from the Title, supporting clean Vietnamese character conversions (e.g. `Bệnh viện S.I.S Cần Thơ` -> `benh-vien-s-i-s-can-tho`).
+- **Status**: Status of the page (`DRAFT`, `PUBLISHED`, `ARCHIVED`).
+- **Display Order**: Controls sorting of page links (lower numbers appear first).
+- **Meta Description**: A short summary used for SEO metadata in `<meta name="description">`.
+- **Page Content (Block Editor)**: Interactive wysiwyg editor utilizing Editor.js.
+
+### 3. Using the Block Editor
+- **Add a Block**: Press `Enter` to create a new paragraph, or click the `+` icon (or press `Tab` on an empty line) to pick a block type:
+  - **Heading**: Formatted HTML headers (H2, H3, H4).
+  - **List**: Bulleted or numbered lists (supports nested lists via `Tab`).
+  - **Quote**: Stylized blockquotes with a caption field.
+  - **Table**: Simple tables with columns and rows.
+  - **Code**: Formatted code block.
+  - **Warning**: Notice or alert box with title & message.
+  - **Delimiter**: Horizontal dividers.
+- **Inline Styling**: Highlight any text in a paragraph to apply **Bold**, *Italic*, Links, Underlines, `Inline Code`, or Highlighter.
+- **Reorder & Actions**: Hover over any block and use the handle menu (`⋮⋮`) to drag-and-drop, move up/down, convert to another block type, or delete.
+
+### 4. How the Plugin System Works (Extensibility)
+If you want to create new custom block types (e.g., custom slider, doctor list, video embed) in the future:
+1. Create your plugin script file inside `src/main/resources/static/js/manage/editor-plugins/` (e.g. `video-embed-plugin.js`).
+2. Implement your custom block class or wrap an existing Editor.js tool.
+3. Register your tool globally by adding it to `window.SISEditorPlugins`:
+   ```javascript
+   window.SISEditorPlugins = window.SISEditorPlugins || {};
+   window.SISEditorPlugins['videoEmbed'] = {
+       class: VideoEmbedToolClass,
+       inlineToolbar: true,
+       config: {
+           placeholder: 'Enter video URL...'
+       }
+   };
+   ```
+4. In `src/main/resources/templates/manage/pages/form.html`, load the script in the `<section layout:fragment="scripts">` tag **before** the main configuration script:
+   ```html
+   <script th:src="@{/js/manage/editor-plugins/video-embed-plugin.js}"></script>
+   ```
+5. The initialization logic in [editor-config.js](file:///c:/Users/laptop01/Documents/sisvietnamvn_01/sisvietnamvn_main/src/main/resources/static/js/manage/editor-config.js) will automatically scan `window.SISEditorPlugins` and register them.