HTML WYSIWYG 편집기

콘텐츠 소스 코드를 즉시 생성하는 기능이 풍부한 온라인 WYSIWYG HTML 편집기입니다.

리치 텍스트 편집기에서 제목, 목록, 굵게 같은 서식을 적용하면 해당 HTML을 만들어 줍니다. 결과 HTML은 Prettier로 정리되어 아래 영역에 표시됩니다.

사용 순서

편집 영역에 글을 입력하고 상단 메뉴로 제목이나 목록 서식을 지정합니다.
편집이 끝나면 아래 영역에 정리된 HTML이 나타납니다.
복사 버튼으로 HTML을 가져갑니다.
작성한 내용은 브라우저에 저장되므로 다음에 열면 같은 내용이 그대로 나옵니다.

예시

편집기에 제목 Hey!와 문단 Welcome to this html wysiwyg editor를 넣으면 결과는 <h1>Hey!</h1>과 <p>Welcome to this html wysiwyg editor</p> 두 줄로 정리되어 나옵니다.

한계

편집기는 TipTap StarterKit의 기능만 제공하므로 표나 이미지 삽입은 없습니다. 편집기는 내용을 내부 문서 모델로 관리한 뒤 HTML로 다시 내보내므로, 편집기 모델에 없는 속성이나 태그는 결과에서 사라집니다. 결과 HTML은 Prettier 형식으로 정리되어 원래 줄바꿈과 다를 수 있습니다.

보안 주의

작성한 내용은 localStorage에 저장되므로 같은 브라우저를 쓰는 다른 사람도 열어 볼 수 있습니다. 공용 PC에서는 작업이 끝나면 내용을 모두 지우고, 민감한 문장은 편집기에 넣지 마세요.

배경 지식

WYSIWYG(What You See Is What You Get) 편집기는 사용자가 보는 화면을 직접 고치면 내부 문서 모델이 바뀌고, 그 모델을 HTML로 내보내는 구조입니다. 사용자는 태그를 몰라도 되지만, 결과 HTML은 편집기의 규칙에 맞게 정규화됩니다. 블로그 편집기나 이메일 작성 도구가 대표적이며, 저장된 본문 HTML은 편집기가 만든 형식이라는 점을 기억해야 합니다.

TipTap은 ProseMirror 기반의 편집기 라이브러리로, 문서를 노드 트리로 관리합니다. 제목, 문단, 목록, 굵게 같은 요소는 확장 기능으로 등록되며, StarterKit은 그 기본 확장 묶음입니다. 편집 결과는 getHTML로 얻어 상위 컴포넌트에 전달되고, 이 도구는 그 값을 Prettier의 HTML 파서로 정리해 보여 줍니다. Prettier는 태그의 의미를 바꾸지 않고 줄바꿈과 들여쓰기만 조정합니다.

자주 묻는 질문

편집기에서 만든 HTML을 직접 고쳐서 다시 넣을 수 있나요?

이 도구에는 HTML 소스를 직접 입력해 편집기에 넣는 기능이 없습니다. 결과를 고치려면 복사해서 코드 편집기에서 수정하고, 그 내용을 다른 곳에서 사용하세요.

굵은 글씨는 strong으로 나오나요, b로 나오나요?

TipTap 기본 설정에서는 굵게가 strong 태그로, 기울임이 em 태그로 저장됩니다. 두 태그는 강조라는 의미를 가지므로, 시각적인 스타일만 원한다면 CSS로 따로 처리하는 것이 맞습니다.

편집 내용이 사라지지 않게 하려면 어떻게 하나요?

입력한 내용은 자동으로 브라우저 저장소에 남아서 새로고침해도 유지됩니다. 하지만 브라우저 데이터를 지우거나 시크릿 창을 쓰면 사라지므로, 중요한 내용은 복사해서 따로 보관하세요.