스마트 에디터 기본 글꼴 변경 및 반응형 적용하기
페이지 정보
작성자
운영자
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 34회
작성일 25-06-11 10:02
본문
1. smarteditor2 폴더안에 "config.js" 파일을 열어 아래 내용을 추가합니다.
:
bSkipXssFilter : true, // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
aAdditionalFontList : [["SCoreDream","에스코어 드림"]], // 추가 글꼴 목록
fOnBeforeUnload : function(){
:
※ 원하는 "SCoreDream"은 실제 폰트명이고 "에스코어 드림"은 에디터에 보이는 폰트명입니다.
2. smarteditor2/css/ko_KR/smart_editor2.css 파일을 열어 하단에 반응형 미디어 쿼리를 추가합니다.
#smart_editor2 {
margin-right: 1px !important;
min-width: 100px !important;
}
@media screen and (max-width: 640px) {
#smart_editor2 .se2_text_tool ul:nth-child(4n) {
clear: both;
}
#smart_editor2 .se2_text_tool ul {
margin-bottom: 4px;
}
#smart_editor2 .se2_text_tool ul:nth-child(n+4) {
margin-bottom: 0;
}
#smart_editor2 .se2_text_tool .se2_multy,
#smart_editor2 .se2_text_tool .se2_multy button,
#smart_editor2 .se2_text_tool .se2_multy button span {
height: 54px;
}
}
@media screen and (max-width: 515px) {
#smart_editor2 .se2_text_tool ul:nth-child(3n) {
clear: both;
margin-left: 4px;
}
#smart_editor2 .se2_text_tool ul:nth-child(6n),
#smart_editor2 .se2_text_tool ul:nth-child(4n) {
clear: none;
margin-left: 0;
}
#smart_editor2 .se2_text_tool ul:nth-child(n+3) {
margin-bottom: 0;
}
}
@media screen and (max-width: 370px) {
#smart_editor2 .se2_text_tool ul:nth-child(2n),
#smart_editor2 .se2_text_tool ul:nth-child(3n) {
clear: both;
margin-left: 4px;
}
#smart_editor2 .se2_text_tool ul:nth-child(6n),
#smart_editor2 .se2_text_tool ul:nth-child(4n) {
clear: none;
margin-left: 0;
}
#smart_editor2 .se2_text_tool ul:nth-child(n+3) {
margin-bottom: 0;
}
#smart_editor2 .se2_text_tool .se2_multy,
#smart_editor2 .se2_text_tool .se2_multy button,
#smart_editor2 .se2_text_tool .se2_multy button span {
height: 79px;
}
}
@media screen and (max-width: 325px) {
#smart_editor2 .se2_text_tool .se2_multy,
#smart_editor2 .se2_text_tool .se2_multy button,
#smart_editor2 .se2_text_tool .se2_multy button span {
height: 29px;
}
#smart_editor2 .se2_text_tool .se2_multy {
border-bottom: 1px solid #e0dedf;
}
}
2. smarteditor2/css/ko_KR/smart_editor2_in.css 파일을 열어 에디터 기본 글꼴을 변경합니다.
@charset "UTF-8";
@font-face {
font-family: 'SCoreDream';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'SCoreDream';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'SCoreDream';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'SCoreDream';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'SCoreDream';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'SCoreDream';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'SCoreDream';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
/* NHN Web Standardization Team (http://html.nhndesign.com/) HHJ 090226 */
/* COMMON */
body,.se2_inputarea{margin:0;padding:0;font-family:'SCoreDream','돋움',Dotum,Helvetica,Sans-serif;font-size:14.5px;line-height:1.5}
우여곡절끝에 스마트 에디터 기본글꼴 및 반응형 에디터 구현에 성공했네요.
인터넷에 여러가지 설명이 있지만 가장 간단하고 확실한 방법입니다.
그리고 스마트 폰에서 스마트 에디터 사용하려면 그누보드 config.php파일을 열어 아래 설정을 변경해 줘야합니다.
// 모바일 기기에서 DHTML 에디터 사용여부를 설정합니다.
define('G5_IS_MOBILE_DHTML_USE', true);
댓글목록
등록된 댓글이 없습니다.