Dee Editor

Dee Editor v2.6.0.0

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

드롭다운 메뉴바 · DOM API · MS Word 가져오기 · 라이선스 검증 · TypeScript 타입 · 별도 플러그인 번들 시스템

데모 바로가기

에디터 테스트

전체 기능을 활성화한 단독 에디터. 메뉴바·툴바·상태바·전체화면·MS Word 가져오기까지 모두 사용 가능합니다. 생성된 HTML 결과도 즉시 확인.

에디터 열기 →

게시판 데모

게시글 목록·작성·수정·삭제가 모두 동작하는 완전한 게시판. localStorage 기반 영구 저장. 작성 페이지에 Word 가져오기 기능이 통합되어 있습니다.

게시판 열기 →

튜토리얼

11개 섹션에 걸친 통합 예제. 기본 사용법, 옵션, 이미지, 표, 링크, 사용자 정의 툴바·플러그인, DOM API, 메뉴바, MS Word 가져오기, TypeScript 타입까지 다룹니다.

튜토리얼 →

DOM API 데모

본문 요소를 ID·선택자로 조회하고 속성·스타일·내용을 입출력하는 DOM API를 인터랙티브하게 체험. 폼 ↔ 에디터 데이터 양방향 흐름 시연.

DOM API 열기 →

Docx, Hwpx 가져오기

.docx(MS Word)와 .hwpx(한글) 파일을 외부 라이브러리 없이 클라이언트에서 변환. 단락·서식·표(셀 병합·음영·테두리)·목록·이미지·하이퍼링크 지원. 한 드롭존에서 확장자로 자동 분기, 드래그앤드롭·메뉴·툴바 진입.

Docx · Hwpx Import 열기 →

마크다운 뷰어 / 편집

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

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

설정 페이지

아이콘·툴바 UI 설정

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

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

메뉴바 설정

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

메뉴바 설정 →

메뉴 UI (클래식·리본)

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

메뉴 UI 비교 →

TypeScript 타입

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

타입 선언 보기 →

내장 플러그인 (9) · 외부 플러그인 (1)

'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) 로드.

추가 모듈

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 가져오기 (플러그인 필요)
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/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

빠른 시작 (CDN)

  • <link rel="stylesheet" href="dist/webeditor.min.css">
    <script src="dist/webeditor.min.js"></script>
    <!-- 선택: Word(.docx)/한글 HWPX(.hwpx) 가져오기 플러그인 -->
    <script src="dist/plugins/wordimport-native.min.js"></script>
    <script src="dist/plugins/hwpximport-native.min.js"></script>
    <script>
      const editor = new WebEditor('#editor', {
        menubar: true,
        plugins: ['format','image','table','link','wordimport']
      });
    </script>