언제든지 도와드립니다

menubar: true로 기본 메뉴바를 활성화하거나, 배열로 표시할 메뉴 항목을 직접 지정합니다.

// 메뉴바 전체 표시
new WebEditor('#editor', { menubar: true });

// 특정 메뉴만 표시
new WebEditor('#editor', {
  menubar: ['file', 'edit', 'view', 'insert', 'format', 'table', 'tools']
});

툴바는 showToolbar(false) 메서드로 런타임에 숨기거나 표시할 수 있습니다.

기본적으로 줄바꿈하지 않고 한 줄을 유지하며, 넘치는 아이콘 그룹은 툴바 오른쪽 끝의 » 버튼 팝업에 담깁니다. 창을 다시 넓히면 자동으로 원래 자리로 복원됩니다. 접히는 단위는 구분선으로 나뉜 아이콘 그룹이라 관련 기능이 흩어지지 않습니다.

// 기본값 — 넘치는 아이콘은 » 팝업으로 접기
new WebEditor('#editor', { toolbarOverflow: true });

// 종전처럼 다음 줄로 줄바꿈시키려면
new WebEditor('#editor', { toolbarOverflow: false });

좁은 화면에서 아예 다른 아이콘 배열을 쓰고 싶다면 toolbarResponsive로 너비 구간별 레이아웃을 지정할 수 있으며, 두 옵션은 함께 사용할 수 있습니다.

plugins 옵션에 사용할 플러그인 이름 배열을 전달합니다.

// 내장 플러그인 선택 (9종)
new WebEditor('#editor', {
  plugins: ['format', 'image', 'table', 'link', 'emoji',
            'video', 'sourceview', 'insert', 'find']
});

// Word 가져오기 추가 (외부 번들 필요)
new WebEditor('#editor', {
  plugins: ['format', 'image', 'table', 'link',
            'emoji', 'video', 'sourceview', 'insert',
            'find', 'wordimport']
});

기본값은 <p> 단락 삽입입니다. <br>로 변경하려면:

new WebEditor('#editor', {
  enterKey: 'br'   // 기본값: 'p'
});

new WebEditor('#editor', {
  pastePlainText: true   // 모든 붙여넣기를 plain text로 처리
});

일회성 plain-paste가 필요한 경우 Ctrl+Shift+V 단축키를 사용할 수도 있습니다.

// 초기화 옵션으로 설정
new WebEditor('#editor', {
  defaultFont: 'Malgun Gothic',   // 기본: 'Malgun Gothic'
  defaultFontSize: 14             // 기본: 14 (pt 단위)
});

// 런타임에 변경
editor.setDefaultFont('나눔고딕');
editor.setDefaultFontSize(16);

new WebEditor('#editor', {
  hyperLinkDefaultTarget: '_blank'  // '_self' | '_blank' | '_top' | '_parent'
});

사용자가 링크 삽입 다이얼로그에서 target을 별도로 변경하지 않으면 이 값이 기본으로 적용됩니다.

document.getElementById('submit-btn').addEventListener('click', () => {
  const html = editor.getHTML();   // 본문 HTML 문자열

  // hidden input에 담아 전송
  document.getElementById('content-field').value = html;
  document.getElementById('my-form').submit();
});

// 순수 텍스트만 필요한 경우
const text = editor.getText();

// 초기화 후 setHTML 호출
const editor = new WebEditor('#editor', { height: 400 });

editor.on('ready', () => {
  editor.setHTML(savedHtmlFromServer);
  editor.resetModified();  // 수정 플래그 초기화 (변경 감지 오작동 방지)
});

if (editor.isEmpty()) {
  alert('내용을 입력해 주세요.');
  return;
}

// 또는 직접 체크
const html = editor.getHTML();
const text = editor.getText().trim();
if (!text) { /* 빈 상태 */ }

isEmpty()는 공백·줄바꿈·  등을 모두 무시하고 실질적인 콘텐츠가 있는지 판단합니다.

// 기본 사용 (script, on* 이벤트 제거)
const safeHtml = editor.getSafeHTML();

// 세부 옵션 지정
const safeHtml = editor.getSafeHTML({
  stripScript: true,
  allowedTags: ['p','br','strong','em','u','a','img','table','tr','td'],
  allowedAttrs: ['href','src','alt','width','height'],
  imageRewriter: (src) => {
    // base64 이미지 → CDN 경유 URL
    if (src.startsWith('data:')) return '/img/placeholder.png';
    return src;
  }
});

// 초기화 시 설정
const viewer = new WebEditor('#viewer', {
  height: 300,
  readOnly: true    // 키보드·마우스 입력 완전 차단
});
viewer.setHTML(savedContent);

// 런타임 전환
editor.setReadOnly(true);   // 잠금
editor.setReadOnly(false);  // 편집 허용
console.log(editor.isReadOnly()); // true/false

setter 계열 메서드는 모두 this를 반환하므로 체이닝이 가능합니다.

