MetonaEditor v0.4.0 · TypeScript · 桌面端 Markdown 编辑器

Features

为什么选择 MetonaEditor

为桌面端场景精心打磨，每一项特性都经过充分测试。

TypeScript 源码

全模块 TypeScript 严格模式，完整类型导出，IDE 智能提示。无需额外安装 @types 包。

分屏实时预览

edit / split / preview 三模式切换，拖拽分隔条调整比例，双向比例同步滚动。

零运行时依赖

不依赖任何第三方运行时库，打包后单文件，UMD / ESM / CJS 三种格式开箱即用。

6 个预设插件

autoSave / exportTool / searchReplace / imagePaste / shortcutHelp / fileSystem，插件 v2 支持拓扑排序、异步、卸载。

主题 & i18n

4 套预设主题 + CSS 变量定制 + 实例级隔离。六种语言开箱即用（中 / 英 / 日 / 韩 / 法 / 德），支持远程加载翻译包。

内置语法高亮

零依赖轻量高亮器，js / ts / python / bash / css 等 16 个语言标识，代码块一行配置即自动着色。

XSS 安全防护

HTML 转义、危险协议过滤、属性级注入防护、sanitize 钩子、highlight 异常回退。多层防护，安全可靠。

性能与工程

字数/词数/行数差异增量统计、高亮规则缓存、大纲 O(n) 构建；826 单测 + Playwright 真实浏览器冒烟，CI 并行 4 job。

Quick Start

三行代码即可使用

npm / CDN / 本地文件三种方式，TypeScript / ESM / CJS 全面支持。

// 方式一：npm 安装（推荐）
npm install @metona-team/metona-editor

// ES Module / TypeScript
import MeEditor from '@metona-team/metona-editor';

// CommonJS
const MeEditor = require('@metona-team/metona-editor');

// 方式二：CDN 引入
<script src="https://cdn.jsdelivr.net/npm/@metona-team/metona-editor@0.4.0/dist/metona-editor.min.js"></script>

// 方式三：本地文件
<script src="./dist/metona-editor.min.js"></script>

// 创建实例
const editor = MeEditor.create('#editor', {
  value: '# 你好，世界',
  mode: 'split',
  theme: 'dark',
  plugins: ['autoSave', 'searchReplace']
});

// 链式 API
editor.exec('bold').exec('h1').focus();

API Reference

API 速览

内容操作

getValue() string
setValue(md) this
getHTML() string
insert(text) this
wrap(before, after) this
replaceAll(search, rep) number

光标与选区

getSelectedText() string
getCursorPosition() {line,column}
setCursorPosition(l, c) this
selectLine(n) / selectAll() this
toggleFloatingToolbar() this

命令执行

exec(action) this
undo() / redo() this
canUndo() / canRedo() boolean

模式与全屏

setMode(mode) this
getMode() string
toggleFullscreen() this
toggleZen() this

事件与插件

on(event, fn) unsub
off(event, fn) this
use(plugin) this
unuse(name) this
addToolbarButton(cfg) this

主题与语言

setTheme(name) this
getTheme() string
setLocale(loc) this
getLocale() string
t(key, params) string

统计与状态

getStats() Stats
getStatus() Status
enable() / disable() this
refresh() this
destroy() void

TypeScript 重构 · 零依赖
桌面端 Markdown 编辑器

立即体验