安装
在嵌入页面选择笔记,即可获得含标题框和下载按钮的代码。mode: 'notes' 隐藏工具栏,开启块菜单和字数统计。显式指定的 toolbar、handles、writingMode 优先。
<div id="my-note"></div>
<script src="https://typdit.com/embed/v1.js"></script>
<script>
const note = Typdit.create(document.getElementById('my-note'), {
mode: 'notes',
lang: 'en',
});
</script>标题与正文之间移动
在标题中按 Enter 或下箭头可移到正文开头,在正文最开头按上箭头可返回标题末尾。输入法确认文字时不会切换输入框。
在空列表项中按 Enter 可结束列表并返回段落。缩进项会先向外移动一级,此操作也可以撤销。
笔记选项
mode: 'notes' | 含标题和下载的笔记编辑器 |
title / snapshot | 初始标题和正文 |
lang | ko、en、ja、zh-cn、zh-tw,默认 en |
downloads: false | 隐藏下载按钮,笔记模式默认显示 |
onNoteChange({ title, snapshot }) | 标题或正文变化时传递两者,用于保存标题 |
保存和下载
onNoteChange 在标题或正文变化时传递 { title, snapshot },保存两者才能保留标题。getNote() 读取,setNote(note) 恢复。原有 onChange(snapshot) 只传正文。export(format) 返回字符串,download(format) 下载文件。支持 md、html、txt。
getNote() / setNote(note) | 用 { title, snapshot } 读取和加载 |
export('md' | 'html' | 'txt') | 将标题和正文导出为字符串,含当前表格输入 |
download('md' | 'html' | 'txt') | 在浏览器下载文件,附件保存为链接 |
浏览器存储示例
此示例在当前浏览器保存一篇笔记。同一页面的多篇笔记请使用不同的存储键。服务器存储、登录和权限检查由你的网站实现。清除浏览器数据也会删除笔记。
若无法读取已保存内容,示例会停止自动保存以保护原副本。此时请下载新写的内容。
<div id="my-note"></div>
<p id="save-error" role="alert" hidden>保存失败,请在离开前下载副本。</p>
<script src="https://typdit.com/embed/v1.js"></script>
<script>
const key = 'my-site:note:meeting';
const warning = document.getElementById('save-error');
let saved = null;
let canSave = true;
try {
saved = JSON.parse(localStorage.getItem(key) || 'null');
if (saved && (typeof saved.title !== 'string' ||
saved.snapshot?.version !== 1 || typeof saved.snapshot.text !== 'string' ||
!Array.isArray(saved.snapshot.blocks) || !Array.isArray(saved.snapshot.marks))) {
throw new Error('Invalid saved note');
}
} catch {
saved = null;
canSave = false;
warning.hidden = false;
}
const note = Typdit.create(document.getElementById('my-note'), {
mode: 'notes',
lang: 'zh-cn',
title: saved?.title || '',
snapshot: saved?.snapshot,
onNoteChange(value) {
if (!canSave) return;
try {
localStorage.setItem(key, JSON.stringify(value));
warning.hidden = true;
} catch { warning.hidden = false; }
},
});
</script>许可和存储
无需密钥即可使用。有效的 Plus 许可可移除已注册域名的水印。笔记存储和上传由你的网站管理。