네이버 SmartEditor2 사용

https://github.com/naver/smarteditor2

GitHub - naver/smarteditor2: Javascript WYSIWYG HTML editor

여기에서 다운받아서

원하는 폴더의 위치로 옮긴다

 

 

(나는 다행하게도? 미리 다운 받아져있었음 ㅜㅜ)

 

마크업 하는 파일에

 

 

링크를 걸어준다

<script type="text/javascript" charset="utf-8" src="/include/smarteditor2/js/service/HuskyEZCreator.js"></script>

 

나는 www/include/ ~~ 에 js 파일이 있어서 이렇게 링크 걸어주었음 !

(js 파일 찾아서 링크 거는게 관건.)

 

 

   마크업은   

 

<div id="smareditor">

  <textarea name="ir1" id="ir1" rows="20" cols="10"></textarea>

</div>

 

에디터가 들어갈 부분은

꼭 textarea로 만들어줘야함 !

 

 

 

   스크립트는   

 

<script type="text/javascript">
        var oEditors = [];
                        
           $(function(){
               nhn.husky.EZCreator.createInIFrame({
                   oAppRef: oEditors,
                   elPlaceHolder: "ir1",
                   sSkinURI: "include/smarteditor2/SmartEditor2Skin.html",  
                   htParams : {
                      // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
                      bUseToolbar : true,             
                      // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
                     bUseVerticalResizer : true,     
                     // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
                    bUseModeChanger : true,         
                    fOnBeforeUnload : function(){  
                     }
                  }, 
                           
               });
          });
</script>

 

 

주의해야 할 것은

‼ script의 elPlaceHolder 와 마크업의 textarea name과 id의 이름이 일치 해야 한다는 것 ‼

 

 

 

>> 작업하면서 맞이했던 오류들은 다음편에 작성 예정

 

 

 

참고 https://lux.cuenet.kr/45