통합 데모

UI 설정 — 에디터 구성 만들기

메뉴바 활성화, 툴바 아이콘의 표시·순서·1·2·3단 배치·그룹 구분선을 설정하고 config로 저장하세요. 저장한 설정대로 에디터 UI가 구성됩니다.

① 표시 요소

에디터 너비 px

② 툴바 아이콘 — 표시 · 순서 · 단 배치

체크=표시 · 드래그(⋮⋮)로 순서/단 이동 · 1 2 3=단 지정 · ＋구분선=그룹 나눔 · 템플릿·레이아웃 포함

1단
2단
3단

③ 미리보기 — ‘미리보기 적용’ 시 갱신

생성된 config

{}
내 페이지에 적용: 다운로드한 webeditor-ui-config.js 를 포함하고 new WebEditor('#editor', window.DEEDITOR_UI_CONFIG) 로 생성. (저장 시 localStorage 기록 → 적용 데모 열기)

④ 좁은 폭 · 오버플로우(줄임 ») 미리보기 — 사이드 배치·좁은 화면에서 툴바가 넘칠 때

줄임(») 버튼이란? 툴바가 창(에디터) 너비를 넘치면 넘친 아이콘을 오른쪽 » 버튼의 팝업으로 접어 한 줄을 유지합니다. 위 미리보기는 폭을 약 460px로 좁게 고정해 이 동작을 보여줍니다 (사이드 영역·모바일 등 좁은 레이아웃 대비).
  • toolbarOverflow: true (기본) — 넘친 아이콘을 » 팝업으로 접기(한 줄 유지)
  • toolbarOverflow: false — 접지 않고 다음 줄로 줄바꿈
  • (참고) toolbarResponsive — 에디터 너비 구간별로 툴바 배열 자체를 바꾸는 별도 옵션(위 설정과 독립)
위 ‘툴바 넘칠 때 » 로 접기’ 체크박스를 끄면 생성 config 에 toolbarOverflow: false 가 반영되어 줄바꿈 방식으로 바뀝니다.