導入
埋め込み画面でメモを選ぶと、タイトルとダウンロードボタンを含むコードを取得できます。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か下矢印を押すと本文の先頭へ移動します。本文の先頭で上矢印を押すとタイトルの末尾へ戻ります。IMEの変換確定では入力欄は変わりません。
空のリスト項目でEnterを押すと本文に戻ります。字下げした項目は先に1段階戻ります。この変更も取り消せます。
メモのオプション
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') | ブラウザでダウンロード。添付はリンクで保存 |
ブラウザ保存の例
現在のブラウザにメモを1件保存します。同じページに複数置く場合はキーを分けてください。サーバー保存、認証、権限確認は設置先で実装します。ブラウザデータを消すとメモも消えます。
保存内容を読み込めない場合は元のコピーを守るため自動保存を止めます。この状態で書いた内容はダウンロードしてください。
<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: 'ja',
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キーで登録ドメインの透かしを除去できます。保存とアップロードは設置先が管理します。