설치
임베드 화면에서 '메모'를 고르면 제목 입력란과 다운로드 버튼을 포함한 설치 코드가 나옵니다. 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를 눌러도 입력란이 바뀌지 않습니다.
빈 목록 항목에서 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('md')는 문자열을 돌려주고 download('md')는 파일을 내려받습니다. 지원 형식은 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: 'ko',
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 라이선스 키를 쓰면 워터마크가 사라집니다. 메모 저장과 업로드는 설치한 사이트에서 관리합니다.