editor-ruler v0.12.0 — Word-like ruler for web editors (Froala · Tiptap · CKEditor 5) / 웹 에디터용 Word 스타일 줄자

[jlc488]

A Word-like horizontal ruler for web rich-text editors — the control every general-purpose WYSIWYG (Froala · TinyMCE · CKEditor 5 · Quill) ships without. Now at v0.12.0 on public npm, Apache-2.0.

What it does

• Left/right margin + first-line indent drag handles (hanging indent included), cm/inch/px scales
• Guide lines dragged out of the ruler, with snapping — purely visual, never in your HTML
• Word-style table support: whole-table indent + draggable column-width markers
• One undo step per drag gesture; output is plain inline CSS (portable anywhere)
• UI language follows the browser (ko/en built in)

Packages

• Core (zero deps, works on any contenteditable): @devslab/editor-ruler
• Adapters: -froala · -tiptap (v2/v3) · -ckeditor5 (>= 42) — each with a ruler-icon toolbar control

Try it

• Live per-editor demos: https://devslab-kr.github.io/editor-ruler/
• One-click StackBlitz: vanilla · Froala · Tiptap · CKEditor 5
• Source: https://github.com/devslab-kr/editor-ruler

---

웹 리치텍스트 에디터를 위한 Word 스타일 가로 줄자 — Froala · TinyMCE · CKEditor 5 · Quill 어디에도 없는 그 컨트롤입니다. 공개 npm에 v0.12.0, Apache-2.0.

기능: 좌/우 여백 + 첫 줄 들여쓰기 드래그 핸들(내어쓰기 포함) · cm/인치/px 눈금 · 줄자에서 끌어내는 가이드선 + 스냅(순수 시각 요소) · Word식 테이블 통째 밀기 + 컬럼 폭 마커 · 드래그 = undo 1스텝 · 출력은 순수 인라인 CSS · UI 언어 브라우저 추종(ko/en).

패키지: 코어(@devslab/editor-ruler, 의존성 0) + 어댑터 3종(-froala · -tiptap · -ckeditor5) — 셋 다 툴바 줄자 아이콘 제공.

라이브 데모(에디터별 탭): https://devslab-kr.github.io/editor-ruler/ · 피드백/이슈 환영합니다!