@kernelift/markdown-editor

基于 Monaco Editor 的 Markdown 编辑器组件，提供强大的代码编辑体验。

功能特性

• 基于 Monaco Editor，提供专业的代码编辑体验
• 支持 Markdown 语法高亮
• 自动布局和响应式设计
• 支持自定义编辑器配置
• 支持自定义工具栏操作
• 支持滚动事件监听
• 支持只读模式
• 支持主题切换（vs、vs-dark、hc-black）
• 支持代码自动缩进
• 支持行号显示
• 支持多种光标样式
• 支持字数换行

安装

pnpm add @kernelift/md-editor

基础用法

简单示例

<script setup lang="ts">
import { ref } from 'vue';
import { MdEditor } from '@kernelift/md-editor';

const content = ref('# Hello World\n\n这是一个 Markdown 编辑器示例。');
</script>

<template>
  <div style="height: 500px;">
    <MdEditor v-model="content" />
  </div>
</template>

自定义配置

<script setup lang="ts">
import { ref } from 'vue';
import { MdEditor } from '@kernelift/md-editor';

const content = ref('# Hello World');
const editorOptions = ref({
  theme: 'vs-dark',
  fontSize: 18,
  minimap: true,
  wordWrap: 'on'
});
</script>

<template>
  <div style="height: 500px;">
    <MdEditor 
      v-model="content" 
      :options="editorOptions" 
    />
  </div>
</template>

监听滚动事件

<script setup lang="ts">
import { ref } from 'vue';
import { MdEditor } from '@kernelift/md-editor';

const content = ref('# Hello World');

const handleEditorScroll = (scrollInfo: { height: number; top: number }) => {
  console.log('滚动信息:', scrollInfo);
};
</script>

<template>
  <div style="height: 500px;">
    <MdEditor 
      v-model="content" 
      @editor-scroll="handleEditorScroll" 
    />
  </div>
</template>

只读模式

<script setup lang="ts">
import { ref } from 'vue';
import { MdEditor } from '@kernelift/md-editor';

const content = ref('# 只读内容\n\n这段内容无法编辑。');
</script>

<template>
  <div style="height: 500px;">
    <MdEditor 
      v-model="content" 
      :options="{ readOnly: true }" 
    />
  </div>
</template>

使用 Expose 方法

<script setup lang="ts">
import { ref } from 'vue';
import { MdEditor } from '@kernelift/md-editor';

const content = ref('# Hello World');
const editorRef = ref();

const formatCode = () => {
  editorRef.value?.execMethods((editor) => {
    editor.getAction('editor.action.formatDocument')?.run();
  });
};

const insertText = () => {
  editorRef.value?.execMethods((editor) => {
    const position = editor.getPosition();
    editor.executeEdits('', [{
      range: {
        startLineNumber: position?.lineNumber || 1,
        startColumn: position?.column || 1,
        endLineNumber: position?.lineNumber || 1,
        endColumn: position?.column || 1
      },
      text: '\n\n## 新插入的标题'
    }]);
  });
};
</script>

<template>
  <div>
    <div style="margin-bottom: 10px;">
      <button @click="formatCode">格式化代码</button>
      <button @click="insertText">插入文本</button>
    </div>
    <div style="height: 500px;">
      <MdEditor 
        ref="editorRef"
        v-model="content" 
      />
    </div>
  </div>
</template>

强制使用 Monaco Editor 原生配置

<script setup lang="ts">
import { ref } from 'vue';
import { MdEditor } from '@kernelift/md-editor';
import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

const content = ref('# Hello World');

const forceOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
  value: '',
  language: 'markdown',
  theme: 'vs-dark',
  fontSize: 16,
  minimap: { enabled: true },
  scrollBeyondLastLine: false,
  renderLineHighlight: 'all',
  cursorBlinking: 'smooth',
  cursorSmoothCaretAnimation: 'on',
  smoothScrolling: true
};
</script>

<template>
  <div style="height: 500px;">
    <MdEditor 
      v-model="content" 
      :force-options="forceOptions" 
    />
  </div>
</template>

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | modelValue | 编辑器内容（v-model） | string | '' | | options | 编辑器配置选项 | EditorOptions | 见下方默认配置 | | forceOptions | 强制使用 Monaco Editor 原生配置（会覆盖 options） | IStandaloneEditorConstructionOptions | - | | actions | 自定义工具栏操作 | EditorAction[] | - |

EditorOptions

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | readonly | 是否只读 | boolean | false | | language | 编辑器语言 | string | 'markdown' | | theme | 编辑器主题（vs、vs-dark、hc-black） | string | 'vs' | | minimap | 是否显示缩略图 | boolean | false | | scrollbarSize | 滚动条大小 | number | 10 | | wordWrap | 自动换行模式 | 'off' \| 'on' \| 'wordWrapColumn' \| 'bounded' | 'on' | | automaticLayout | 自动布局 | boolean | true | | autoIndent | 自动缩进模式 | 'none' \| 'keep' \| 'brackets' \| 'advanced' \| 'full' | 'none' | | selectOnLineNumbers | 点击行号是否选中整行 | boolean | true | | roundedSelection | 选区是否圆角 | boolean | false | | readOnly | 是否只读 | boolean | false | | cursorStyle | 光标样式 | 'line' \| 'block' \| 'underline' \| 'line-thin' \| 'block-outline' \| 'underline-thin' | 'line' | | glyphMargin | 是否显示字形边缘 | boolean | true | | useTabStops | 是否使用 Tab 停止位 | boolean | false | | fontSize | 字体大小 | number | 16 |

Emits

| 事件名 | 说明 | 参数 | |--------|------|------| | update:modelValue | 内容变化时触发 | (value: string) | | editorScroll | 编辑器滚动时触发 | { height: number; top: number } |

Expose

| 方法名 | 说明 | 类型 | |--------|------|------| | monacoEditor | Monaco Editor 实例 | ShallowRef<monaco.editor.IStandaloneCodeEditor \| undefined> | | textValue | 编辑器内容（computed） | ComputedRef<string> | | execMethods | 执行 Monaco Editor 方法 | (fn: (editor: monaco.editor.IStandaloneCodeEditor) => void) => void |

类型定义

export interface EditorOptions {
  readonly?: boolean;
  language?: string;
  theme?: string;
  minimap?: boolean;
  scrollbarSize?: number;
  wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded' | undefined;
  automaticLayout?: boolean;
  autoIndent?: 'none' | 'keep' | 'brackets' | 'advanced' | 'full' | undefined;
  selectOnLineNumbers?: boolean;
  roundedSelection?: boolean;
  readOnly?: boolean;
  cursorStyle?: 'line' | 'block' | 'underline' | 'line-thin' | 'block-outline' | 'underline-thin' | undefined;
  glyphMargin?: boolean;
  useTabStops?: boolean;
  fontSize?: number;
  [key: string]: any;
}

export interface EditorAction {
  id: string;
  label: string;
  groupId: string;
  handler: () => void;
}

注意事项

1. 编辑器容器必须设置明确的高度，最小高度为 200px
2. 使用 forceOptions 时会完全覆盖默认配置，请谨慎使用
3. 编辑器内容变化会自动触发 update:modelValue 事件
4. 建议在组件销毁时手动清理编辑器实例（目前组件已自动处理）

依赖

• monaco-editor: ^0.52.0
• vue: ^3.5.22

许可证

GPL-3.0-only