답변 5개
그누보드5 기본(basic) 환경이면 에디터는 보통 스마트에디터2인데, 편집 영역이 iframe으로 분리되어 있어서 페이지에 아무리 다크모드 CSS를 넣어도 iframe 안까지는 적용되지 않습니다. 그래서 에디터 안쪽은 iframe 내부에 직접 스타일을 넣어줘야 합니다.
방법 — 다크모드 전환 시 iframe 내부에 스타일 주입
다크모드를 켜는 스크립트에 아래처럼 에디터 iframe의 body 색을 함께 바꿔주면 됩니다. (같은 도메인이라 접근 가능합니다)
function applyEditorDark() { var f = document.querySelector('.se2_input_area iframe') || document.querySelector('iframe[id*=se2]'); if (f && f.contentDocument && f.contentDocument.body) { f.contentDocument.body.style.backgroundColor = '#1e1e1e'; f.contentDocument.body.style.color = '#e5e5e5'; } }
에디터가 로드된 뒤 실행되어야 하므로, 페이지 로드 직후라면 setTimeout으로 약간 늦춰 실행하거나 다크모드 토글 버튼 이벤트에 함께 걸어주세요. 스킨에 따라 iframe 선택자가 다를 수 있으니 개발자도구로 실제 iframe을 확인해서 selector만 맞춰주시면 됩니다. (CKEditor를 쓰는 경우라면 편집 영역이 .cke_editable 이라 같은 방식으로 그쪽 body에 넣으면 됩니다)
함께 확인하실 것
작성 화면 말고 글 보기 화면의 본문 영역(#bo_v_con)도 에디터가 만든 HTML이 그대로 출력되는 곳이라 다크모드 CSS에 별도로 색을 지정해줘야 합니다. 다만 기존 글 중에 에디터에서 글자색을 검정으로 직접 지정해 저장한 글은 인라인 스타일이 우선이라 CSS만으로는 안 바뀌는 게 정상입니다. 이 경우까지 강제로 바꾸려면 예외 규칙을 추가로 넣어야 하니, 우선 위 두 군데(편집 iframe, 보기 본문)부터 적용해 보시길 권합니다.
답변을 작성하려면 로그인이 필요합니다.