editor
  .setHTML('<p>안녕하세요.</p>')
  .setReadOnly(false)
  .setHeight(500)
  .setDefaultFont('나눔고딕')
  .focus();

// 탭 전환 — 숫자 인덱스와 이름 모두 지원
editor.setTab(1);          // 0=WYSIWYG, 1=HTML소스, 2=미리보기
editor.setTab('html');     // 'edit' | 'html' | 'preview' (대소문자·별칭 허용)

// 현재 탭 확인
const tabIndex = editor.getActiveTab();      // 0 | 1 | 2
const tabName  = editor.getActiveTab(true);  // 'edit' | 'html' | 'preview'

// 탭 변경 이벤트 수신 (체이닝 가능: setTab은 this 반환)
editor.on('tabChange', (index) => {
  console.log('탭 전환:', ['WYSIWYG', 'HTML', '미리보기'][index]);
});

imageResize를 설정하면 지정한 너비를 넘는 이미지만 실제 픽셀을 줄여 재인코딩합니다(비율 유지, 확대는 안 함). 축소본이 본문 base64와 uploadHandler에 모두 반영되어 용량이 줄어듭니다.

new WebEditor('#editor', {
  imageResize: {
    maxWidth: 600,        // 600px 이하는 원본 그대로
    quality: 0.85,        // JPEG·WebP 품질
    formats: ['image/jpeg','image/png','image/webp'],
    onLargerResult: 'original'   // 결과가 더 크면 원본 사용
  }
});

editor.on('imageResized', e => console.log(e.originalWidth, '→', e.width));

uploadHandler 옵션에 비동기 함수를 등록합니다. 함수가 URL을 반환하면 base64 이미지가 해당 URL로 자동 교체됩니다.

new WebEditor('#editor', {
  uploadHandler: async (file, headers) => {
    const formData = new FormData();
    formData.append('file', file);

    const resp = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      headers: headers || {}  // CSRF 헤더 자동 포함
    });

    if (!resp.ok) throw new Error('업로드 실패');

    const json = await resp.json();
    return json.url;  // 반환값이 서버 URL로 교체됨
  }
});

new WebEditor('#editor', {
  // 방법 1: 쿠키에서 자동 추출
  csrfCookie: 'csrftoken',   // 쿠키명 지정

  // 방법 2: 헤더 직접 지정
  uploadHeaders: {
    'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content,
    'X-Custom-Header': 'value'
  },

  uploadHandler: async (file, headers) => {
    // headers 매개변수에 위 헤더가 자동 포함됨
    const resp = await fetch('/api/upload', {
      method: 'POST',
      body: new FormData()...,
      headers
    });
    return (await resp.json()).url;
  }
});

// 이미지가 에디터 DOM에 삽입된 직후 (base64 상태)
editor.on('imageInserted', ({ src, file, node }) => {
  console.log('삽입된 이미지:', src.substring(0, 30));
});

// uploadHandler 완료 후 URL 교체 직후
editor.on('imageUploaded', ({ src, file, node }) => {
  console.log('업로드 완료 URL:', src);  // 서버 URL
});

new WebEditor('#editor', {
  maxImageWidth: 800   // px 단위, 0이면 무제한 (기본값)
});

이미지 삽입 시 원본이 800px을 초과하면 자동으로 width="800"이 적용됩니다. height는 비율에 맞게 자동 계산됩니다.

이미지를 더블클릭하거나 선택 후 우클릭 메뉴에서 이미지 속성 다이얼로그를 열면 설정 가능합니다.

• 캡션: <figure><img><figcaption> 구조로 생성
• 하이퍼링크: <a href="..."><img></a> 래핑, target 속성 지원

// 코드로 이미지 삽입
editor.insertImage('https://example.com/image.jpg');

// change 이벤트: 내용이 변경될 때마다 발생
editor.on('change', (html) => {
  // 디바운스 적용 권장 (예: 1초 지연)
  clearTimeout(window._saveTimer);
  window._saveTimer = setTimeout(() => {
    localStorage.setItem('draft', html);
  }, 1000);
});

// 또는 내장 AutoSave 사용
new WebEditor('#editor', {
  autoSave: {
    interval: 30000,       // 30초마다
    storageKey: 'draft',
    unloadWarning: true,   // 페이지 이탈 시 경고
    onSave: (html) => console.log('자동 저장됨')
  }
});

// 리스너 등록
const handler = (html) => console.log(html);
editor.on('change', handler);

// 특정 리스너 해제
editor.off('change', handler);

// 해당 이벤트의 모든 리스너 해제
editor.off('change');

• ready — 에디터 초기화 완료
• change(html) — 콘텐츠 변경
• focus / blur — 포커스 획득/해제
• input(e) — 키 입력 직후
• paste(e) — 붙여넣기
• selectionchange — 선택 영역 변경
• tabChange(index) — 탭 전환 (0/1/2)
• resize({width, height}) — 에디터 크기 변경
• undo / redo — 실행 취소/다시 실행
• imageInserted({src, file, node}) — 이미지 DOM 삽입 완료
• imageUploaded({src, file, node}) — 이미지 업로드 URL 교체 완료
• zoom({ratio}) — 확대/축소 변경
• error({context, error}) — 내부 오류 (업로드 실패 등)

