@@ -82,14 +81,36 @@
+
+
+
- 💡 提示：支持Markdown语法，可以使用 **粗体**、*斜体*、`代码`、[链接](url)、 等格式
+ 💡 提示：支持Markdown语法，可以使用工具栏按钮从文件库选择图片/视频，也可以直接拖拽上传文件
@@ -578,6 +599,113 @@ const fileSelectCallback = ref<((url: string) => void) | null>(null);
const showVideoSelector = ref(false);
const videoSelectCallback = ref<((url: string) => void) | null>(null);
+// 📝 Markdown编辑器配置
+const markdownToolbars = [
+ 'bold',
+ 'underline',
+ 'italic',
+ '-',
+ 'title',
+ 'strikeThrough',
+ 'sub',
+ 'sup',
+ 'quote',
+ 'unorderedList',
+ 'orderedList',
+ 'task',
+ '-',
+ 'codeRow',
+ 'code',
+ 'link',
+ 'image',
+ 'table',
+ 'mermaid',
+ 'katex',
+ '-',
+ 'revoke',
+ 'next',
+ 'save',
+ '=',
+ 'pageFullscreen',
+ 'fullscreen',
+ 'preview',
+ 'previewOnly',
+ 'htmlPreview',
+ 'catalog'
+] as any;
+
+// 📝 Markdown编辑器图片上传处理
+const onMarkdownUploadImg = async (files: File[], callback: (urls: string[]) => void) => {
+ try {
+ const uploadPromises = files.map(async (file) => {
+ // 检查文件大小（限制为10MB）
+ if (file.size > 10 * 1024 * 1024) {
+ message.error(`图片 ${file.name} 大小超过10MB，请选择更小的文件`);
+ return null;
+ }
+
+ // 检查文件类型
+ if (!file.type.startsWith('image/')) {
+ message.error(`文件 ${file.name} 不是有效的图片格式`);
+ return null;
+ }
+
+ try {
+ const result = await uploadOss(file);
+ return result.url || result.path;
+ } catch (error) {
+ console.error('图片上传失败:', error);
+ message.error(`图片 ${file.name} 上传失败`);
+ return null;
+ }
+ });
+
+ const results = await Promise.all(uploadPromises);
+ const successUrls = results.filter(url => url !== null) as string[];
+
+ if (successUrls.length > 0) {
+ callback(successUrls);
+ message.success(`成功上传 ${successUrls.length} 张图片`);
+ }
+ } catch (error) {
+ console.error('批量上传失败:', error);
+ message.error('图片上传失败，请重试');
+ }
+};
+
+// 📝 Markdown编辑器图片选择器
+const openMarkdownImageSelector = () => {
+ fileSelectCallback.value = (url: string) => {
+ // 在当前光标位置插入Markdown图片语法
+ const imageMarkdown = ``;
+ insertMarkdownText(imageMarkdown);
+ };
+ showFileSelector.value = true;
+};
+
+// 📝 Markdown编辑器视频选择器
+const openMarkdownVideoSelector = () => {
+ videoSelectCallback.value = (url: string) => {
+ // 在当前光标位置插入Markdown视频语法（使用HTML标签）
+ const videoMarkdown = `
`;
+ insertMarkdownText(videoMarkdown);
+ };
+ showVideoSelector.value = true;
+};
+
+// 📝 在Markdown编辑器中插入文本
+const insertMarkdownText = (text: string) => {
+ // 简单的文本插入，在内容末尾添加
+ if (content.value) {
+ content.value += '\n\n' + text;
+ } else {
+ content.value = text;
+ }
+};
+
const config = ref({
height: 620,
paste_data_images: true,
@@ -1416,4 +1544,27 @@ watch(
.editor-wrapper {
margin-top: 16px;
}
+
+// 📝 Markdown编辑器工具栏扩展样式
+.markdown-toolbar-extension {
+ margin-bottom: 12px;
+ padding: 12px;
+ background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+ border: 1px solid #e8e8e8;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+
+ .ant-btn {
+ border-radius: 6px;
+ font-size: 13px;
+ height: 32px;
+ display: inline-flex;
+ align-items: center;
+
+ &:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ }
+}