다음 에디터 적용 (API 사용법1)

다음에디터를 사용하기 위해서는 우선 다음 개발자 센터를 알아야 합니다.

다음 개발자 센터: http://developers.daum.net/

현재 2017. 10. 25 을 기준으로 메인 화면에 아래와 같은 문구가 떠 있을 것입니다.

그렇다. Kakao Developers로 통합이 되었다. 하지만, 기존에 만든 서비스는 유지를 시켜준다고 합니다.

다음 API를 연동하여 개발중일 때, 모르는 부분이나 오류같은 것에 대한 사항은 https://devtalk.kakao.com/ 이곳에서

꾸준히 질의응답을 하면 됩니다.

아무튼... 현재는 에디터 소스를 긷 허브에서 받아야 합니다. 그리고 본인 소스에 적용을 하면 됩니다.

그리고 한가지 더 알아둘 사항이 있습니다.

다음에디터는 더이상 업데이트 하지 않습니다. 

그 말은 이후에 발견되는 오류 사항에 대해서는 응대하지 않는다는 의미라고 보시면 됩니다.

따라서, 에디터를 처음으로 선택하시는 입장이라면 다른 에디터를 추천드리고 싶습니다.

만약, 당신이 웹접근성을 고려하여 에디터를 붙이기 위함이라면 저는 서머노트 라는 에디터를 추천 드리고 싶습니다.

https://github.com/daumcorp/DaumEditor

에서 gitHub 소스 받기를 받습니다.

혹시 gitHub의 소스를 내려받는 방법을 모르신다면 (아래의 gitHub 소스 내려 받기)를 참고 하세요.

daumeditor 라는 폴더의 파일을  폴더에 붙여넣습니다.

그리고 daumeditor 디렉토리 밑에 하단 파일을 include 해주세요.

editor_frame.html

<!-- 다음 에디터 -->
<link rel="stylesheet" href="/daumeditor/css/editor.css" type="text/css" charset="utf-8"/>
<script src="/daumeditor/js/editor_loader.js" type="text/javascript" charset="utf-8"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

다음에서 제공하는 js를 받기 위해 위의 스크립트를 붙여넣습니다.

/* 다음 에디터 */
    $.ajax({
        url : "/daumeditor/editor_frame.html",
        success : function(data){
            $("#editor_frame").html(data);
            // 에디터UI load
            var config = {
                /* 런타임 시 리소스들을 로딩할 때 필요한 부분으로, 경로가 변경되면 이 부분 수정이 필요. ex) http://xxx.xxx.com */
                txHost: '',
                /* 런타임 시 리소스들을 로딩할 때 필요한 부분으로, 경로가 변경되면 이 부분 수정이 필요. ex) /xxx/xxx/ */
                txPath: '',
                /* 수정필요없음. */
                txService: 'sample',
                /* 수정필요없음. 프로젝트가 여러개일 경우만 수정한다. */
                txProject: 'sample',
                /* 대부분의 경우에 빈문자열 */
                initializedId: "",
                /* 에디터를 둘러싸고 있는 레이어 이름(에디터 컨테이너) */
                wrapper: "tx_trex_container",
                /* 등록하기 위한 Form 이름 */
                form: "userBoardInsert",
                /*에디터에 사용되는 이미지 디렉터리, 필요에 따라 수정한다. */
                txIconPath: "/daumeditor/images/icon/editor/",
                /*본문에 사용되는 이미지 디렉터리, 서비스에서 사용할 때는 완성된 컨텐츠로 배포되기 위해 절대경로로 수정한다. */
                txDecoPath: "/daumeditor/images/deco/contents/",
                canvas: {
                    styles: {
                        /* 기본 글자색 */
                        color: "#123456",
                        /* 기본 글자체 */
                        fontFamily: "굴림",
                        /* 기본 글자크기 */
                        fontSize: "10pt",
                        /*기본 배경색 */
                        backgroundColor: "#fff",
                        /*기본 줄간격 */
                        lineHeight: "1.5",
                        /* 위지윅 영역의 여백 */
                        padding: "8px"
                    },
                    showGuideArea: false
                },
                events: {
                    preventUnload: false
                },
                sidebar: {
                    attachbox: {
                        show: true,
                        confirmForDeleteAll: true
                    }
                },
                size: {
                    /* 지정된 본문영역의 넓이가 있을 경우에 설정 */
                    contentWidth: 700
                }
            };
            
            //에디터내에 환경설정 적용하기
            new Editor(config);
        }
    });
    
    //form submit 버튼 클릭
    $("#save_button").click(function(){
        //다음에디터가 포함된 form submit
       
    });
 
//Editor.save() 호출 한 다음에 validation 검증을 위한 함수
//validation 체크해줄 입력폼들을 이 함수에 추가 지정해줍니다.
function validForm(editor) {
    var validator = new Trex.Validator();
    var content = editor.getContent();
    if (!validator.exists(content)) {
        alert('내용을 입력하세요');
        return false;
    }
    return true;
}
 
//validForm 함수까지 true값을 받으면 이어서 form submit을 시켜주는  setForm함수
function setForm(editor) {
    var content = editor.getContent();
    $("#content").val(content)
    return true;
}
/*다음에디터 끝 */

<form:form name="userBoardInsert" id="userBoardInsert" action="brd_intgr_wr.do" method="post" >
<!-- 에디터프레임호출 영역 -->
   <div id="editor_frame"></div>
   <!-- 실제 값이 담겨져서 넘어갈 textarea 태그 -->
   <textarea name="content" id="content" rows="10" cols="100" style="width:766px; height:412px;display: none;"></textarea>
   <input type="button" id="save_button" value="내용전송"/>
</form:form>

그리고 /daumeditor/js/editor.js 파일을 보시면 

약 89번째 라인에 "trex/attachbox/attachbox_ui.js", 라는 코드가 있는데

 주석처리 합니다.

출력을 원하지 않다면 "/daumeditor/js/development_environments.js" 파일 58번째 줄에 있는

indicator.innerHTML = "DEVELOPMENT MODE"; 이렇게 변경 하시면 됩니다.

이밖에도 본인의 소스에 붙여 넣으시고 나는 오류는 메시지를 보면서 하나씩 고쳐 나가야 합니다.

+ gitHub 소스 내려 받기 입니다.

위의 url을 타고 들어갑니다.

오른쪽 상단에 보면 Clone or download 가 있습니다.

위를 눌러 zip파일로 받으시면 목록에 보이는 모든 파일을 받을 수 있습니다.

Git이 무엇인지 모른다거나 GitHub가 무엇인지 모른다면 다른분들의 포스팅을 참고 하시면 됩니다.

개인적으로 아래의 페이지들을 추천 합니다.

git은 언제 어떻게 해야 할까? : http://dogfeet.github.io/articles/2012/git-merge-rebase.html

git 사용법 : https://rogerdudler.github.io/git-guide/index.ko.html

참고 ㅣ http://hellogk.tistory.com/64