editor.on('error', ({ context, error }) => {
  console.error(`[${context}] 오류 발생:`, error.message);

  if (context === 'upload') {
    alert('이미지 업로드에 실패했습니다. 네트워크를 확인해 주세요.');
  }
});

context 값: 'upload', 'plugin', 'license', 'autosave' 등

인스턴스 옵션 license(코드 입력)로 적용합니다. 상태는 콜백으로 확인합니다.

new WebEditor('#editor', {
  license: 'WED2-XXXX-XXXX-...',
  onLicenseValid:   (info)  => console.log('유효:', info.info.customer),
  onLicenseInvalid: (state) => console.warn('오류:', state.reason)
});

전역 라이선스: 페이지마다 license를 넘기지 않고, 한 곳에서 전역 키를 지정할 수 있습니다.

// 방법 1) 정적 프로퍼티
WebEditor.defaultLicense = 'WED2-XXXX-...';

// 방법 2) 전역 변수 — 설정 파일(webeditor-configuration.js)에서 1회 선언, 번들보다 먼저 로드
window.WebEditorLicense = 'WED2-XXXX-...';

• 'unlicensed' — 키가 없거나 미설정
• 'invalid' — 키 형식 오류 또는 서명 불일치
• 'expired' — 라이선스 만료일 초과
• 'mismatch' — 현재 도메인이 라이선스 허용 도메인에 포함되지 않음
• 'domainKeyRequired' — 로컬 전용 키 'dextsolution'을 실도메인에서 사용 (해당 도메인 키 필요)

로컬 개발(워터마크 없이): 개발 호스트에서는 정식 키 대신 로컬 전용 예약 키 'dextsolution'을 입력하면 됩니다. (실도메인·사설 IP에선 무효)

// 개발 호스트(localhost 등) 전용
new WebEditor('#editor', { license: 'dextsolution' });
// 또는 전역으로
window.WebEditorLicense = 'dextsolution';

• 키 없음 → 개발 호스트 포함 어디서나 평가판(워터마크). 'dextsolution' 또는 정식 키를 입력하세요.
• 정식 키는 localhost에서도 서명·만료는 검증하고 도메인 매칭만 면제 → 로컬에서 키 적용을 그대로 확인할 수 있습니다.
• HTTP(비 HTTPS): ECDSA 서명 검증은 보안 컨텍스트(HTTPS·localhost)에서만 완전 동작합니다. 일반 HTTP에선 서명만 생략하고 도메인·만료는 그대로 검증하는 폴백으로 동작합니다(운영은 HTTPS 권장).

onLicenseValid 콜백의 info.info 또는 인스턴스의 editor._licenseState로 확인합니다.

new WebEditor('#editor', {
  license: 'WED2-...',
  onLicenseValid: (info) => {
    console.log(info.info);
    // { valid:true, customer:'ACME-001', domains:['example.com','*.example.com'],
    //   type:'perm', expiry:0, mode:'ecdsa' }
  }
});

// 인스턴스별 상태
const state = editor._licenseState;
// 정식 키(로컬):   { evaluation:false, devHost:true }
// 'dextsolution': { evaluation:false, localLicense:true }
// 키 없음:         { evaluation:true,  reason:'unlicensed' }

정식 라이선스 키를 발급받아 적용하면 자동으로 사라집니다. 개발/테스트 단계에서 임시로 비활성화하려면:

new WebEditor('#editor', {
  evaluationWatermark: false  // 워터마크 표시 비활성화 (기본값: true)
});

const editor = new WebEditor('#editor', {
  autoSave: {
    interval: 30000,             // 저장 주기 (ms), 기본 60000
    storageKey: 'draft-post-1',  // localStorage 키
    unloadWarning: true,         // 페이지 이탈 시 경고 다이얼로그
    unloadMessage: '저장하지 않은 내용이 있습니다.',
    onSave: (html) => {
      console.log('자동 저장:', new Date().toLocaleTimeString());
    }
  }
});

// 임시 저장본 복구
const draft = editor.getAutoSaved();
if (draft && confirm('임시 저장된 내용을 복구하시겠습니까?')) {
  editor.setHTML(draft);
  editor.clearAutoSaved(); // 복구 후 초기화
}

// 수동 즉시 저장
editor.saveNow();

검출 결과를 본문 위 배너로 알리고 등록 자체를 막는 흐름은 guardBeforeSubmit() 한 번으로 처리합니다 — 아래 등록 직전 검사 항목을 보세요.

const editor = new WebEditor('#editor', {
  // 금칙어 설정
  profanity: {
    words: ['욕설1', '욕설2'],
    maskChar: '*',              // 마스킹 문자 (기본 '*')
    onDetect: (matches) => {
      console.log('금칙어 발견:', matches);
    }
  },

  // 개인정보 검출 패턴
  privacy: {
    detect: ['ssn', 'phone', 'email', 'credit-card', 'bank-account'],
    onDetect: (matches) => {
      console.warn('개인정보 검출:', matches);
    }
  }
});

