Smart Editor 2 modal 로 띄울때 이슈

부트스트랩을 이용해 화면 디자인을 하다보니 modal을 사용할때가 많습니다.

modal 을 띄울때 select2 콘트롤도 부모 modal id를 지정해주지 않으면 제대로 동작하지 않았었는데 네이버 스마트에디터도 비슷한 현상이 나타났습니다. 

 

 

textarea에 smartEditor ID값을 지정해주고 정상적인 modal 화면을 구성해주었습니다.

<div class="col-lg-12">
    <div>
        <label for="smartEditor" class="form-label">내용</label>
        <textarea id="smartEditor" style="width:100%;height:500px;"></textarea>
    </div>
</div>

 

 

$('#smartEditor').modal('show'); 호출을 통해 modal 을 띄워봅니다.

모달은 정상적으로 떳는데 스마트에디터가 나오지 않네요

 

 

 

 

스마트에디트가 나와야 하는 화면이 비어있습니다.

F12를 눌러 크롬 개발자도구를 열어 iframe 태그를 확인해봅니다.  

style에 height 값이 0으로 잡힙니다. modal을 띄울 때 화면 갱신이 제대로 되지 않는 것으로 판단됩니다. 

<iframe frameborder="0" scrolling="no" id="smartEditor_iframe" src="../js/naver/SmartEditor2Skin.html" style="width: 100%; height: 0px;">
</iframe>

 

 

 

스마트에디터 생성코드인데 문제없는 것을 확인했습니다. 

결국 화면 갱신 시점에 사이즈 값이 제대로 반영이 되지 않는 것으로 판단해서 해당 코드를 수정해봅니다.

nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "smartEditor",
    sSkinURI: "../js/naver/SmartEditor2Skin.html",
    fCreator: "createSEditor2",
    htParams : {
          // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
          bUseToolbar : true,             
          // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
          bUseVerticalResizer : true,     
          // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
          bUseModeChanger : true,         
          fOnBeforeUnload : function(){

          }
    }, 
});

 

 

HuskyEZCreator.js 파일을 열어서 약간의 수정을 해줍니다.

 

제 파일 기준으로 52번째 줄에 아래와 같은 코드가 있는데 제일 마지막 줄을 새로이 추가해줍니다.

iframe 태그에 접근할 수 있는 id 값을 지정해주는 코드입니다.

try{
    elIFrame = document.createElement("<IFRAME frameborder=0 scrolling=no>");
}catch(e){
    elIFrame = document.createElement("IFRAME");
    elIFrame.setAttribute("frameborder", "0");
    elIFrame.setAttribute("scrolling", "no");
    elIFrame.setAttribute("id", elPlaceHolder.id + '_iframe'); // iframe ID 지정
}

 

 

 

그리고 modal을 띄우기 전에 아래처럼 iframe 을 reload 해주는 코드를 작성해줍니다.

 

let srcUrl = $('#smartEditor_iframe').attr("src");
$('#smartEditor_iframe').attr("src", srcUrl);

$('#boardEditor').modal('show');

 

 

이렇게 수정후 모달을 띄우니 정상적으로 스마트에디터가 로딩되는 것을 확이할 수 있습니다.