refactor: 移除 Markdown编辑器组件
- 删除了 MarkdownEditor.vue 组件文件 - 从路由配置中移除了与 Markdown 编辑相关的路由
This commit is contained in:
@@ -1,133 +0,0 @@
|
||||
<template>
|
||||
<div class="markdown-editor">
|
||||
<div class="editor-header">
|
||||
<el-input v-model="title" placeholder="标题" class="title-input" />
|
||||
<el-input v-model="fileName" placeholder="文件名" class="file-input" />
|
||||
</div>
|
||||
|
||||
<v-md-editor
|
||||
v-model="content"
|
||||
height="500px"
|
||||
:disabled-menus="[]"
|
||||
@upload-image="handleImageUpload"
|
||||
></v-md-editor>
|
||||
|
||||
<div class="editor-footer">
|
||||
<el-button type="primary" @click="saveMarkdown">保存</el-button>
|
||||
<el-button @click="previewMarkdown">预览</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarkdownEditor from '@/components/MarkdownEditor.vue';
|
||||
import { ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import axios from 'axios';
|
||||
import {uploadImage} from "@/api/CommonApi.js";
|
||||
|
||||
export default {
|
||||
name: 'MarkdownEditor',
|
||||
setup() {
|
||||
const title = ref('');
|
||||
const fileName = ref('');
|
||||
const content = ref('');
|
||||
const userId = ref(1); // 示例用户ID,实际应用中从登录信息获取
|
||||
const currentFileId = ref(null);
|
||||
|
||||
const saveMarkdown = async () => {
|
||||
try {
|
||||
const API_BASE_URL = 'http://localhost:8083';
|
||||
let response;
|
||||
|
||||
if (currentFileId.value) {
|
||||
// 更新已有文件:content作为请求体
|
||||
response = await axios.post(`${API_BASE_URL}/api/markdown/${currentFileId.value}`,
|
||||
content.value, {
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'text/plain'
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
// 创建新文件:userId, title, fileName作为查询参数,content作为请求体
|
||||
const params = new URLSearchParams();
|
||||
params.append('userId', userId.value);
|
||||
params.append('title', title.value);
|
||||
params.append('fileName', fileName.value);
|
||||
|
||||
response = await axios.post(`${API_BASE_URL}/api/markdown`,
|
||||
content.value, {
|
||||
params: params,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'text/plain'
|
||||
}
|
||||
}
|
||||
);
|
||||
currentFileId.value = response.data.id;
|
||||
}
|
||||
|
||||
ElMessage.success('保存成功');
|
||||
} catch (error) {
|
||||
ElMessage.error('保存失败: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const previewMarkdown = () => {
|
||||
if (!currentFileId.value) {
|
||||
ElMessage.warning('请先保存文档');
|
||||
return;
|
||||
}
|
||||
window.open(`/api/markdown/${currentFileId.value}`, '_blank');
|
||||
};
|
||||
|
||||
const handleImageUpload = async (event, insertImage, files) => {
|
||||
const file = files[0];
|
||||
try {
|
||||
const response = await uploadImage(file, userId.value, currentFileId.value);
|
||||
|
||||
// 插入图片到编辑器
|
||||
insertImage({
|
||||
url: response.data.url,
|
||||
desc: response.data.originalName
|
||||
});
|
||||
} catch (error) {
|
||||
ElMessage.error('图片上传失败: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
title,
|
||||
fileName,
|
||||
content,
|
||||
saveMarkdown,
|
||||
previewMarkdown,
|
||||
handleImageUpload,
|
||||
MarkdownEditor
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.markdown-editor {
|
||||
padding: 20px;
|
||||
}
|
||||
.editor-header {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.title-input {
|
||||
flex: 2;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.file-input {
|
||||
flex: 1;
|
||||
}
|
||||
.editor-footer {
|
||||
margin-top: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,5 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import HomePage from '../components/HomePage.vue';
|
||||
import MarkdownEditor from '../components/MarkdownEditor.vue';
|
||||
import LoginPage from '../components/LoginPage.vue';
|
||||
import RegisterPage from '../components/RegisterPage.vue';
|
||||
import TrashPage from '../components/TrashPage.vue';
|
||||
@@ -15,17 +14,6 @@ const routes = [
|
||||
name: 'Home',
|
||||
component: HomePage
|
||||
},
|
||||
{
|
||||
path: '/editor',
|
||||
name: 'Editor',
|
||||
component: MarkdownEditor
|
||||
},
|
||||
{
|
||||
path: '/editor/:id',
|
||||
name: 'EditMarkdown',
|
||||
component: MarkdownEditor,
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
|
||||
Reference in New Issue
Block a user