// 저장 전 일괄 검증
document.getElementById('submit-btn').onclick = async () => {
  const result = await editor.validate();

  if (result.profanity.length > 0) {
    alert(`금칙어 ${result.profanity.length}건이 발견되었습니다.`);
    return;
  }
  if (result.privacy.length > 0) {
    if (!confirm('개인정보가 포함되어 있습니다. 계속하시겠습니까?')) return;
  }

  // 마스킹 처리 후 저장
  const maskedHtml = editor.maskSensitiveData();
  submitContent(maskedHtml);
};

guardBeforeSubmit() 은 검사 → 본문 위 배너 표시 → 등록 차단까지를 한 번에 처리합니다. 반환값의 ok:false 는 ‘호스트가 등록을 멈춰야 한다’는 뜻입니다.

const editor = new WebEditor('#editor', {
  privacy:   { detect: ['ssn', 'phone', 'email'] },
  profanity: { words: ['금칙어1'] },
  guard: {
    show:   'banner',   // 'banner' | 'notice'
    block:  true,       // 검출되면 ok:false 로 등록을 막는다
    review: 'confirm',  // 배너에 [검토·마스킹] 제공
  },
});

submitBtn.onclick = async () => {
  const r = await editor.guardBeforeSubmit();
  if (!r.ok) return;              // 배너는 에디터가 이미 띄운 상태
  submitContent(editor.getSafeHTML());
};

배경 보존 방식이 두 가지이기 때문입니다. 소형(10KB 미만)은 base64 로 본문에 함께 저장되지만, 업로드 방식(store:'meta' — 업로드 모드의 기본값)은 getHTML() 에 포함되지 않습니다.

// 저장 — 본문과 배경을 따로 보관한다
const html = editor.getHTML();
const bg   = editor.getDocumentBackground();   // { image, color, repeat, attachment, … } | null
save({ html, bg });

// 불러오기 — 본문을 넣고 배경을 다시 입힌다
editor.setHTML(saved.html);
if (saved.bg) await editor.setDocumentBackground(saved.bg);

// 기본 미니툴바 (Bold, Italic, Underline, Link, 색상)
new WebEditor('#editor', {
  inlineToolbar: true
});

텍스트를 드래그로 선택하면 선택 영역 위에 미니툴바가 자동으로 표시됩니다. 모바일 터치 환경도 지원합니다.

// 확대/축소 설정 (0.25 ~ 4.0 범위)
editor.setZoom(1.5);   // 150%
editor.setZoom(0.75);  // 75%
editor.setZoom(1.0);   // 100% (원래 크기)

// 현재 배율 조회
const ratio = editor.getZoom(); // 예: 1.5

// 줌 변경 이벤트
editor.on('zoom', ({ ratio }) => {
  console.log('현재 배율:', Math.round(ratio * 100) + '%');
});

// 에디터 본문만 브라우저 인쇄 다이얼로그로 PDF 저장
editor.saveToPDF();
editor.saveToPDF({ title: '문서 제목', hideToolbar: true }); // 옵션

// 새 창에서 인쇄 (인쇄 후 창 자동 닫힘)
editor.saveToPDFInWindow();

외부 플러그인 번들을 추가로 로드하고, plugins 옵션에 'wordimport'를 포함시킵니다.

<!-- 외부 번들 추가 로드 -->
<script src="dist/plugins/wordimport-native.min.js"></script>

<script>
new WebEditor('#editor', {
  plugins: ['format', 'image', 'table', 'link', 'emoji',
            'video', 'sourceview', 'insert', 'find', 'wordimport']
});
</script>

활성화 후 메뉴바의 파일 → Word 가져오기 또는 에디터 영역에 .docx 파일을 드래그하면 자동 변환됩니다.

// File 객체를 직접 전달
document.getElementById('file-input').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file || !file.name.endsWith('.docx')) return;

  try {
    await editor.importWordFile(file);
    console.log('Word 가져오기 완료');
  } catch (err) {
    console.error('가져오기 실패:', err.message);
  }
});

변환 지원 항목:

• 제목(H1~H6), 단락, 줄바꿈
• 굵게·기울임·밑줄·취소선·글자색·형광펜
• 표 (셀 배경색, 테두리색, 열 너비 포함)
• 인라인 이미지 (EMU → px 변환, base64 삽입)
• 하이퍼링크

미지원 항목:

• SmartArt, 차트, OLE 개체
• 복잡한 단 나누기(Multi-column) 레이아웃
• 매크로, VBA 스크립트

메뉴바·툴바 없는 에디터를 새창에 만들고 importWordFile()로 변환한 뒤 setReadOnly(true)로 잠그면 편집 불가 미리보기가 됩니다. 게시판 .docx 첨부 미리보기에 쓰는 패턴입니다.

