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

Features

为什么选择 MetonaEditor

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

真正的零依赖

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

分屏实时预览

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

内置轻量解析器

自研 CommonMark 子集 + GFM 扩展解析器，覆盖标题、表格、任务列表、代码块等常用语法，也可整体替换。

易扩展的插件系统

内置自动保存、导出、查找替换插件；自定义插件只需实现 install / destroy 两个生命周期钩子。

主题与国际化

基于 CSS 变量的主题系统，内置亮 / 暗 / 暖色三套主题；中英双语开箱即用，支持 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 编辑器

立即体验