시작하기
바로 써보기
설치 전에 먼저 만져 보세요. 실제 편집기입니다. 입력하면 아래에 저장될 마크다운이 바뀝니다.
편집기를 불러오는 중…
설치
bash
npm install @newtil/editor기본 사용
html
<newtil-editor toolbar placeholder="핵심부터 적어 보세요. / 를 치면 블록 메뉴가 열립니다."></newtil-editor>
<script type="module">
import "@newtil/editor"; // <newtil-editor> 등록 + 스타일 자동 주입
const editor = document.querySelector("newtil-editor");
editor.value = "# Hello\n\n**마크다운** 편집기입니다."; // 마크다운 넣기
editor.addEventListener("change", (e) => {
console.log(e.detail.markdown); // 마크다운 문자열 — 저장용
console.log(e.detail.html); // HTML 문자열 — 미리보기용
});
</script>속성
html
<!-- 읽기 전용 뷰어 -->
<newtil-editor readonly value="# 보기만 가능"></newtil-editor>
<!-- 마크다운 원문 모드로 시작, 플로팅 툴바 끄기 -->
<newtil-editor mode="source" floating-toolbar="false"></newtil-editor>
<!-- 영어 문자열, 빈 줄 안내 문구 바꾸기 -->
<newtil-editor lang="en" empty-line-hint="Blank lines are not saved."></newtil-editor>전체 목록은 API › 속성.
언어 · 문자열
툴팁·메뉴·안내 문구는 한국어·영어를 내장한다. 언어는 lang 속성 → 조상 lang → <html lang> → 영어 순으로 정해진다. 일부만 바꾸려면 messages:
js
editor.messages = { emptyLineHint: "빈 줄은 저장되지 않아요." };이미지 업로드 연동
훅이 없으면 이미지가 data URL(base64) 로 본문에 박힌다. 실서비스에서는 업로드 훅을 둔다. 파일 선택·붙여넣기·끌어놓기 모두 같은 훅을 탄다.
js
editor.onImageUpload = async (file) => {
const form = new FormData();
form.append("file", file);
const res = await fetch("/api/upload", { method: "POST", body: form });
return (await res.json()).url; // "https://cdn.example.com/images/abc.jpg"
};그림판(캡처 위에 화살표·상자·글자)은 별도 훅 onDrawingSave·onDrawingLoad 를 쓴다 — 그림판 연동.
마크다운 모드
툴바 오른쪽 끝 버튼, 또는 코드로:
js
editor.mode = "source"; // 원문 textarea
editor.mode = "wysiwyg"; // 돌아오면 원문이 문서에 반영된다
editor.addEventListener("modechange", (e) => console.log(e.detail.mode));전환하는 순간에만 변환한다(라이브 동기화 없음). 마크다운 모드에서도 markdown getter 와 change 이벤트는 그대로 동작한다.
붙여넣기
붙여 넣은 글이 마크다운처럼 보이면(제목·인용·목록·펜스·표·굵게·링크·코드) 마크다운으로 해석한다(0.10.5). Shift 를 누른 붙여넣기는 글자 그대로.
빈 줄
마크다운에는 빈 문단이 없으므로 편집기도 만들지 않는다. 빈 문단에서 Enter 를 누르면 안내 말풍선이 뜬다(empty-line-hint 로 문구 변경, 빈 문자열이면 끔). 문단 간격은 보기 화면 CSS 의 몫이다. 자세한 규칙은 API › Enter · 빈 문단 정책.
높이 · 색
스타일은 Shadow DOM 안에 자동으로 들어간다. 높이는 호스트에 min-height 를, 색은 CSS 변수를 준다. 자세한 것은 테마.
css
newtil-editor { min-height: 420px; --color-primary: #16a34a; }