const ed = new WebEditor('#preview', {
  menubar: false,
  plugins: ['format','image','table','link','wordimport']
});
ed.showToolbar(false);                                   // 아이콘(툴바) 숨김
await ed.importWordFile(file, { silent: true, mode: 'replace' });
ed.setReadOnly(true);   // 편집·상단 메뉴바·컨텍스트 메뉴·리사이즈 모두 차단

별도 외부 플러그인 번들을 로드하고, plugins 옵션에 'hwpximport'를 포함시킵니다(opt-in — 미지정 시 영향 0).

<!-- 외부 번들 추가 로드 -->
<script src="dist/plugins/hwpximport-native.min.js"></script>

<script>
new WebEditor('#editor', {
  plugins: ['format', 'image', 'table', 'link', 'hwpximport']
});
</script>

활성화 후 메뉴바의 파일 → 한글 HWPX 가져오기, 툴바의 HWPX 아이콘(MS Word 옆), 또는 에디터 영역에 .hwpx 파일을 드래그하면 변환됩니다.

const file = e.target.files[0];
if (!file || !file.name.endsWith('.hwpx')) return;

await editor.importHwpxFile(file, {
  mode: 'replace',      // 'cursor' | 'append' | 'replace'
  maxTableWidth: 740,   // 최상위 표를 지정 px 너비로 비율 스케일(권장 740~780)
  silent: false         // true면 변환 다이얼로그 생략
});

변환 지원 항목:

• 단락·정렬·줄간격(lineSpacing), 굵게·기울임·밑줄, 글자색·크기·글꼴
• 표 (셀 병합·테두리·단색/그라디언트 배경·셀 너비/높이·세로정렬)
• 이미지(BinData → base64 인라인)
• 벡터 도형(폴리곤·사각형 등) → 인라인 SVG
• 심볼폰트 특수문자(PUA) 표준 유니코드 매핑
• 목차 점선 리더(탭 leader)·페이지 나눔(pageBreak 및 목차 앞 자동 분리)
• 도형 안 텍스트(hp:drawText) 추출

미지원 항목:

• 수식, SmartArt·복합 그리기 그룹의 정밀 레이아웃
• 머리글/꼬리글, 각주·미주 본문, 텍스트 감싸기(도형 주변 흐름), 도형 회전

Word와 동일하게, 메뉴바·툴바 없는 에디터에 importHwpxFile()로 변환한 뒤 setReadOnly(true)로 잠급니다.

const ed = new WebEditor('#preview', {
  menubar: false,
  plugins: ['format','image','table','link','hwpximport']
});
ed.showToolbar(false);
await ed.importHwpxFile(file, { silent: true, mode: 'replace', maxTableWidth: 740 });
ed.setReadOnly(true);   // 편집·메뉴바·컨텍스트 메뉴 차단

메뉴 UI를 클래식 ↔ 탭 리본으로 전환하고, 아이콘 테마를 툴바·리본 공통으로 적용합니다.

new WebEditor('#editor', {
  uiTemplate: 'ribbon',          // 'classic' | 'ribbon'
  iconTheme:  'blue',            // default·gray·blue·colorful·vivid·natural·emoji 또는 폴더명
  iconThemePath: 'assets/icon-themes'
});

// 런타임 전환
editor.setUITemplate('classic');
editor.setIconTheme('vivid');    // 툴바 + 리본 탭 함께 갱신

메뉴·리본의 붙여넣기 버튼은 비동기 Clipboard API(pasteFromClipboard())를 사용합니다. 보안 컨텍스트(HTTPS 또는 localhost) + 사용자 제스처 + 클립보드 권한이 필요합니다.

const ok = await editor.pasteFromClipboard();
if (!ok) console.warn('클립보드 접근 불가 — Ctrl+V를 사용하세요');

마크다운 확장팩(opt-in)을 로드하고 plugins에 'markdown'을 추가하면 마크다운 ↔ 본문 왕복 변환이 가능합니다.

<script src="dist/plugins/markdown-native.min.js"></script>

const editor = new WebEditor('#editor', {
  plugins: ['format','image','table','link','markdown']
});

await editor.importMarkdownFile(file, { mode: 'replace' }); // .md 파일 → 본문
editor.setMarkdown('# 제목\n\n**굵게**', { mode: 'replace' }); // 문자열 → 본문
const md = editor.getMarkdown();            // 본문 → 마크다운
const { html } = editor.viewMarkdown(md);   // 마크다운 → 안전 HTML

툴바 이미지 버튼이 파일 업로드 + URL 입력 다이얼로그로 개편되었습니다. 코드로는 insertImage()를 사용합니다.

editor.insertImage('https://example.com/photo.png', '대체 텍스트');

설정 허브에서 툴바 아이콘(표시·순서·1·2·3단 배치·구분선)·메뉴바 구조·너비·상태표시줄을 시각적으로 구성하고 config 파일로 저장할 수 있습니다. 저장한 config는 에디터 옵션과 동일한 형식입니다.

new WebEditor('#editor', {
  menubar:   savedConfig.menubar,   // 메뉴바 구성
  toolbar:   savedConfig.toolbar,   // 툴바 아이콘 배열
  statusbar: savedConfig.statusbar,
  width:     savedConfig.width
});

