ordars-rails-editor

게시판형 WYSIWYG 에디터 Rails gem — 편집 코어는 Tiptap/ProseMirror(번들 내장, 외부 CDN 의존 0), gem 은 이토랜드 스타일의 툴바·팔레트·말풍선 툴팁·HTML 소스 모드·첨부 패널·업로드 어댑터· 서버측 새니타이저·CSS 변수 테마를 제공한다.

설치

# Gemfile
gem "ordars_rails_editor"

/* application.css 등 */
@import url("ordars_rails_editor.css");

// application.js (importmap 앱 — pin 은 gem 이 자동 등록)
import "ordars_rails_editor"

사용

<%= form_with ... do %>
  <%= ore_editor name: "board_post[content]",
                 content: @post.content_html,
                 placeholder: "내용을 입력하세요",
                 upload_url: board_editor_upload_path(...),
                 attach_name: "attachment_file_ids[]" %>
<% end %>

옵션: max_images: max_videos: max_mb:(첨부 한도 표시), attach: false(첨부 패널 없이 본문만), id:.

저장 (필수 — 서버측 새니타이즈)

에디터 HTML 은 저장 직전 반드시 화이트리스트 새니타이저를 통과시킨다:

post.content = OrdarsRailsEditor::Sanitizer.clean(params[:board_post][:content])

허용 스키마: p br strong b em i s del u code pre blockquote ul ol li h1-h3 hr a img span + style(color·background-color·font-size·text-align 만) + a[href target rel] + img[src alt width height data-file-id]. 링크 스킴은 http/https/mailto/tel 만.

업로드 계약 (upload_url)

POST {upload_url} — multipart file (+X-CSRF-Token 헤더). 응답 JSON:

{ "id": "uuid", "url": "https://...", "thumbnail_url": "https://...",
  "file_name": "a.jpg", "file_size": 12345, "file_type": "image" }

실패 시 { "error": "메시지" } — 에디터가 ore:error 이벤트를 발화하고 window.showSnackbar 가 있으면 사용.

  • 본문 삽입 이미지는 <img src=... data-file-id=...> 로 저장 — 비공개 저장소라면 렌더 시점에 data-file-id 로 URL 을 치환하는 것을 권장(만료되는 presigned URL 을 본문에 박지 않기).
  • 첨부 패널의 파일은 행마다 <input type="hidden" name="{attach_name}" value="{id}"> 로 폼에 실린다.
  • upload_url 미지정 = 로컬 모드(데모용): 이미지 dataURL 삽입, 첨부는 목록 표시만.

동적 마운트

페이지 로드(DOMContentLoaded/turbo:load)에 자동 마운트. 모달 등 동적 삽입 후에는:

window.OrdarsRailsEditor.mountAll(container)   // 또는 .mount(rootEl)
const inst = window.OrdarsRailsEditor.get(rootEl)  // .getHTML() / .setContent() / .destroy()

테마

.ore { --ore-accent: #16a34a; --ore-accent-soft: #f0fdf4; }  /* 등 --ore-* 변수 덮어쓰기 */
.ore-tip { background: #16a34a; }                            /* 툴팁은 body 직속이라 별도 */

Tiptap 번들 재빌드

app/javascript/ordars_rails_editor/tiptap.js 는 esbuild 산출물이다. 확장 추가/업데이트 시:

cd build && npm install && npx esbuild entry.js --bundle --format=esm --minify \
  --outfile=../app/javascript/ordars_rails_editor/tiptap.js

⚠@tiptap/* 패키지는 전부 같은 버전으로 맞출 것 — 어긋나면 esbuild 에서 export 불일치로 실패한다.

License

MIT