v2.4.0 출시 · MS Word 가져오기 신규 지원

게시판 에디터,
이제 Dee Editor로
완성하세요

외부 라이브러리 의존성 없이 WYSIWYG 편집·표·이미지·동영상·Word 가져오기까지. 공지사항·보도자료·게시판에 최적화된 순수 JavaScript 에디터입니다.

지금 체험하기 무료 다운로드
✅ 외부 의존성 0개 🔒 도메인 라이선스 ♿ WCAG 2.1 AA
이미지 업로드 완료
에디터에 즉시 삽입됨
✏️
Dee Editor
WYSIWYG
리치텍스트 에디터
40+ 툴바 기능 표 · 이미지 · 링크 WCAG 2.1 AA
☁️
덱스트업로드
기업용 파일
업로드 솔루션
멀티파일 업로드 드래그앤드롭 썸네일 미리보기
SYNERGY
콘텐츠 작성부터 파일 관리까지
하나의 워크플로우로
업로드 즉시 에디터 본문에 이미지 삽입
첨부파일 링크를 에디터에서 바로 관리
대용량 파일 분할 업로드 + 미리보기
동일 DEXTSOLUTION 기술 스택 통일
툴바 기능
40+
외부 의존성
0
접근성 등급
WCAG 2.1 AA
현재 버전
v2.4.0

편집에 필요한 모든 것

게시판·공지사항·보도자료 작성에 최적화된 40+ 기능을 하나의 경량 번들로 제공합니다.

텍스트 서식

굵게·기울임·밑줄·취소선·위첨자·아래첨자, 글꼴·크기·색상·배경색, 제목 1~6, 단락 정렬, 들여쓰기, 줄 간격까지 완벽 지원.

Bold / Italic 글자색 제목 스타일 정렬

표 편집

행·열 추가·삭제, 셀 병합·분할, 다중 셀 선택(드래그), 표 전체 리사이즈, 헤더 스타일, 우클릭 컨텍스트 메뉴 지원.

셀 병합 리사이즈 다중 선택

이미지 & 동영상

파일 선택·붙여넣기·드래그앤드롭으로 이미지 삽입. 핸들 드래그로 크기 조절. YouTube URL → Lite Embed 자동 변환.

드래그앤드롭 리사이즈 핸들 YouTube

MS Word 가져오기

.docx 파일을 에디터로 직접 불러오기. 서식·표·이미지·하이퍼링크를 HTML로 변환. 외부 서버 없이 브라우저 내장 API만 사용.

OOXML → HTML 이미지 포함 서버 불필요

링크 & 콘텐츠 삽입

하이퍼링크 삽입·편집·해제, 새 탭 열기 옵션. 구분선, 이모지, 특수기호, 코드 블록(다크 테마) 삽입 지원.

Ctrl+K 이모지 코드블록

찾기 & 바꾸기

Ctrl+F로 빠른 검색, 대소문자·단어 단위 옵션, 전체 바꾸기, 현재 위치 하이라이트, 결과 카운터 실시간 표시.

실시간 검색 전체 바꾸기 Ctrl+F

HTML 편집 & 미리보기

편집·HTML·미리보기 탭 전환으로 소스 직접 편집 가능. HTML 탭에서 base64 이미지를 파일명으로 치환해 가독성 향상. 인쇄 기능 포함.

HTML 소스 미리보기 인쇄

메뉴바 & 단축키

파일·편집·보기·삽입·서식·도구 드롭다운 메뉴. 20개 이상 키보드 단축키, 완전한 키보드 탐색 지원.

드롭다운 메뉴 단축키 20+ 키보드 탐색

API & 플러그인 시스템

30+ 인스턴스 메서드, 이벤트 시스템, 플러그인 등록 인터페이스. DOM API 모델로 외부 컨트롤, TypeScript 타입 정의 제공.

Event API Plugin 등록 TypeScript
v2.4.0 신기능

MS Word 문서를
그대로 가져오세요

.docx 파일을 드래그하거나 선택하면, 서버 없이 브라우저에서 바로 OOXML을 파싱해 에디터 내용으로 변환합니다.

  • 서버 불필요, 브라우저 내장 API만 사용
    DecompressionStream + DOMParser로 ZIP·XML 파싱
  • 서식·표·이미지 완벽 변환
    Bold·Italic·색상·제목·표 구조·이미지 base64 인라인
  • 플러그인 번들 분리 배포
    코어 JS와 분리, 필요한 곳에만 선택적으로 로드
  • NativeEngine + EngineRegistry
    커스텀 변환 엔진 교체 가능한 플러그인 아키텍처
접근성

WCAG 2.1 AA 준수

키보드 단독 사용·스크린리더 호환·충분한 색 대비를 갖춘 접근성 우수 에디터입니다.

키보드 완전 조작

메뉴바, 툴바, 탭, 모달 등 모든 UI를 마우스 없이 Tab·Arrow·Enter·Escape로 조작 가능

스크린리더 지원

role·aria-label·aria-pressed·aria-expanded·aria-selected 전 위젯 적용 (NVDA, VoiceOver 호환)

색 대비 7:1 이상

본문·버튼·메뉴 텍스트 모두 WCAG AA 기준 4.5:1 이상, 주요 요소 7:1 이상 명도 대비 확보

포커스 시각화

:focus-visible 전 적용 — 마우스 클릭 시 잔상 없음, 키보드 탐색 시 2px 파란 링 명확히 표시

30+ 메서드로 에디터를
완전히 제어하세요