공용 모듈 doc-tools.js를 로드하고 DeeDocTools.attach(editor) 한 줄이면 파일 ▸ 템플릿(기본 양식 11종)·파일 ▸ 레이아웃(표 구조 16종)이 메뉴에 추가됩니다.

<script src="doc-tools.js"></script>
DeeDocTools.attach(editor);

데모 게시판은 첨부파일을 localStorage에 data URL로 저장하고, 첨부한 .docx·.hwpx·.md는 메뉴바·아이콘바 없는 에디터 새창에서 미리보기로 import합니다.

// 미리보기 창: 메뉴바·툴바 없는 에디터
const ed = new WebEditor('#pv', {
  menubar: false,
  plugins: ['format','image','table','link','wordimport','hwpximport','markdown']
});
ed.showToolbar(false);                 // 아이콘(툴바) 숨김
ed.setHeight(window.innerHeight - 46); // 고정 높이 + 내부 스크롤

// data URL → File 복원 후 형식별 import
if (/\.hwpx$/i.test(name))                ed.importHwpxFile(file, { silent:true, mode:'replace' });
else if (/\.(md|markdown)$/i.test(name))  ed.importMarkdownFile(file, { mode:'replace' });
else                                      ed.importWordFile(file, { silent:true, mode:'replace' });

모바일 데모(demo/mobile.html)는 핵심 아이콘 1줄 + 더보기(⋯) 바텀시트 구성을 제공하며, 공통 상단 메뉴는 좁은 화면(≤900px)에서 햄버거 토글 드롭다운으로 전환됩니다.

확장팩(opt-in) 번들을 로드하고 plugins에 'xlsximport'·'pptimport'를 추가합니다. 엑셀은 시트 → 표(table)로, 파워포인트는 슬라이드 → 본문으로 순차 변환됩니다.

<script src="dist/plugins/xlsximport-native.min.js"></script>
<script src="dist/plugins/pptimport-native.min.js"></script>

const editor = new WebEditor('#editor', {
  plugins: ['format','image','table','link','xlsximport','pptimport']
});

editor.importXlsxFile(file, { mode:'replace', maxTableWidth: 740 });
editor.importPptxFile(file, { mode:'replace' });

importMode 옵션으로 형식별 버튼(기본)과 통합 버튼 1개 중에서 선택합니다. 통합 버튼은 파일 확장자를 보고 알맞은 엔진으로 자동 분기합니다.

new WebEditor('#editor', {
  importMode: 'unified',   // 'individual'(기본) | 'unified'
  plugins: ['format','image','table','link',
            'wordimport','hwpximport','xlsximport','pptimport']
});

// 코드로 직접 호출해도 확장자에 따라 자동 분기
editor.importDocumentFile(file, { mode: 'replace' });

fixedHeight를 켜면 본문이 길어져도 에디터 창 높이가 늘어나지 않고 편집영역에 세로 스크롤바가 생깁니다. 페이지 레이아웃을 고정해야 하는 화면에 사용합니다.

new WebEditor('#editor', {
  height: 500,
  fixedHeight: true        // 기본 false(내용에 따라 창이 늘어남)
});

editor.setFixedHeight(false);   // 런타임 전환

toolbarOverflow(기본 true)가 켜져 있으면 툴바 폭을 넘는 아이콘이 다음 줄로 내려가지 않고 우측 »(더 보기) 팝업으로 접힙니다. false로 두면 기존처럼 줄바꿈됩니다.

new WebEditor('#editor', {
  toolbarOverflow: true    // true(기본)=» 접힘 / false=줄바꿈
});

됩니다. 이미지를 클릭해 선택한 뒤 Ctrl+C(복사)·Ctrl+X(잘라내기) 후 원하는 위치에 Ctrl+V로 붙여넣습니다. 이때 조절한 이미지 크기(가로·세로)가 그대로 유지됩니다.

개선되었습니다. 붙여넣기 경로가 execCommand('insertHTML')(HTML 문자열을 다시 직렬화·재파싱)에서 파싱된 노드를 커서 위치에 직접 삽입하는 방식으로 바뀌어, 대용량 본문에서 체감 속도가 크게 향상되었습니다.

도형 확장팩(opt-in)을 plugins에 추가하면 툴바에 도형 삽입 아이콘이 표시됩니다.

new WebEditor('#editor', {
  plugins: ['format','image','table','link','shape']
});

두 증상 모두 수정되었습니다. dist를 최신으로 교체한 뒤 강력 새로고침(Ctrl+F5)하세요.

• 표 테두리 겹침 — 편집 모드의 표 안내선(showTableGuide)이 테두리가 있는 셀에도 겹쳐 그려지던 문제. 이제 테두리 없는 셀에만 안내선이 표시됩니다.
• 셀 이미지 넘침 — 표 셀에 삽입한 이미지가 셀 폭을 초과하던 문제. 셀 안 이미지는 셀 폭 기준으로 맞춰집니다.

