Dee Editor

Dee Editor v2.6.7.2

공지사항 · 보도자료 · 게시판용 WYSIWYG 에디터 — 순수 HTML/CSS/JS, 외부 의존성 없음

클래식·리본 UI · DOM API · Word·한글(HWP·HWPX)·엑셀·PPT·PDF 가져오기 & 미리보기 · 이미지 편집(DEXT Image 2.0 기본 탑재) · 다국어(ko·en·ja) · 라이선스 검증 · TypeScript 타입

📄 문서 가져오기 & 미리보기

외부 라이브러리 0 · 폐쇄망 OK

MS Word · 한글(HWP · HWPX) · 엑셀 · 파워포인트 · PDF 문서를 브라우저에서 100% 클라이언트로 변환해 본문에 가져옵니다(서버·네트워크·외부 라이브러리 0 → 폐쇄망 적합). 서식·표·이미지·도형·차트까지 재현하고, 가져온 그림은 uploadHandler 로 올려 본문이 부풀지 않습니다. 버튼은 하나 — 통합 "문서 가져오기" 가 확장자를 보고 알맞은 모듈을 고릅니다. 게시판 등에 첨부한 문서는 메뉴·툴바 없는 새창 미리보기로 즉시 열람합니다. 한글에서 복사해 붙여넣기도 원본 모양대로 들어옵니다.

DOCX MS Word
단락·서식·표(병합·음영)·목록·이미지·하이퍼링크
HWP 한글 5.xv2.6.7
바이너리 .hwp 를 브라우저에서 직접 — 서식·표(캡션)·그림·도장/서명·제목 상자·각주. 한글 설치 불필요
HWPX 한글
표(병합·테두리/배경)·서식·도형(인라인 SVG)·이미지·목차·페이지 나눔
XLSX 엑셀
시트→표 변환·셀 병합·서식(통화·날짜)·그리기 개체·확인란·시트 탭
PPTX 파워포인트
슬라이드 절대배치 렌더·도형·차트·테마색·표·이미지
PDF 편집 가능한 본문으로v2.6.7Beta
문단·제목·목록·표·그림으로 되살림 · 괘선 서식·중첩 표 · 암호 문서 · 자체 엔진(Type 1) + DEXT-PDF 연동(Type 2)
게시판 첨부·미리보기 → 문서 가져오기 체험(에디터) →

데모 바로가기

에디터 테스트

전체 기능을 활성화한 단독 에디터. 메뉴바·툴바·상태바·전체화면과 문서 가져오기 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)를 외부 라이브러리 없이 클라이언트에서 변환. 서식·표·이미지·도형·차트 재현, 드래그앤드롭·메뉴·툴바 진입(여러 파일을 놓으면 첫 문서만). 첨부 문서는 새창 미리보기로 즉시 열람.

6종 가져오기 체험 → Word·HWPX·엑셀·PPT 데모 →

마크다운 뷰어 / 편집

마크다운 문서를 편집 모드와 전체보기로 확인하는 확장팩(plugins:['markdown']). GFM 표·체크박스·코드블록 지원, .md 가져오기/내보내기(왕복). <script>·javascript: 링크 자동 차단.

마크다운 뷰어 열기 → 에디터 통합 데모 →

이미지 편집 (DEXT Image 2.0 기본 탑재)

본문 이미지를 골라 자르기·크기·90º 회전/반전·모자이크·색 채우기로 편집하고 결과를 제자리에 되돌려 놓습니다. 붙일 것이 없습니다 — 이미지 더블클릭·툴바·메뉴바·이미지 아래 메뉴에서 열리고, 편집기는 처음 누를 때만 받아 옵니다. WebP 를 열고 저장하며, 저장은 에디터의 uploadHandler를 그대로 거칩니다. 토큰을 지정하면 2.0 도구(텍스트·도형·그리기·필터…)가 열립니다.

이미지 편집 열기 → 본문 이미지 일괄 리사이즈 →

결재·신청 양식 엔진

표로 만든 양식의 칸에 필드·수식·검증을 얹는 확장팩(plugins:['approvalform']). 행 추가/삭제, 합계 자동 계산, 열람 모드. 이 위에 만든 전자결재 예제화면(기안문·지출결의서·휴가신청서·결재선)도 함께 들어 있습니다 — 서버 없이 동작.

양식 엔진 열기 → 전자결재 예제 →

모바일 UI · 사용자 도움말

