完成创作页面编辑器布局与适配

package-lock.json

@@ -22,7 +22,8 @@
         "react-router-dom": "^6.14.2",
         "react-toastify": "^9.1.3",
         "sass": "^1.77.8",
-        "sort-by": "^0.0.2"
+        "sort-by": "^0.0.2",
+        "vditor": "^3.10.4"
       },
       "devDependencies": {
         "@types/react": "^18.2.17",
@@ -1806,6 +1807,11 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
+    "node_modules/diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -4140,6 +4146,17 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/vditor": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmmirror.com/vditor/-/vditor-3.10.4.tgz",
+      "integrity": "sha512-NWaMom0buUvRjOCaK/jKeJEVfZNmfTgblK4+pxBoeTdiCYn5yWokcGYMh9GzHIvt5gy6FiQFc1VQvytIwyeIwA==",
+      "dependencies": {
+        "diff-match-patch": "^1.0.5"
+      },
+      "funding": {
+        "url": "https://ld246.com/sponsor"
+      }
+    },
     "node_modules/vite": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",

package.json

@@ -28,7 +28,8 @@
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
     "sass": "^1.77.8",
-    "sort-by": "^0.0.2"
+    "sort-by": "^0.0.2",
+    "vditor": "^3.10.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.17",

src/pages/Create/components/VditorMD/index.scss

@@ -0,0 +1,21 @@
+#vditor {
+    border: none;
+
+    .vditor-toolbar {
+        display: none;
+    }
+
+    .vditor-reset {
+        background-color: transparent !important;
+
+        .vditor-ir__marker--heading{
+            color: #727cf5;
+        }
+    }
+
+    // 针对表单元素的光标样式
+    pre {
+        // 设置光标样式
+        caret-color: #727cf5; // 光标颜色
+    }
+}

src/pages/Create/components/VditorMD/index.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import Vditor from "vditor";
+import "vditor/dist/index.css";
+import "./index.scss"
+
+const VditorEditor = () => {
+    const [vd, setVd] = useState<Vditor>();
+    useEffect(() => {
+        const vditor = new Vditor("vditor", {
+            minHeight: 500,
+            // outline: {
+            //     enable: true,
+            //     position: 'left'
+            // },
+            after: () => {
+                vditor.setValue("`Vditor` 最小代码示例");
+                // vditor.setTheme("classic","","github")
+                setVd(vditor);
+            }
+        })
+
+        // Clear the effect
+        return () => {
+            vd?.destroy();
+            setVd(undefined);
+        };
+    }, []);
+    
+    return <div id="vditor" className="vditor"/>;
+};
+
+export default VditorEditor;

src/pages/Create/index.tsx

@@ -1,14 +1,20 @@
 import Breadcrumb from '@/components/Breadcrumbs/Breadcrumb';
 import { Card } from 'antd';
 
+import VditorEditor from './components/VditorMD';
+import { useEffect, useState } from 'react';
+
 const Create = () => {
+  const [content, setContent] = useState('');
+
+  useEffect(() => {
+    console.log(content);
+  }, [content])
+
   return (
     <>
-      <Card title={<Breadcrumb pageName="创作" />}>
-        
-        <p>Card content</p>
-        <p>Card content</p>
-        <p>Card content</p>
+      <Card title={<Breadcrumb pageName="创作" />} className='border-stroke [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark dark:border-strokedark'>
+        <VditorEditor />
       </Card>
     </>
   );

src/styles/custom.scss

@@ -0,0 +1,3 @@
+.vditor .vditor-reset {
+    @apply dark:text-white;
+}

src/styles/index.css

@@ -1,3 +1,4 @@
+@import url('./custom.scss');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.cjs

@@ -2,7 +2,11 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './src/styles/custom.scss'
+  ],
   darkMode: 'class',
   theme: {
     fontFamily: {

vite.config.js

@@ -7,7 +7,8 @@ export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src')
+      '@': path.resolve(__dirname, './src'),
+      '~': path.resolve(__dirname, 'src')
     },
   }
 })