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 { createRouter, createWebHistory } from 'vue-router';
|
||||||
import HomePage from '../components/HomePage.vue';
|
import HomePage from '../components/HomePage.vue';
|
||||||
import MarkdownEditor from '../components/MarkdownEditor.vue';
|
|
||||||
import LoginPage from '../components/LoginPage.vue';
|
import LoginPage from '../components/LoginPage.vue';
|
||||||
import RegisterPage from '../components/RegisterPage.vue';
|
import RegisterPage from '../components/RegisterPage.vue';
|
||||||
import TrashPage from '../components/TrashPage.vue';
|
import TrashPage from '../components/TrashPage.vue';
|
||||||
@@ -15,17 +14,6 @@ const routes = [
|
|||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: HomePage
|
component: HomePage
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/editor',
|
|
||||||
name: 'Editor',
|
|
||||||
component: MarkdownEditor
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/editor/:id',
|
|
||||||
name: 'EditMarkdown',
|
|
||||||
component: MarkdownEditor,
|
|
||||||
props: true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
|
|||||||
Reference in New Issue
Block a user