좁은 화면에서의 툴바 배열과 터치 동작을 확인하는 모바일 UI 데모, 그리고 최종 사용자에게 그대로 보여 줄 수 있는 사용자 도움말(기능별 사용법·단축키·문서 가져오기 안내).

모바일 UI → 사용자 도움말 →

설정 페이지

아이콘·툴바 UI 설정

툴바 아이콘의 표시·순서·1·2·3단 배치·그룹 구분선과 메뉴바 on/off·상태표시줄·에디터 너비를 시각적으로 구성해 config 파일로 저장합니다.

아이콘/툴바 설정 → 적용 데모 →

메뉴바 설정

상단 드롭다운 메뉴(파일·편집·…)의 메뉴·항목·순서·구분선을 시각적으로 구성하고 menubar config 파일로 저장합니다(미리보기 제공).

메뉴바 설정 →

메뉴 UI (클래식·리본)

클래식(메뉴바+툴바)과 리본(탭 + 큰 라벨 아이콘 카드) 두 디자인을 한 화면에서 비교하고 런타임 전환을 시험합니다.

메뉴 UI 비교 →

TypeScript 타입

완전한 타입 선언 파일(.d.ts)을 제공합니다. IDE 자동완성 및 타입 검사가 지원됩니다.

타입 선언 보기 →

내장 플러그인 · 확장팩 (문서 가져오기 6종 · 마크다운 · 양식 엔진)

'format'
Bold·Italic·Underline·취소선·위/아래첨자·색상·크기·정렬·목록·단락스타일 등 핵심 서식
'image'
이미지 파일선택(삽입 전 미리보기)·클립보드 붙여넣기·드래그앤드롭·클릭 리사이즈·캡션/대체 텍스트 · PNG·JPEG·GIF·WebP·BMP·SVG·AVIF · 업로드 전 자동 축소 · 이미지 편집(DEXT Image 2.0)
'table'
10×10 격자 피커·Tab 셀 이동·다중 셀 선택·셀 병합·음영·코너 핸들 리사이즈·우클릭 컨텍스트 메뉴
'link'
하이퍼링크 삽입·수정·해제 (Ctrl+K)
'emoji'
이모티콘 팔레트 — 8카테고리 588개
'video'
YouTube·Vimeo·mp4 동영상 삽입
'sourceview'
HTML 소스 보기·편집·미리보기 탭 + 인쇄
'insert'
특수기호(270개)·구분선·인용구·코드블록·날짜시간 삽입
'find'
찾기/바꾸기 — 대소문자·단어단위 옵션
'docbg'
문서 배경 — 편집 영역의 배경 그림·배경색·반복 방식 설정/제거 (그림은 base64 또는 업로드)
'shape'
도형 삽입 — 선·기본 도형·화살표·글상자, 크기 조절·색 · 본문에 그대로 저장(SVG)
'wordimport' 외부
MS Word(.docx) 가져오기 — 단락·서식·표(병합·음영·tblGrid)·목록·이미지·하이퍼링크. 별도 번들(dist/plugins/wordimport-native.js) 로드.
'hwpimport' 외부v2.6.7
한글 HWP(.hwp · 5.0.x~5.1.x) 가져오기 — 글자/문단 서식·표(병합·캡션)·그림·도장/서명·제목 상자(묶음 도형)·각주. HWPX 와 별개의 엔진(OLE 복합 문서·압축 해제 자체 구현). 3.0·암호 문서는 까닭을 알리고 멈춤. 별도 번들(dist/plugins/hwpimport-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) 로드.
'pdfimport' 외부v2.6.7Beta
PDF(.pdf)를 편집 가능한 본문으로 — 문단·제목·목록·표(괘선 서식·중첩 표)·그림, 두 단 순서, 머리말/꼬리말 제거, 스캔 쪽은 그림, 암호 문서. Type 1 자체 파서 + Type 2 DEXT-PDF 연동(글자 강조·증명서 바탕 그림 빼기). 별도 번들(dist/plugins/pdfimport-native.js) 로드.
'markdown' 외부
마크다운 뷰어/편집 — GFM 표·체크박스·코드블록, .md 가져오기/내보내기(왕복), 위험 링크 차단. 별도 번들(dist/plugins/markdown-native.js) 로드.
'approvalform' 외부
결재·신청 양식 필드 엔진 — 칸 필드·수식·검증·행 추가/삭제·열람 모드. 별도 번들(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+OHTML 파일 열기
Ctrl+SHTML로 저장
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>