Эх сурвалжийг харах

feat(editor): 添加博文编辑功能

- 新增 PostEditView.vue 组件实现 Markdown 编辑器功能
- 添加 v-md-editor 相关依赖和类型声明
- 在路由配置中增加编辑器入口
- 在主入口文件中初始化 Markdown 编辑器插件
Sakulin 2 сар өмнө
parent
commit
13b6fbddc7

+ 5 - 0
package.json

@@ -13,14 +13,19 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@kangc/v-md-editor": "^2.3.18",
     "axios": "^1.9.0",
+    "highlightjs": "^9.16.2",
     "pinia": "^3.0.1",
+    "prismjs": "^1.30.0",
+    "vite-plugin-prismjs": "^0.0.11",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.1",
     "@types/node": "^22.14.0",
+    "@types/prismjs": "^1.26.5",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",

+ 15 - 1
src/main.ts

@@ -4,10 +4,24 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
 import App from './App.vue'
-import {router} from './router'
+import { router } from './router'
+
+import VMdEditor from '@kangc/v-md-editor';
+import '@kangc/v-md-editor/lib/style/base-editor.css';
+
+import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
+import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
+
+import Prism from 'prismjs';
+
+VMdEditor.use(vuepressTheme, {
+  Prism
+});
 
 const app = createApp(App)
 
+app.use(VMdEditor)
+
 app.use(createPinia())
 app.use(router)
 

+ 7 - 0
src/router/index.ts

@@ -51,6 +51,13 @@ export const modules: BlogModule[] = [
     routeUrl: "/detail",
     component: () => import('../views/PostDetailView.vue'),
     showInMenu: false
+  },
+  {
+    routeName: "editor",
+    title: "编辑博文",
+    routeUrl: "/editor",
+    component: () => import('../views/PostEditView.vue'),
+    showInMenu: true
   }
 ];
 

+ 22 - 0
src/views/PostEditView.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+import { ref } from 'vue'
+
+const text = ref(`
+# 这是一个标题
+
+这是一个段落
+
+\`\`\` python
+print('Hello, World!')
+\`\`\`
+
+`)
+
+</script>
+
+<template>
+  <v-md-editor v-model="text" height="400px"/>
+</template>
+
+<style scoped></style>

+ 3 - 0
src/vme.d.ts

@@ -0,0 +1,3 @@
+declare module '@kangc/v-md-editor/lib/theme/vuepress.js';
+declare module '@kangc/v-md-editor/lib/theme/github.js';
+declare module '@kangc/v-md-editor';