MetonaTeam/MetonaEditor
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(site): add docs.html, update demo and index for v0.1.3

Browse Source 
- docs.html: comprehensive single-page documentation with sidebar navigation
  covering all APIs, config, events, plugins, themes, i18n, and syntax reference
- demo.html: add readOnly toggle, emoji/new syntax demo content,
  imagePaste plugin, refresh API button, docs link
- index.html: add docs link to nav and footer
This commit is contained in:
thzxx
2026-07-23 21:08:12 +08:00
parent 70eb71623f
commit 71ddda1155
3 changed files with 673 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/demo.html
+37 -18
View File
@@ -156,23 +156,28 @@
<body>
<div class="wrap">
<div class="topbar">
<h1>
MetonaEditor 功能演示
<a href="index.html">← 返回首页</a>
</h1>
<div class="controls">
<span class="ctrl-label">主题</span>
<div class="ctrl-group" id="themeCtrl">
<button class="ctrl-btn" data-theme="light">亮色</button>
<button class="ctrl-btn" data-theme="dark">暗色</button>
<button class="ctrl-btn" data-theme="warm">暖色</button>
</div>
<span class="ctrl-label">语言</span>
<div class="ctrl-group" id="localeCtrl">
<button class="ctrl-btn" data-locale="zh-CN">中文</button>
<button class="ctrl-btn" data-locale="en-US">English</button>
</div>
</div>
<h1>
MetonaEditor 功能演示
<a href="index.html">← 返回首页</a>
<a href="docs.html">📖 文档</a>
</h1>
<div class="controls">
<span class="ctrl-label">主题</span>
<div class="ctrl-group" id="themeCtrl">
<button class="ctrl-btn" data-theme="light">亮色</button>
<button class="ctrl-btn" data-theme="dark">暗色</button>
<button class="ctrl-btn" data-theme="warm">暖色</button>
</div>
<span class="ctrl-label">语言</span>
<div class="ctrl-group" id="localeCtrl">
<button class="ctrl-btn" data-locale="zh-CN">中文</button>
<button class="ctrl-btn" data-locale="en-US">English</button>
</div>
<span class="ctrl-label">模式</span>
<div class="ctrl-group" id="readonlyCtrl">
<button class="ctrl-btn" id="btnReadOnly">只读</button>
</div>
</div>
</div>
<div class="status-bar" id="statusBar">
@@ -214,6 +219,7 @@
<button class="api-btn success" data-api="exportHTML">导出 .html</button>
<button class="api-btn" data-api="restoreDraft">恢复草稿</button>
<button class="api-btn" data-api="clearDraft">清空草稿</button>
<button class="api-btn" data-api="refresh">refresh()</button>
<button class="api-btn danger" data-api="destroy">destroy()</button>
</div>
</div>
@@ -299,6 +305,8 @@
'## 行内格式',
'',
'- 支持 **加粗**、*斜体*、~~删除线~~、`行内代码`',
'- 高亮 ==重点标记== 、上标 x^2^、下标 H~2~O',
'- Emoji 短码 :smile: :rocket: :fire: :tada:',
'- 支持 [链接](https://example.com) 与 ![图片](https://placehold.co/100)',
'',
'## 表格',
@@ -328,7 +336,7 @@
'',
'右侧事件流会实时显示编辑器触发的事件。'
].join('\n'),
plugins: ['autoSave', 'exportTool', 'searchReplace'],
plugins: ['autoSave', 'exportTool', 'searchReplace', 'imagePaste'],
onChange: (val) => { logEvent('change', val); updateStatus(); },
onInput: (val) => logEvent('input', val),
onFocus: () => logEvent('focus'),
@@ -364,6 +372,16 @@
});
document.querySelector('#localeCtrl [data-locale="zh-CN"]').classList.add('active');
// 只读切换
document.getElementById('btnReadOnly').addEventListener('click', () => {
const isRO = editor.isReadOnly();
editor.setReadOnly(!isRO);
document.getElementById('btnReadOnly').classList.toggle('active', !isRO);
document.getElementById('btnReadOnly').textContent = !isRO ? '只读中' : '只读';
log('setReadOnly', String(!isRO));
updateStatus();
});
// API 控制台
document.querySelector('.api-grid').addEventListener('click', (e) => {
const btn = e.target.closest('[data-api]');
@@ -388,6 +406,7 @@
case 'exportHTML': editor.exportHTML('demo.html', { title: 'MetonaEditor 导出' }); log('export', '已触发 .html 下载'); break;
case 'restoreDraft': editor.restoreDraft(); log('restoreDraft', '已从 localStorage 恢复草稿'); break;
case 'clearDraft': editor.clearDraft(); log('clearDraft', '已清空草稿'); break;
case 'refresh': editor.refresh(); log('refresh', '强制刷新预览'); break;
case 'destroy': editor.destroy(); log('destroy', '编辑器已销毁'); updateStatus(); break;
}
});