[PHP, Javascript] 네이버 스마트에디터2 - 사진첨부 기능 포함(PHP업로드) , 글쓰기파일

이번에는 많이들 사용하는 네이버 스마트에디터2를 달아 보도록 한다.

 

공개된 관련 소스 링크 주소는 https://github.com/naver/smarteditor2/releases/tag/v2.8.2.3 이다.

 

내용중에 zip로 압축된 Source code(zip) 항목을 클릭하여 다운받으면 된다.

 

압축을 풀고, 파일을 올려보자. 

 

나의 경우 /smarteditor2/폴더를 root에 만들고 이안에 옮겨놓았다. 그리고, 위 화면의 upload 폴더에 chmod 707 쓰기 권한을 두도록 하자.

 

이 upload는 사진 첨부할때 업로드되는 폴더이다.

 

그리고 아래 화면과 같이 /smarteditor2/sample/photo_uploader/ 폴더내 소스확인 및 수정이 필요한 부분을 살펴보자.

 

화면과 같이 file_uploader.php 파일과, file_uploader_html5.php 를 소스를 열어보자.

 

file_uploader.php

 

 

 

file_uploader_html5.php

 

 

 

위 화면을 보면 /smarteditor2/upload 폴더의 사진업로드 경로를 잡아준다. 이로써 에디터내에서 올린 사진링크가 잘 적용되도록 해준다.

 

이제 에디터 소스올리고, 준비과정은 끝이 났다.

 

본격적으로 에디터를 글쓰기할때 적용시켜 보도록 한다.

 

notice_write.php 라고 글쓰기 파일내에 주요 소스 부분들을 간추려 보았다.

 

<script type="text/javascript" src="/smarteditor2/js/HuskyEZCreator.js"></script> <textarea name="content" id="content" rows="10" cols="100" style="width:680px; height:300px; display:none;"></textarea> <a href="javascript:submitContents(this)"><img src="버튼이미지" border=0></a> <script language="javascript"> var oEditors = []; var sLang = "ko_KR"; // 언어 (ko_KR/ en_US/ ja_JP/ zh_CN/ zh_TW), default = ko_KR // 추가 글꼴 목록 //var aAdditionalFontSet = [["MS UI Gothic", "MS UI Gothic"], ["Comic Sans MS", "Comic Sans MS"],["TEST","TEST"]]; nhn.husky.EZCreator.createInIFrame({  oAppRef: oEditors,  elPlaceHolder: "content",  sSkinURI: "/smarteditor2/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 : aAdditionalFontSet,  // 추가 글꼴 목록   fOnBeforeUnload : function(){    //alert("완료!");   },   I18N_LOCALE : sLang  }, //boolean  fOnAppLoad : function(){   //예제 코드   //oEditors.getById["content"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);  },  fCreator: "createSEditor2" }); function pasteHTML(filepath) { // var sHTML = "<span style='color:#FF0000;'>이미지도 같은 방식으로 삽입합니다.<\/span>";  var sHTML = '<span style="color:#FF0000;"><img src="'+filepath+'"></span>';  oEditors.getById["content"].exec("PASTE_HTML", [sHTML]); } function showHTML() {  var sHTML = oEditors.getById["content"].getIR();  alert(sHTML); }   function submitContents(elClickedObj) {  oEditors.getById["content"].exec("UPDATE_CONTENTS_FIELD", []); // 에디터의 내용이 textarea에 적용됩니다.    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("content").value를 이용해서 처리하면 됩니다.  try {   var form2 = document.f;   if (!form2.name.value) {    alert("작성자 이름을 입력해 주십시오");    form2.name.focus();    return;   }   if (!form2.subject.value) {    alert("글제목을 입력해 주십시오.");    form2.subject.focus();    return;   }   if (document.getElementById("content").value=="<p><br></p>") {    alert("내용을 입력해 주세요.");    oEditors.getById["content"].exec("FOCUS",[]);    return;   }   form2.action="notice_write_ok.php";   //elClickedObj.form.submit();   form2.submit();  } catch(e) {alert(e);} } function setDefaultFont() {  var sDefaultFont = '궁서';  var nFontSize = 24;  oEditors.getById["content"].setDefaultFont(sDefaultFont, nFontSize); } function writeReset() {  document.f.reset();  oEditors.getById["content"].exec("SET_IR", [""]); } </script>

 

화면 캡처 이미지는 다음과 같다.

 

 

 

 

추가로, 좀더 상세한 소스 네이버스마트에디터2 설명이 필요하면 아래의 화면 사진의 주소로 접속하여 살펴보도록 하자.