📄 문서 가져오기 & 미리보기
외부 라이브러리 0 · 폐쇄망 OK
MS Word · 한글(HWP · HWPX) · 엑셀 · 파워포인트 · PDF 문서를 브라우저에서 100% 클라이언트로 변환해 본문에 가져옵니다(서버·네트워크·외부 라이브러리 0 → 폐쇄망 적합). 서식·표·이미지·도형·차트까지 재현하고, 가져온 그림은 uploadHandler 로 올려 본문이 부풀지 않습니다. 버튼은 하나 — 통합 "문서 가져오기" 가 확장자를 보고 알맞은 모듈을 고릅니다. 게시판 등에 첨부한 문서는 메뉴·툴바 없는 새창 미리보기로 즉시 열람합니다. 한글에서 복사해 붙여넣기도 원본 모양대로 들어옵니다.
데모 바로가기
에디터 테스트
전체 기능을 활성화한 단독 에디터. 메뉴바·툴바·상태바·전체화면과 문서 가져오기 6종(Word·HWP·HWPX·엑셀·PPT·PDF)·이미지 편집·도형·문서 배경·마크다운까지 모두 사용 가능합니다. 생성된 HTML 결과도 즉시 확인.
에디터 열기 →게시판 데모
게시글 목록·작성·수정·삭제가 모두 동작하는 완전한 게시판. localStorage 기반 영구 저장. 작성 페이지에 문서 가져오기가 통합되어 있고, 첨부한 문서·이미지는 [미리보기] 로 새 창에서 바로 봅니다(.docx · .hwp · .hwpx · .xlsx · .pptx · .pdf · .md).
게시판 열기 →튜토리얼
절마다 돌려 볼 수 있는 통합 예제. 기본 사용법, 옵션, 플러그인 선택, 툴바 커스터마이즈, 이미지 업로드, 커스텀 플러그인, 폼 연동, DOM API, 메뉴바·UI 컨트롤, 문서 가져오기(Word·HWP·HWPX·엑셀·PPT·PDF), TypeScript 타입, 다국어(i18n)까지 다룹니다.
튜토리얼 → 개발 매뉴얼 →DOM API 데모
본문 요소를 ID·선택자로 조회하고 속성·스타일·내용을 입출력하는 DOM API를 인터랙티브하게 체험. 폼 ↔ 에디터 데이터 양방향 흐름 시연.
DOM API 열기 →문서 가져오기 · 미리보기 (6종)
.docx(Word)·.hwp·.hwpx(한글)·.xlsx(엑셀)·.pptx(파워포인트)·.pdf(Beta)를 외부 라이브러리 없이 클라이언트에서 변환. 서식·표·이미지·도형·차트 재현, 드래그앤드롭·메뉴·툴바 진입(여러 파일을 놓으면 첫 문서만). 첨부 문서는 새창 미리보기로 즉시 열람.
마크다운 뷰어 / 편집
마크다운 문서를 편집 모드와 전체보기로 확인하는 확장팩(plugins:['markdown']). GFM 표·체크박스·코드블록 지원, .md 가져오기/내보내기(왕복). <script>·javascript: 링크 자동 차단.
이미지 편집 (DEXT Image 2.0 기본 탑재)
본문 이미지를 골라 자르기·크기·90º 회전/반전·모자이크·색 채우기로 편집하고 결과를 제자리에 되돌려 놓습니다. 붙일 것이 없습니다 — 이미지 더블클릭·툴바·메뉴바·이미지 아래 메뉴에서 열리고, 편집기는 처음 누를 때만 받아 옵니다. WebP 를 열고 저장하며, 저장은 에디터의 uploadHandler를 그대로 거칩니다. 토큰을 지정하면 2.0 도구(텍스트·도형·그리기·필터…)가 열립니다.
결재·신청 양식 엔진
표로 만든 양식의 칸에 필드·수식·검증을 얹는 확장팩(plugins:['approvalform']). 행 추가/삭제, 합계 자동 계산, 열람 모드. 이 위에 만든 전자결재 예제화면(기안문·지출결의서·휴가신청서·결재선)도 함께 들어 있습니다 — 서버 없이 동작.
설정 페이지
아이콘·툴바 UI 설정
툴바 아이콘의 표시·순서·1·2·3단 배치·그룹 구분선과 메뉴바 on/off·상태표시줄·에디터 너비를 시각적으로 구성해 config 파일로 저장합니다.
아이콘/툴바 설정 → 적용 데모 →내장 플러그인 · 확장팩 (문서 가져오기 6종 · 마크다운 · 양식 엔진)
dist/plugins/wordimport-native.js) 로드.dist/plugins/hwpimport-native.js) 로드.maxTableWidth. 별도 번들(dist/plugins/hwpximport-native.js) 로드.dist/plugins/xlsximport-native.js) 로드.dist/plugins/pptimport-native.js) 로드.dist/plugins/pdfimport-native.js) 로드..md 가져오기/내보내기(왕복), 위험 링크 차단. 별도 번들(dist/plugins/markdown-native.js) 로드.dist/plugins/approvalform.js) 로드.공개 API
| 메서드 | 설명 |
|---|---|
getHTML() | 에디터 HTML 반환 |
getSafeHTML() | 정제한 저장용 HTML (서버로 보낼 때) |
setHTML(html) | 에디터 HTML 설정 |
clear() | 내용 초기화 |
focus() | 에디터 포커스 |
on(event, fn) | 이벤트 리스너 등록 |
destroy() | 에디터 DOM·이벤트 제거 |
getAPIModelById(id) | 본문 요소 → APIModel 래핑 |
querySelector(sel) | 본문 내 첫 요소 조회 |
querySelectorAll(sel) | 본문 내 모든 요소 조회 |
importWordFile(file, opts) | .docx(Word) 가져오기 (플러그인 필요) |
importDocumentFile(file) | 확장자로 알맞은 가져오기를 고른다 (통합) |
importHwpFile(file, opts) | .hwp(한글 5.x) 가져오기 (플러그인 필요) |
importHwpxFile(file, opts) | .hwpx(한글) 가져오기 (플러그인 필요) |
importXlsxFile(file, opts) | .xlsx(엑셀) 가져오기 (플러그인 필요) |
importPptxFile(file, opts) | .pptx(파워포인트) 가져오기 (플러그인 필요) |
importPdfFile(file, opts) | .pdf 가져오기 — Beta (플러그인 필요) |
saveToHTML(name, opts) | 열람 화면과 같은 모양의 완결 HTML 로 저장 |
printDocument(opts) | 인쇄 · PDF 로 저장 (title = 파일 이름) |
setReadOnly(bool) | 읽기 전용 전환 |
setLanguage(lang) | UI 언어 런타임 전환 (ko·en·ja) |
watch(selector, fn) | 요소 단위 변경 감지 |
showMenuBar(bool) | 메뉴바 표시/숨김 |
showToolbar(bool) | 툴바 표시/숨김 |
showStatusBar(bool) | 상태바 표시/숨김 |
setFullscreen(bool) | 전체화면 토글 |
setUI(state) | UI 상태 일괄 설정 |
getUI() | 현재 UI 상태 조회 |
WebEditor.version | 버전 문자열 |
WebEditor.registerPlugin() | 외부 플러그인 등록 |
new WebEditor(el, { license }) | 라이선스 키 적용(초기화 옵션) |
단축키
| 단축키 | 기능 |
|---|---|
| Ctrl+B | 굵게 |
| Ctrl+I | 기울임 |
| Ctrl+U | 밑줄 |
| Ctrl+K | 링크 삽입 |
| Ctrl+F | 찾기/바꾸기 |
| Ctrl+Z / Ctrl+Y | 실행취소 / 다시실행 |
| Ctrl+N | 새 문서 |
| Ctrl+O | HTML 파일 열기 |
| Ctrl+S | HTML로 저장 |
| Ctrl+P | 인쇄 |
| F11 / Esc | 전체화면 진입/해제 |
| Tab (표 안) | 다음 셀로 이동 |
| Del (다중 셀 선택) | 선택된 셀 내용 일괄 삭제 |
소스 파일 구조
- 핵심 src/editor.js — Editor 클래스 (오케스트레이터 · 문서 가져오기 분기 · 저장/인쇄)
- 핵심 src/toolbar.js · src/ribbon.js — 클래식 툴바 · 리본 UI
- 핵심 src/menubar.js — 드롭다운 메뉴바 + About 다이얼로그
- 핵심 src/context-menu.js · src/inline-toolbar.js — 우클릭 메뉴 · 선택 영역 툴바
- 핵심 src/dom-api.js — WebEditorAPIModel (체이너블 DOM API · 변경 감지)
- 핵심 src/content-guard.js · src/autosave.js — 금칙어·개인정보 검사 · 자동 저장
- 핵심 src/paste/hwp-paste.js — 한글(HWP)에서 복사해 붙여넣기 보정
- 핵심 src/i18n.js · src/locales/ — 다국어(ko·en 내장 · ja 언어팩)
- 핵심 src/editor.css — 전체 스타일
- 라이선스 src/license/ — manager · validator(ECDSA 서명 검증) · domain-matcher · i18n · evaluation-modal
- 플러그인 src/plugins/ — format · image · table · link · emoji · video · sourceview · insert · find · docbg · shape
- 외부 플러그인 src/plugins/wordimport/ · hwpimport/ · hwpximport/ · xlsximport/ · pptimport/ · pdfimport/ · markdown/ · approvalform.js
- 외부 플러그인 src/plugins/_shared/ — ZIP·OLE 리더 · 압축 해제 · 그림 업로드 · 커서 위치 삽입 · 가져오기 문구(공용)
- 기타 assets/icons.svg — SVG 스프라이트 (90+ 심볼)
- 기타 dext-image/ — 이미지 편집기 DEXT Image 2.0 (기본 탑재 · 처음 쓸 때 로드)
- 기타 img/dee1.PNG · dee2.PNG · dee_gray.png — 로고 (밝은/어두운/무채색)
빌드 결과물 (dist/)
- UMD dist/webeditor.js — readable
- UMD dist/webeditor.min.js — minified (프로덕션, 약 506KB)
- ESM dist/webeditor.esm.js — 번들러용
- CSS dist/webeditor.css · webeditor.min.css — minified 약 62KB
- TS dist/webeditor.d.ts — TypeScript 타입 선언
- i18n dist/locales/ja(.min).js — 일본어 언어팩
- plugin dist/plugins/wordimport-native(.min).js — Word(.docx) 가져오기 (66KB)
- plugin dist/plugins/hwpimport-native(.min).js — 한글 HWP(.hwp) 가져오기 (59KB)
- plugin dist/plugins/hwpximport-native(.min).js — 한글 HWPX(.hwpx) 가져오기 (42KB)
- plugin dist/plugins/xlsximport-native(.min).js — 엑셀 XLSX(.xlsx) 가져오기 (68KB)
- plugin dist/plugins/pptimport-native(.min).js — 파워포인트 PPTX(.pptx) 가져오기 (73KB)
- plugin dist/plugins/pdfimport-native(.min).js — PDF(.pdf) 가져오기 · Beta (154KB)
- plugin dist/plugins/markdown-native(.min).js · markdown-engine(.min).js — 마크다운 뷰어/편집 · 변환 엔진 단독
- plugin dist/plugins/approvalform(.min).js — 결재·신청 양식 필드 엔진 (14KB)
빠른 시작
-
<link rel="stylesheet" href="dist/webeditor.min.css">
<script src="dist/webeditor.min.js"></script>
<!-- 선택: 문서 가져오기 플러그인(필요한 것만 로드) -->
<script src="dist/plugins/wordimport-native.min.js"></script>
<script src="dist/plugins/hwpimport-native.min.js"></script>
<script src="dist/plugins/hwpximport-native.min.js"></script>
<script src="dist/plugins/xlsximport-native.min.js"></script>
<script src="dist/plugins/pptimport-native.min.js"></script>
<script src="dist/plugins/pdfimport-native.min.js"></script>
<script>
const editor = new WebEditor('#editor', {
menubar: true,
plugins: ['format','image','table','link',
'wordimport','hwpimport','hwpximport','xlsximport','pptimport','pdfimport']
});
</script>