feat(admin): integrate markdown editor for news creation
This commit replaces the basic textarea in the 'Add News' modal with a full-featured Markdown editor. - Adds the `md-editor-v3` dependency. - Implements the editor within a `ClientOnly` component for client-side rendering. - Creates a Nuxt plugin to register the `MdEditor` component globally. - Adjusts the modal to be fullscreen to provide a better user experience for content creation.
This commit is contained in:
@@ -1,29 +1,36 @@
|
||||
<template>
|
||||
<UModal v-model:open="open" title="撰写新闻" description="在数据库中添加一篇新闻">
|
||||
<UModal v-model:open="open" title="撰写新闻" description="在数据库中添加一篇新闻" fullscreen :ui="{
|
||||
body: 'overflow-y-auto p-6', // 防止溢出 + 内边距
|
||||
footer: 'justify-end'
|
||||
}">
|
||||
<UButton label="撰写新闻" icon="mdi:newspaper-plus" />
|
||||
|
||||
<template #body>
|
||||
<UForm :schema="newsSchema" :state="newsState" @submit="onSubmit">
|
||||
<UForm ref="form" :schema="newsSchema" :state="newsState" @submit="onSubmit" class="space-y-4">
|
||||
<UFormField label="新闻标题" name="title">
|
||||
<UInput v-model="newsState.title" placeholder="请输入新闻标题" class="w-full" />
|
||||
</UFormField>
|
||||
<UFormField label="新闻内容" name="contents">
|
||||
<UTextarea v-model="newsState.content" class="w-full" />
|
||||
<ClientOnly>
|
||||
<MdEditor v-model="newsState.content" />
|
||||
</ClientOnly>
|
||||
</UFormField>
|
||||
这里应该是要有一个 Markdown 编辑界面
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton label="Cancel" color="neutral" variant="subtle" @click="open = false" />
|
||||
<UButton label="Create" color="primary" variant="solid" type="submit" />
|
||||
</div>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<UButton label="Cancel" color="neutral" variant="subtle" @click="open = false" />
|
||||
<UButton label="Create" color="primary" variant="solid" @click="form.submit()" />
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FormSubmitEvent } from '@nuxt/ui';
|
||||
import { MdEditor } from 'md-editor-v3';
|
||||
import * as z from 'zod'
|
||||
|
||||
const form = ref();
|
||||
const open = ref(false);
|
||||
|
||||
const newsSchema = z.object({
|
||||
|
||||
Reference in New Issue
Block a user