Files
EasyFlow/easyflow-ui-admin/packages/@core/ui-kit/editor-ui
陈子默 5de3b209c1 feat: 重塑技能库与统一文件工作台
- 统一分类检索、新建导入和发布交互

- 使用单一文件工作台编辑全部 Skill 资源

- 下沉可复用 Markdown 与代码编辑能力
2026-08-14 18:58:20 +08:00
..

Editor UI

@easyflow-core/editor-ui 提供管理端通用的代码与 Markdown 编辑组件。组件样式随组件一起加载,并统一消费 EasyFlow 设计 Token业务页面无需覆盖 Milkdown 或 CodeMirror 内部样式。

Markdown 实时编辑器

<script setup lang="ts">
import { ref } from 'vue';

import { MarkdownLiveEditor } from '@easyflow-core/editor-ui';

const content = ref('# 标题');
const readonly = ref(false);
const props = defineProps<{
  saveDocument: (content: string) => Promise<void>;
  resolveImageUrl: (url: string) => Promise<string> | string;
  uploadImage: (file: File) => Promise<string>;
}>();
</script>

<template>
  <MarkdownLiveEditor
    v-model="content"
    :readonly="readonly"
    placeholder="输入 Markdown 内容…"
    :resolve-image-url="props.resolveImageUrl"
    :upload-image="props.uploadImage"
    @save="props.saveDocument(content)"
  />
</template>

主要接口:

  • v-modelMarkdown 原文。
  • readonly:只读模式。
  • placeholder:空文档占位文案。
  • resolveImageUrl:将 Markdown 图片地址解析为可预览地址。
  • uploadImage:上传图片并返回写入 Markdown 的地址。
  • save:用户按下 Ctrl/Cmd + S
  • linkClick:用户点击相对链接。
  • fidelityLoss:内容包含实时模式无法保真的语法,调用方应切换源码模式。

源码编辑场景可直接使用 MarkdownSourceEditor