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