language 옵션 하나면 됩니다. 한국어(ko)·영어(en)가 코어에 내장되어 있어 별도 파일을 추가로 로드하지 않습니다.

const editor = new WebEditor('#editor', { language: 'en' });

적용 범위는 UI 전체입니다 — 메뉴바 · 리본 · 툴바 툴팁 · 모든 플러그인 다이얼로그(표·도형·이미지·링크·찾기·동영상·이모지·문서배경·금칙어 검사) · 가져오기 다이얼로그(Word · HWPX · XLSX · PPTX · 마크다운).

영향 없습니다. language를 지정하지 않으면 'ko'로 고정되며 렌더 결과는 이전 버전과 완전히 동일합니다.

브라우저·OS 언어를 따라가게 하려면 'auto'를 명시적으로 지정해야 합니다.

new WebEditor('#editor');                      // ko (기존과 동일)
new WebEditor('#editor', { language: 'auto' }); // 감지: <html lang> → navigator.language

setLanguage(lang)로 즉시 전환합니다. 본문 내용 · 커서 위치 · 변경 플래그 · 읽기 전용 상태는 그대로 보존되므로 작성 중에 눌러도 안전합니다.

editor.setLanguage('en');
editor.getLanguage();   // 'en'

// 전환 완료 시점 감지
editor.on('languagechange', (lang) => {
  console.log('전환 완료:', lang);
});

WebEditor.registerLocale()로 코어 수정 없이 추가합니다. 언어팩은 평탄한 '네임스페이스.키' → 문자열 맵입니다.

// 팩이 없는 언어를 새로 만들 때 (예: 프랑스어)
WebEditor.registerLocale('fr', {
  'menu.file': 'Fichier',
  'menu.edit': 'Édition',
  'core.placeholder': 'Saisissez votre contenu.',
});
new WebEditor('#editor', { language: 'fr' });

// 일본어는 만들 필요가 없습니다 — 636키를 채운 팩이 동봉돼 있습니다
<script src="dist/webeditor.min.js"></script>
<script src="dist/locales/ja.min.js"></script>
new WebEditor('#editor', { language: 'ja' });

merge: true로 기존 언어팩에 필요한 키만 덮어씁니다.

WebEditor.registerLocale('ko', {
  'menu.file': '문서',
  'core.placeholder': '공지 내용을 입력하세요.',
}, { merge: true });

키 이름은 src/i18n.js(코어)와 src/plugins/_shared/ImportLocale.js(가져오기 확장팩)에서 확인합니다. 현재 ko·en·ja 각 636개입니다.

가져오기 확장팩의 문구(imp.*)는 코어 사전이 아니라 확장팩 번들이 자체 보유하다가, 스크립트가 로드되는 시점에 코어 사전으로 병합됩니다. 확장팩을 쓰지 않는 프로젝트가 그 용량을 지지 않게 하기 위한 구조입니다.

따라서 imp.* 문구를 덮어쓰려면 확장팩 스크립트를 로드한 뒤 호출해야 합니다.

<script src="dist/webeditor.min.js"></script>
<script src="dist/plugins/wordimport-native.min.js"></script>
<script>
  // ↑ 확장팩 로드 이후여야 병합이 유지된다
  WebEditor.registerLocale('ko', { 'imp.ok': '불러오기' }, { merge: true });
</script>

dist/webeditor.d.ts에 모두 포함되어 있습니다.

import WebEditor, { WebEditorLanguage, WebEditorLocalePack } from './dist/webeditor';

const ed = new WebEditor('#editor', { language: 'en' });
ed.setLanguage('ko');                       // → this (체이닝 가능)
ed.on('languagechange', (lang) => { /* lang: string */ });

const pack: WebEditorLocalePack = { 'menu.file': 'Fichier' };
WebEditor.registerLocale('fr', pack);       // → boolean

UI는 전부 번역됩니다. 아래는 설계상 범위 밖입니다.

• 본문 콘텐츠 — 사용자가 입력했거나 가져온 문서의 내용
• 날짜/시간 삽입 형식 — 형식 목록이 현재 한국어 표기 기준입니다(언어별 기본 포맷 미지원)
• 평가판 모달 — 별도 옵션 licenseLang을 따릅니다
• 데모·매뉴얼 페이지 — 문서 페이지 자체는 한국어입니다

가져옵니다. 이전에는 시트 위에 떠 있는 개체가 안내 없이 모두 사라졌지만, 이제 본문으로 변환됩니다. 별도 설정 없이 기본 동작입니다.

• 그림 — 표시 크기 그대로 base64 <img> 로 삽입됩니다. maxTableWidth 를 넘으면 비율을 유지한 채 줄입니다.
• 도형 — 도형 안의 글자를 문단으로 보존합니다.
• SmartArt — 배치가 끝난 결과를 도형·좌표·회전·테마 색까지 살려 SVG 근사 렌더합니다.
• 차트 — 원·도넛·막대·꺾은선·영역형을 SVG 로 그리며, 차트 제목·축 제목·값 축 눈금·가로 격자선을 함께 그립니다.

