[스마트에디터2] 반응형 사이즈 조정하기

게시판 글쓰기 페이지의 본문 작성 시 textarea 를 넣어 단순 텍스트를 입력합니다.

다만 편의성이 떨어져 웹편집기를 적용하여 개발을 하는 데,

그 중 제가 자주 사용하는 스마트에디터에 관한 내용입니다.

 

일단 소스를 작성합니다.

 

<form method="post" enctype="multipart/form-data" action="">
<textarea name="storyCon" id="storySmarteditor2" cols="100" rows="10" class="smarteditor2">{data.storyCon}</textarea>
<button type="submit" class="btn_submit">저장</button>
</form>

<script src="/data/smarteditor2/js/HuskyEZCreator.js"></script>
<script>
  (function($){
    oEditors = [];

    $(document).ready(function(){
      $(".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: "/data/smarteditor2/SmartEditor2Skin.html",
          htParams: {
            bUseToolbar: true,
            bUseVerticalResizer: true,
            bUseModeChanger: true,
            bSkipXssFilter: true,
            fOnBeforeUnload: function(){
              // alert("완료!");
            }
          },
          fOnAppLoad: function(){

          },
          fCreator: "createSEditor2"
        });
      });

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

          $(this).html(oEditors.getById[get_id].getIR());
        });

        $('.btn_submit').closest('form').submit();
      });
    });
  })(jQuery);
</script>

 

 

그리고 화면을 보면, 특히 반응형에서는 화면에 맞지 않아 잘리는 부분이 보입니다.

이럴 때 유용한 팁을 알려드립니다.

일단, 스크립트에서 elPlaceHolder 로 설정한 textarea 에 style="width=100%" 를 추가합니다.

 

<textarea name="storyCon" id="storySmarteditor2" cols="100" rows="10" class="smarteditor2" style="width:100%;">{data.storyCon}</textarea>

 

그 다음엔 /smarteditor2/css/smart_editor2.css 를 찾아가 소스를 추가합니다.

css 상단, 제 파일 기준으로는 line 6 이며, #smart_editor2 span 의 값이 설정되기 전에 아래의 소스를 추가합니다.

#smart_editor2{margin-right: 1px !important;min-width: 100px !important;}

그 후 같은 css 내 맨끝 하단으로 내려가 다음 소스를 추가합니다.

@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){clear:both;margin-left:4px}
 #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}
}

 

결과 :