[SmartEditor2] 폰트 추가시키기

구글에 스마트에디터2 폰트 추가를 서칭해보았으나, 내 코드에서는 추가가 안되어서 작성함

링크 :  https://developers.naver.com/forum/posts/4338

정석은 해당 부분을 따라하는 것인데... 이렇게 해도 추가가 안되었다.

SmartEditor2.html의 코드를 해당 부분처럼 AdditionalFontList 주석되어있는 부분을 풀고 웹폰트를 추가해보았으나 결과는 실패

 

그래서 코드를 이것저것 살펴보다가 게시판 글작성, 수정 페이지에서 스마트에디터를 생성하는 자바스크립트 코드를 수정해보자 결론내렸다.

 

나눔고딕 폰트를 추가시켜보았다. 

 

※ 글쓰기 / 수정 페이지의 스마트에디터2 생성 부분 코드에 아래처럼 수정한다. 결론적으로 htParams 코드가 추가됨 

<script type="text/javascript">
	var oEditors = [];
	nhn.husky.EZCreator.createInIFrame({
		htParams : {
			bUseToolbar : true,				// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseVerticalResizer : true,		// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseModeChanger : false,			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
			//bSkipXssFilter : true,		// client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
			aAdditionalFontList : [['Nanum Gothic', '나눔고딕']],		// 추가 글꼴 목록
			fOnBeforeUnload : function(){
				//alert("완료!");
			}
		},
		oAppRef: oEditors,
		elPlaceHolder: "content",
		sSkinURI: "./smarteditor/SmartEditor2Skin.html",
		fCreator: "createSEditor2"
	});
	function submitContents(elClickedObj) {
		oEditors.getById["content"].exec("UPDATE_CONTENTS_FIELD", []);                    
		try {
		elClickedObj.form.submit();
		} catch(e) {}
	}
</script>

코드설명 -- AdditionalFontList [['Nanum Gothic', '나눔고딕']]

첫 인자는 font-family로 선언한 웹폰트 이름 / 두번째 인자는 스마트에디터 버튼에 나타내고자 하는 이름 이라고 보면된다.

 

물론 font.css에 해당 폰트를 추가시킨 상태여야 한다. 

※ font.css 에 원하는 글꼴 선언 / 추가 해줘야한다.

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.ttf) format('truetype');
}

 

적용 예시 ↓