嵌入笔记编辑器

从嵌入笔记编辑器到浏览器存储的完整示例。

安装

在嵌入页面选择笔记,即可获得含标题框和下载按钮的代码。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初始标题和正文
langko、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 许可可移除已注册域名的水印。笔记存储和上传由你的网站管理。

下一篇: 快速开始 →