SmartEditor2 스마트에디터 기본 글꼴 변경하기

 

SmartEditor2 (스마트에디터2)란?

WYSIWYG 모드 및 HTML 편집 모드와 TEXT 모드를 제공하고, 자유로운 폰트 크기 설정 기능, 줄 간격 설정 기능, 단어 찾기/바꾸기 기능 등 편집에 필요한 다양한 기능을 제공하는 네이버에서 만든 에디터 

 

http://naver.github.io/smarteditor2/user_guide/

SmartEditor2 사용자 가이드 · GitBook

 

스마트에디터의 기본글꼴은 돋움 9pt로 초기 설정되어있다.

스마트에디터 기본 모습

 

 

 

스마트에디터 글꼴 목록에 글꼴 추가하는 방법

 

1) 스마트에디터를 불러오는 스크립트 내의 옵션 htParams 안에 한줄 추가한다.

aAdditionalFontList : [["Noto Sans KR","Noto Sans"], ["Malgun Gothic","Malgun Gothic"]]; //추가할 글꼴 목록, 이렇게 하면 Noto Sans KR과 Magun Gothic체가 목록 맨 끝에 생기게 된다.

 

이때 쓰는 폰트명을 대/소문자 구별하여 정확히 써야한다.

 

[적용예시]

    $(".smarteditor2").each( function(index){
        var get_id = $(this).attr("id");

        if( !get_id || $(this).prop("nodeName") != 'TEXTAREA' ) return true;

        nhn.husky.EZCreator.createInIFrame({
            oAppRef: oEditors,
            elPlaceHolder: get_id,
            sSkinURI: g5_editor_url+"/SmartEditor2Skin.html",	
            htParams : {
                bUseToolbar : true,				// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
                bUseVerticalResizer : true,		// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
                bUseModeChanger : true,			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
                bSkipXssFilter : true,		// client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
                aAdditionalFontList : [["Noto Sans KR","Noto Sans"], ["Malgun Gothic","Malgun Gothic"]]; //추가할 글꼴 목록,
                fOnBeforeUnload : function(){
                    //alert("완료!");
                }
            }, //boolean
            fOnAppLoad : function(){       
                //예제 코드
                //oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
            },
            fCreator: "createSEditor2"
        });
    });

 

2) /css/smart_editor2.css 파일 상단에 @font-face를 추가하여 웹폰트를 불러온다.

  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 500;
     src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
          url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
          url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
   }

 

 

3) SmartEditor2Skin.html 파일에서 <li class="se2_division husky_seditor_font_separator"></li> 다음에 폰트리스트를 한줄 추가해준다.  이 코드는 추가하지 않아도 스크립트 수정하면 자동으로 추가된다.

<li class="se2_division husky_seditor_font_separator"></li>
<li><button type="button"><span>Noto Sans KR<span>(</span><em style="font-family:'Noto Sans KR';">가나다라</em><span>)</span></span></button></li> <!--추가-->

 

 

---

 

스마트에디터 기본 글꼴 변경하기

글꼴 목록에 글꼴을 추가하는 것이 아니고, 처음 기본 세팅부터 기본 글꼴이 돋움체가 아닌 다른 폰트로 변경하는 방법이다.

 

1) 스마트에디터를 불러오는 스크립트 내의 옵션 htParams 안에 아래 코드를 추가한다.

SE2M_FontName: {

htMainFont: {'id': 'Noto Sans KR','name': 'Noto Sans KR', 'url': '','cssUrl': ''} // 기본 글꼴 설정
 }, 

 

그리고 fOnAppLoad부분에 한줄 더 추가한다.

oEditors.getById['contents'].setDefaultFont( "Noto Sans KR", 12);  // 기본 글꼴 설정 추가

여기서 12는 기본으로 설정할 폰트사이즈다.

 

이때 쓰는 폰트명을 대/소문자 구별하여 정확히 써야한다.

 

[적용예시]

$(".smarteditor2").each( function(index){
    var get_id = $(this).attr("id");

    if( !get_id || $(this).prop("nodeName") != 'TEXTAREA' ) return true;

    nhn.husky.EZCreator.createInIFrame({
        oAppRef: oEditors,
        elPlaceHolder: get_id,
        sSkinURI: g5_editor_url+"/SmartEditor2Skin.html",	
        htParams : {
            bUseToolbar : true,				// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseVerticalResizer : true,		// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseModeChanger : true,			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
            bSkipXssFilter : true,		// client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
            SE2M_FontName: {
            htMainFont: {'id': 'Noto Sans KR','name': 'Noto Sans KR', 'url': '','cssUrl': ''} // 기본 글꼴 설정
            },
            fOnBeforeUnload : function(){
                //alert("완료!");
            }
        }, //boolean
        fOnAppLoad : function(){
            oEditors.getById['contents'].setDefaultFont( "Noto Sans KR", 12);  // 기본 글꼴 설정 추가	        
            //예제 코드
            //oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
        },
        fCreator: "createSEditor2"
    });
});

 

2) /css/smart_editor2.css 파일 상단에 @font-face를 추가하여 웹폰트를 불러온다.

여기서 정의하는 Noto Sans KR 대소문자 구별하여 동일하게 1번의 옵션의 폰트 아이디/네임에 입력해야한다.

  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 500;
     src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
          url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
          url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
   }

 

 

3) /css/smart_editor2_in.css 파일에서 body,.se2_inputarea에 폰트 패밀리를 추가한다. ('Noto Sans KR' 추가)

기본 폰트사이즈나 줄간격도 이 곳에서 변경하면 된다. 나의 경우에는 폰트를 12px -> 12pt로 변경하였고 줄간격도 변경하였다.

/*변경 전*/
body,.se2_inputarea{margin:0;padding:0;font-family:'돋움',Dotum,Helvetica,Sans-serif;font-size:12px;line-height:1.5}

/*변경 후*/
body,.se2_inputarea{margin:0;padding:0;font-family:'Noto Sans KR','돋움',Dotum,Helvetica,Sans-serif;font-size:12pt;line-height:1.7}

 

3) /css/smart_editor2_out.css 파일에서 .se2_outputarea,.se2_outputarea th,.se2_outputarea td에 폰트 패밀리를 추가한다. ('Noto Sans KR' 추가)

/*변경 전*/
.se2_outputarea,.se2_outputarea th,.se2_outputarea td{margin:0;padding:0;color:#666;font-size:12px;font-family:'돋움',Dotum,'굴림',Gulim,Helvetica,Sans-serif;line-height:1.5}

/*변경 후*/
.se2_outputarea,.se2_outputarea th,.se2_outputarea td{margin:0;padding:0;color:#666;font-size:12pt;font-family:'돋움',Dotum,'굴림',Gulim,Helvetica,Sans-serif;line-height:1.7}