MetonaEditor — 现代化零依赖 Markdown 编辑器

Features

为什么选择 MetonaEditor

为中文场景与现代 Web 应用而生，每一项特性都经过精心打磨。

真正的零依赖

整个库不依赖任何第三方运行时，打包后单文件可直接 <script> 引入，也支持 npm 安装。

分屏实时预览

编辑 / 分屏 / 预览三模式自由切换，分屏模式下可拖拽分隔条调整比例，滚动自动同步。

内置增强解析器

自研 CommonMark + GFM 扩展解析器，覆盖数学公式、脚注、嵌套列表、定义列表、表格对齐、任务列表等丰富语法，也可整体替换。

易扩展的插件系统

插件 v2 支持依赖拓扑排序、异步加载、动态卸载；自定义快捷键与工具栏，右键上下文菜单。

主题与国际化

实例级主题隔离、外部跟随同步、主题继承，内置 4 套预设；中英双语开箱即用，支持 RTL 布局。

XSS 安全防护

所有文本经 HTML 转义，URL 过滤 javascript / vbscript / file 等危险协议，并提供 sanitize 钩子。

Quick Start

三行代码即可使用

CDN 引入或 npm 安装，都只需要极少的代码。

<!-- 浏览器直接引入 -->
	<script src="../dist/metona-editor.js"></script>
	<div id="editor"></div>
	<script>
	  const editor = MeEditor.create('#editor', {
	    mode: 'split',
	    value: '# 你好，世界',
	    plugins: ['autoSave', 'exportTool']
	  });
	</script>

	// 或 npm 安装
	import MeEditor from '@metona-team/metona-editor';

	const editor = MeEditor.create(container, {
	  mode: 'split',
	  theme: 'dark',
	  onChange: (value) => console.log(value)
	});

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

API Reference

API 速览

完整 API 文档请参考 README.md，以下是最常用的方法。

内容操作

getValue() string
setValue(md) this
getHTML() string
insert(text) this
wrap(before, after) this
focus() / blur() this

命令执行

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

模式与全屏

setMode(mode) this
getMode() string
toggleFullscreen() this
isFullscreen() boolean

事件与插件

on(event, fn) unsub
off(event, fn) void
use(plugin) this
getPlugins() Plugin[]
addToolbarButton(cfg) this

统计与状态

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

静态 API

MeEditor.create(el, opts) Editor
MeEditor.use(plugin) void
MeEditor.setTheme(name) void
MeEditor.setLocale(name) void
MeEditor.on(hook, fn) void

Keyboard Shortcuts

快捷键

Mac 用户请将 Ctrl 替换为 Cmd。

加粗

CtrlB

斜体

CtrlI

行内代码

CtrlE

下划线

CtrlU

插入链接

CtrlK

标题 1/2/3

Ctrl1/2/3

引用

CtrlQ

撤销

CtrlZ

重做

CtrlShift+Z

保存

CtrlS

查找

CtrlF

查找替换

CtrlH

缩进 / 反缩进

TabShift+Tab

下一个匹配

Enter

上一个匹配

ShiftEnter

关闭面板

Esc

现代化零依赖的
Markdown 编辑器

立即体验