라이믹스 ckeditor의 도구상자의 폰트 목록에 웹폰트 추가

이게 정석적인 방법인지는 모르겠습니다.

팁이라는 분류도 애매하긴 하군요.

삽질의 기록으로 봐주세요.

검색해서 나오는 것으로는 설정해도 도구상자의 폰트의 목록 자체가 바뀌지 않더군요.

시도해본 것

- 관리자 화면 → 에디터 → 공통 설정 → 본문 글꼴 → 사용자 설정에 폰트 이름 추가

- /common/js/plugins/ckeditor/ckeditor/ckeditor.js 의 font_names에 추가

- /common/js/plugins/ckeditor/ckeditor/config.js 를 만들어서 추가

본문글끌을 사용자설정으로 지정하면 기본값으로 사용이 가능하지만

정작 레이아웃에 적용된 폰트에 먹혀서 지정한 폰트로 사용이 안됩니다.

이는 레이아웃에서 작성한 css에 따라서 달라지겠지만요.

또한 기본폰트로 사용하려는 의도가 아니어서 목록에 추가해줄 필요가 있었습니다.

환경은 php7.4에 설치된 라이믹스버전은 2.0.24입니다.

게시판 스킨은 스케치북이구요.

뭘 바꿔도 도구상자의 폰트의 목록은 그대로더군요.

폰트 목록의 폰트 이름으로 개발자도구를 통해 이리 저리 찾아봤습니다.

그랬더니 어디서 저런 소스코드가 생긴건지는 몰라도 목록과 같은 것이 추가되는 부분이 보이더군요.

저게 어디서 추가되나 찾았더니

/modules/editor/skins/ckeditor/editor.html

이 파일이더군요.

$lang->edit->fontlist

그래서 이 변수가 지정된 곳을 찾아갔습니다.

한국어셋팅이라서

/modules/editor/lang/ko.php

이 파일에 있더군요.

박스친게 기본값이고

아래 2줄은 추가한 폰트입니다.

웹폰트도 지정해주어야 하므로

경로는 임의로 해도 되니 레이아웃에 넣어줬습니다.

/layouts/xxxxxx/css/fonts.css

에

@font-face {
    font-family: '폰트명M';
    src: url('/layouts/xxxxxx/font/xxxxxxM.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: '폰트명B';
    src: url('/layouts/xxxxxx/font/xxxxxxB.TTF') format('truetype');
    font-weight: 600;
    font-style: normal;
}

를 넣어줬습니다.

폰트파일도 레이아웃의 font폴더에 넣어줬구요.

이 css 파일의 경로를 

관리자 화면 → 에디터 → 공통 설정 → 본문 글꼴 → CSS 파일 추가

에 넣어줍니다

이렇게 하니

무사히 에디터의 폰트 목록에 추가되더군요.

오랜만에 한 삽질이라 기록으로 남겨봅니다.