📄 문서 가져오기 & 미리보기
외부 라이브러리 0 · 폐쇄망 OKMS Word · 한글 · 엑셀 · 파워포인트 4대 문서를 브라우저에서 100% 클라이언트로 변환해 본문에 가져옵니다(서버·네트워크·외부 라이브러리 0 → 폐쇄망 적합). 서식·표·이미지·도형·차트까지 재현하며, 게시판 등에 첨부한 문서는 메뉴·툴바 없는 새창 미리보기로 즉시 열람합니다.
DOCX MS Word
단락·서식·표(병합·음영)·목록·이미지·하이퍼링크
HWPX 한글
표(병합·테두리/배경)·서식·도형 텍스트·이미지
XLSX 엑셀
시트→표 변환·셀 병합·서식(통화·날짜)·시트 탭
PPTX 파워포인트
슬라이드 절대배치 렌더·도형·차트·테마색·표·이미지
데모 바로가기
에디터 테스트
전체 기능을 활성화한 단독 에디터. 메뉴바·툴바·상태바·전체화면·MS Word 가져오기까지 모두 사용 가능합니다. 생성된 HTML 결과도 즉시 확인.
에디터 열기 →게시판 데모
게시글 목록·작성·수정·삭제가 모두 동작하는 완전한 게시판. localStorage 기반 영구 저장. 작성 페이지에 Word 가져오기 기능이 통합되어 있습니다.
게시판 열기 →튜토리얼
21개 절에 걸친 통합 예제. 기본 사용법, 옵션, 플러그인 선택, 툴바 커스터마이즈, 이미지 업로드, 커스텀 플러그인, 폼 연동, DOM API, 메뉴바·UI 컨트롤, 문서 가져오기(Word·한글·엑셀·PPT), TypeScript 타입, 다국어(i18n)까지 다룹니다.
튜토리얼 →DOM API 데모
본문 요소를 ID·선택자로 조회하고 속성·스타일·내용을 입출력하는 DOM API를 인터랙티브하게 체험. 폼 ↔ 에디터 데이터 양방향 흐름 시연.
DOM API 열기 →문서 가져오기 · 미리보기 (4종)
.docx(Word)·.hwpx(한글)·.xlsx(엑셀)·.pptx(파워포인트)를 외부 라이브러리 없이 클라이언트에서 변환. 서식·표·이미지·도형·차트 재현, 드래그앤드롭·메뉴·툴바 진입. 첨부 문서는 새창 미리보기로 즉시 열람.
마크다운 뷰어 / 편집
마크다운 문서를 편집 모드와 전체보기로 확인하는 확장팩(plugins:['markdown']). GFM 표·체크박스·코드블록 지원, .md 가져오기/내보내기(왕복). <script>·javascript: 링크 자동 차단.
설정 페이지
아이콘·툴바 UI 설정
툴바 아이콘의 표시·순서·1·2·3단 배치·그룹 구분선과 메뉴바 on/off·상태표시줄·에디터 너비를 시각적으로 구성해 config 파일로 저장합니다.
아이콘/툴바 설정 → 적용 데모 →내장 플러그인 · 문서 가져오기 플러그인 (Word · 한글 · 엑셀 · PPT)
'format'
Bold·Italic·Underline·취소선·위/아래첨자·색상·크기·정렬·목록·단락스타일 등 핵심 서식
'image'
이미지 파일선택·클립보드 붙여넣기·드래그앤드롭·클릭 리사이즈
'table'
10×10 격자 피커·Tab 셀 이동·다중 셀 선택·셀 병합·음영·코너 핸들 리사이즈·우클릭 컨텍스트 메뉴
'link'
하이퍼링크 삽입·수정·해제 (Ctrl+K)
'emoji'
이모티콘 팔레트 — 8카테고리 588개
'video'
YouTube·Vimeo·mp4 동영상 삽입
'sourceview'
HTML 소스 보기·편집·미리보기 탭 + 인쇄
'insert'
특수기호(270개)·구분선·인용구·코드블록·날짜시간 삽입
'find'
찾기/바꾸기 — 대소문자·단어단위 옵션
'wordimport' 외부
MS Word(.docx) 가져오기 — 단락·서식·표(병합·음영·tblGrid)·목록·이미지·하이퍼링크. 별도 번들(
dist/plugins/wordimport-native.js) 로드.'hwpximport' 외부
한글 HWPX(.hwpx) 가져오기 — 단락·서식·표(병합·테두리/배경·셀 너비/높이)·도형 안 텍스트. 옵션
maxTableWidth. 별도 번들(dist/plugins/hwpximport-native.js) 로드.'xlsximport' 외부
엑셀 XLSX(.xlsx) 가져오기 — 시트→표 변환·셀 병합·서식(통화·날짜·천단위)·변별 테두리·시트 탭. 별도 번들(
dist/plugins/xlsximport-native.js) 로드.'pptimport' 외부
파워포인트 PPTX(.pptx) 가져오기 — 슬라이드 절대배치 렌더·벡터 도형·차트·테마색·표·이미지(EMF 근사)·플레이스홀더 상속. 별도 번들(
dist/plugins/pptimport-native.js) 로드.추가 모듈
MenuBar
7개 그룹 드롭다운 메뉴(파일·편집·보기·삽입·서식·도구·도움말) · 항목별 SVG 아이콘 · 단축키 · 메뉴 옆 피커
DOM API
WebEditorAPIModel — 본문 요소 조회·속성/스타일/내용 입출력, 체이너블 메서드 30+
License
HMAC-SHA256 라이선스 검증·도메인 매칭·평가판 모달·i18n (ko/en)
About Dialog
에디터 정보 다이얼로그 — 로고·버전·라이선스 상태·도메인·만료일 표시
공개 API
| 메서드 | 설명 |
|---|---|
getHTML() | 에디터 HTML 반환 |
setHTML(html) | 에디터 HTML 설정 |
clear() | 내용 초기화 |
focus() | 에디터 포커스 |
on(event, fn) | 이벤트 리스너 등록 |
destroy() | 에디터 DOM·이벤트 제거 |
getAPIModelById(id) | 본문 요소 → APIModel 래핑 |
querySelector(sel) | 본문 내 첫 요소 조회 |
querySelectorAll(sel) | 본문 내 모든 요소 조회 |
importWordFile(file, opts) | .docx(Word) 가져오기 (플러그인 필요) |
importHwpxFile(file, opts) | .hwpx(한글) 가져오기 (플러그인 필요) |
importXlsxFile(file, opts) | .xlsx(엑셀) 가져오기 (플러그인 필요) |
importPptxFile(file, opts) | .pptx(파워포인트) 가져오기 (플러그인 필요) |
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/menubar.js — 7개 그룹 드롭다운 메뉴바 + About 다이얼로그
- 핵심 src/dom-api.js — WebEditorAPIModel (체이너블 DOM API)
- 핵심 src/editor.css — 전체 스타일 (28KB)
- 라이선스 src/license/manager.js + validator.js + domain-matcher.js + i18n.js + evaluation-modal.js
- 플러그인 src/plugins/format.js
- 플러그인 src/plugins/image.js
- 플러그인 src/plugins/table.js
- 플러그인 src/plugins/link.js
- 플러그인 src/plugins/emoji.js
- 플러그인 src/plugins/video.js
- 플러그인 src/plugins/sourceview.js
- 플러그인 src/plugins/insert.js
- 플러그인 src/plugins/find.js
- 외부 플러그인 src/plugins/wordimport/ — index.js · core/ · engines/ · ui/
- 기타 assets/icons.svg — SVG 스프라이트 (60+ 심볼)
- 기타 img/dee1.PNG · dee2.PNG · dee_gray.png — 로고 (밝은/어두운/무채색)
빌드 결과물 (dist/)
- UMD dist/webeditor.js — readable
- UMD dist/webeditor.min.js — minified (프로덕션, 151KB)
- ESM dist/webeditor.esm.js — 번들러용
- CSS dist/webeditor.css — readable
- CSS dist/webeditor.min.css — minified (21KB)
- TS dist/webeditor.d.ts — TypeScript 타입 선언
- plugin dist/plugins/wordimport-native.js — Word(.docx) 가져오기 (49KB)
- plugin dist/plugins/wordimport-native.min.js — minified (21KB)
- plugin dist/plugins/hwpximport-native.js — 한글 HWPX(.hwpx) 가져오기
- plugin dist/plugins/hwpximport-native.min.js — minified
- plugin dist/plugins/xlsximport-native(.min).js — 엑셀 XLSX(.xlsx) 가져오기
- plugin dist/plugins/pptimport-native(.min).js — 파워포인트 PPTX(.pptx) 가져오기
빠른 시작 (CDN)
-
<link rel="stylesheet" href="dist/webeditor.min.css">
<script src="dist/webeditor.min.js"></script>
<!-- 선택: Word·한글·엑셀·PPT 가져오기 플러그인(필요한 것만 로드) -->
<script src="dist/plugins/wordimport-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>
const editor = new WebEditor('#editor', {
menubar: true,
plugins: ['format','image','table','link','wordimport','hwpximport','xlsximport','pptimport']
});
</script>