조용히 버리지 않고 종류별로 세어 경고로 알려줍니다. 무엇이 빠졌는지 가져온 직후에 확인할 수 있습니다.

미지원 범위는 다음과 같습니다.

• 분산형·버블·방사형·주식·혼합(combo)·3D 차트
• 보조축, 로그 스케일
• 양식 컨트롤(목록 상자·체크박스 등)

영역형 차트는 꺾은선으로 근사해 그립니다.

images: false 로 그리기 개체 변환을 통째로 끕니다.

editor.importXlsxFile(file, { silent: true, images: false });

의도된 동작입니다. 이전에는 시트가 하나면 팝업을 건너뛰고 바로 삽입했는데, 그러면 삽입 방식을 고를 기회가 없어 작성 중이던 본문이 의도치 않게 바뀝니다. 이제 시트 수와 관계없이 팝업이 뜹니다.

삽입 방식 기본값도 replace(전체 교체) → cursor(커서 위치에 삽입) 로 바뀌었습니다. Word·PPTX·HWPX 가 이미 cursor 였고 XLSX 만 달랐습니다.

// 팝업 없이 바로 가져오려면 silent
editor.importXlsxFile(file, { silent: true, mode: 'cursor' });

// 팝업은 띄되 다른 방식을 미리 선택해 두려면
editor.importXlsxFile(file, { defaultMode: 'replace' });

있습니다. 우클릭 메뉴에 하이퍼링크 항목이 추가되었습니다. 글자 범위를 선택했을 때만 활성화되며, 선택한 문자열이 링크 텍스트가 됩니다.

해결되었습니다. 예전에는 우클릭 메뉴 구현이 표 플러그인 안에 들어 있어, plugins 에서 table 을 빼면 잘라내기·복사·붙여넣기까지 통째로 없어졌습니다.

이제 기본 메뉴는 코어 모듈(editor.contextMenu)이 가지고 있고, 표 전용 메뉴는 표 플러그인이 상황별로 덮어씁니다. 표 메뉴의 항목과 동작은 이전과 동일합니다.

editor.contextMenu.addProvider() 로 등록합니다. 상황을 보고 항목 배열을 돌려주면 그 메뉴가 뜨고, null 을 돌려주면 다음 제공자에게 넘깁니다. 나중에 등록된 제공자가 먼저 불립니다.

const off = editor.contextMenu.addProvider((ctx) => {
  // ctx: { event, target, editor, hasTextSel }
  if (!ctx.target.closest('img')) return null;   // 이 상황이 아니면 기본 메뉴로
  return [
    { label: '대체 텍스트 편집', action: () => openAltDialog(ctx.target) },
    { sep: true },
    { label: '이미지 교체', action: () => replaceImage(ctx.target) },
  ];
});

off();   // 등록 해제

수정되었습니다. 이전 구현은 선택 영역을 평문으로 뽑아 통째로 덮어써 안에 있던 기울임·굵게·하이퍼링크·글자색이 모두 초기화됐습니다.

이제 텍스트 노드의 글자만 바꾸므로 서식과 요소 구조가 그대로 유지되며, 선택 영역도 보존되고 실행 취소도 정상 동작합니다.

모바일 브라우저의 제약입니다. 안드로이드 크롬은 <iframe>·<object> 로 넣은 PDF 를 렌더하지 않고, iOS 사파리는 인라인 PDF 를 첫 페이지만 그립니다. 브라우저 자체 동작이라 외부 PDF 라이브러리 없이는 우회할 수 없습니다.

데모 게시판은 빈 화면을 보여주는 대신, 이유를 설명하고 다운로드해서 보기를 주 버튼으로 안내합니다. 두 플랫폼 모두 내려받은 PDF 는 뷰어에서 전체 페이지가 정상 표시됩니다.

데모 게시판(작성·보기)에서 수정되었습니다. 파일명이 길면 확장자는 남기고 앞부분만 줄임표로 축약하며, 버튼은 줄지 않도록 고정했습니다.

가능합니다. WebBrowser 컴포넌트에 호스트 HTML 을 올리고, 양방향 통신은 다음으로 합니다.

• 넥사크로 → 에디터: WebBrowser.callMethod('함수명', 인자…) — 동기적으로 반환값을 받습니다(동일 출처 필수).
• 에디터 → 넥사크로: window.NEXACROWEBBROWSER.postUserNotify(...) → onusernotify 이벤트의 info.userdata.

업무 보고서 · 기안문 · 공지사항 · 공문/안내문 · 회의록 · 출장신청서 · 휴가신청서 · 개인경비 청구서 · 지출결의서 · 구매 및 지출품의서 · 차량배차신청서 · 이력서 — 총 12종입니다.

사내 게시판 공지용 공지사항 양식이 추가되었습니다(대상·기간·장소·방법 표 · 주요 사항 · 유의사항 · 문의처). 대외 발송용인 기존 공문/안내문 과는 별개 양식입니다.