콘텐츠 읽기·쓰기부터 상태 제어·이벤트·라이선스까지. 메서드 체이닝과 TypeScript 타입 정의를 완벽 지원합니다.

📄
콘텐츠 I/O
8 메서드
  • getHTML()
  • setHTML(html)
  • getText()
  • appendHTML(html)
  • insertHTML(html)
  • getSelectedHTML()
  • getSelectedText()
  • clear()
⚙️
상태 제어
12 메서드
  • setReadOnly(bool)
  • isReadOnly()
  • isModified()
  • resetModified()
  • setHeight(h)
  • setWidth(w)
  • setTab(index)
  • showToolbar(bool)
  • clearFormat()
  • setDefaultFont(name)
  • focus() / blur()
  • destroy()
⚡
이벤트 시스템
6 이벤트
  • on('change', fn)
  • on('ready', fn)
  • on('focus', fn)
  • on('blur', fn)
  • on('tabChange', fn)
  • on('imageUpload', fn)
🔐
라이선스 & 정적 API
5 메서드
  • DeeEditor.setLicense(key)
  • DeeEditor.getLicenseInfo()
  • DeeEditor.version
  • DeeEditor.registerPlugin(p)
  • DeeEditor.instances
editor-usage.js 체이닝 지원 
// ① 에디터 초기화
const editor = new DeeEditor(el, {
  height: '500px', showMenubar: true,
  license: 'WED-XXXX-XXXX-...',
  onChange: (html) => console.log(html),
});

// ② 콘텐츠 읽기 / 쓰기
const html = editor.getHTML();
editor.setHTML('<p>안녕하세요!</p>');

// ③ 메서드 체이닝
editor
  .setReadOnly(false)
  .setHeight('400px')
  .setDefaultFont('맑은 고딕')
  .focus();

// ④ 이벤트 구독
editor.on('tabChange', (index) => {
  const tabs=['편집','HTML','미리보기'];
  console.log(`→ ${tabs[index]}`);
});

// ⑤ Word 파일 가져오기
await editor.importWordFile(file);

// ⑥ 라이선스 정보 조회
const info = await DeeEditor.getLicenseInfo();
console.log(info.valid, info.type, info.domains);
→
메서드 체이닝
setter 메서드가 모두 this를 반환해 여러 설정을 한 줄로 연결할 수 있습니다.
TS
TypeScript 타입 정의
dist/webeditor.d.ts 포함. VSCode IntelliSense 자동완성 즉시 사용 가능합니다.
↻
비동기 Promise 지원
importWordFile(), getLicenseInfo()는 Promise 반환으로 async/await와 자연스럽게 통합됩니다.
⊕
DOM API 외부 제어 모델
WebEditorAPIModel을 통해 서버사이드 렌더링 환경에서도 DOM 속성으로 콘텐츠를 제어할 수 있습니다.
전체 API 문서 보기 →
전체 인스턴스 메서드 한눈에 보기
getHTML() setHTML() getText() appendHTML() insertHTML() getSelectedHTML() getSelectedText() clear() setReadOnly() isReadOnly() isModified() resetModified() setHeight() setWidth() setTab() getActiveTab() showToolbar() clearFormat() clearCSSFormat() setDefaultFont() setDefaultFontSize() setContentCSS() focus() destroy() on() off() insertImage() getImages() importWordFile() DeeEditor.setLicense() DeeEditor.getLicenseInfo() DeeEditor.registerPlugin() DeeEditor.instances DeeEditor.version

개발은 무료, 상용 배포 시 라이선스

개발 환경에서는 라이선스 없이 모든 기능을 무료로 사용할 수 있습니다. 실제 서비스 도메인에 배포할 때만 라이선스가 필요합니다.

개발 환경
무료
FREE

개발·검토 단계에서는 라이선스 없이 모든 기능을 제한 없이 사용할 수 있습니다. 아래 환경은 자동으로 무료 적용됩니다.

  • localhost / 127.0.0.1
  • 사설 IP (10.x · 172.16~31.x · 192.168.x)
  • *.local · file:// 프로토콜
  • 전 기능 사용 (기능 제한 없음)
  • 평가판 키(30일·6개월)로 운영 환경 사전 검토
무료로 체험하기
상용 배포
구매문의
CONTACT

운영 서비스 도메인에 배포할 때는 도메인 기반 라이선스가 필요합니다. 구독형 / 영구 라이선스 등 맞춤형으로 제공해 드립니다.

  • 운영 도메인 적용 · 워터마크 제거
  • 도메인 + *.서브도메인
  • 연간(구독형) · 영구 라이선스 선택
  • 이메일 · 유선/현장 필요한 모든 기술 지원
이메일로 구매문의

info@dextsolution.com

대표문의 02-6719-6200 · 02-6719-6219 · 02-6719-6202

라이선스 적용 방법 & 문의처
발급받은 키를 에디터 초기화 시 license: 'WED-XXXX-...' 옵션에 전달하거나, DeeEditor.setLicense('WED-...')로 전역 설정합니다. localhost / 127.0.0.1 / 사설 IP 환경은 라이선스 없이 항상 사용 가능합니다.
구매·견적 문의: info@dextsolution.com
대표문의: 02-6719-6200 · 02-6719-6219 · 02-6719-6202

지금 바로 시작하세요

localhost 환경에서 라이선스 없이 무료로 체험하고, 서비스 배포 시 라이선스를 적용하세요.

에디터 체험 API 문서 라이선스 문의

대표문의 02-6719-6200 · 02-6719-6219 · 02-6719-6202