다음 에디터 다운로드
https://github.com/kakao/DaumEditor/tree/gh-pages/download
7.4.x 버전이 사람들이 가장 많이 사용하고 있는듯
본인은 daumeditor-7.4.9.zip 파일을 다운 받아서 사용함.
첫번째로 압축을 해제하여 프로젝트에 폴더를 업로드 한다.
editor.html 파일을 실행시켜보면 다음에디터를 확인 할 수 있다.
다음에디터는 스마트 에디터와 다르기 때문에 html파일의 양이 많다.
긴 소스를 그대로 가져다가 사용하는 것은 비효율 적이라 생각하기때문에
editor.html 파일을 복사하여 다른 이름으로 저장을 한다.
php를 사용하면 editor.php
jsp를 사용하면 editor.jsp 와 같이
자신이 사용하는 언어에 맞게 이름을 지정하여 다른이름으로 저장을 한다.
우선 1 ~ 28 line 에 아래의 두개를 제외하고 지워 준다.8
1 2 | <link rel="stylesheet" href="css/editor.css" type="text/css" charset="utf-8"/><script src="js/editor_loader.js?environment=development" type="text/javascript" charset="utf-8"></script> |
( ' ?environment=development ' 부분도 지워준다 이 부분은 개발용이기 때문 )
두번째로 <div class="body">로 시작하는 29 line 부터 457 line 까지는 그대로 놔둔다.
( line은 정확하지 않을 수 있으나 대충 어디쯤인지 알수 있을 것이다. )
29 ~ 457 line 사이에 form 태그가 있다.
이 부분을 복사하여 에디터를 불러온 곳에서 사용하거나
자신의 form 태그를 사용 하면된다. (editor 파일에서는 지우도록한다.)
단 자신의 form 태그를 사용하는 경우는 아래에 script를 변경해야하니 그냥 복사해서 사용하는 것이 편하다.
(본인은 복사하여 action 만 변경하여 사용했음)
div 밑에 아래와 같은 script가 있는데 이 script 또한 그대로 놔둔다.
이부분은 에디터으리 설정을 바꾸는 부분으로 필요에 따라 수정을 하고 지우지 않고 그대로 놔둔다 .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <script type="text/javascript"> var config = { txPath: '', /* 런타임 시 리소스들을 로딩할 때 필요한 부분으로, 경로가 변경되면 이 부분 수정이 필요. ex) /xxx/xxx/ */ txService: 'sample', /* 수정필요없음. */ txProject: 'sample', /* 수정필요없음. 프로젝트가 여러개일 경우만 수정한다. */ initializedId: "", /* 대부분의 경우에 빈문자열 */ wrapper: "tx_trex_container", /* 에디터를 둘러싸고 있는 레이어 이름(에디터 컨테이너) */ form: 'tx_editor_form'+"", /* 등록하기 위한 Form 이름 */ txIconPath: "images/icon/editor/", /*에디터에 사용되는 이미지 디렉터리, 필요에 따라 수정한다. */ txDecoPath: "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 /* 지정된 본문영역의 넓이가 있을 경우에 설정 */ } }; EditorJSLoader.ready(function(Editor) { var editor = new Editor(config); }); </script> |
그 다음으로 아래와 같은 스크립트가 있는데 이부분은 에디터를 전송하는 부분이다.
에디터를 적용하는 곳에 넣을 스크립트 이므로 우선 복사하여 다른 곳에 저장해 놓고,
나머지 부분을 모두 지우도록 한다. (아래의 스크립트도 editor 파일에서 같이 지운다.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!-- Sample: Saving Contents --><script type="text/javascript"> /* 예제용 함수 */ function saveContent() { Editor.save(); // 이 함수를 호출하여 글을 등록하면 된다. } /** * Editor.save()를 호출한 경우 데이터가 유효한지 검사하기 위해 부르는 콜백함수로 * 상황에 맞게 수정하여 사용한다. * 모든 데이터가 유효할 경우에 true를 리턴한다. * @function * @param {Object} editor - 에디터에서 넘겨주는 editor 객체 * @returns {Boolean} 모든 데이터가 유효할 경우에 true */ function validForm(editor) { // Place your validation logic here // sample : validate that content exists var validator = new Trex.Validator(); var content = editor.getContent(); if (!validator.exists(content)) { alert('내용을 입력하세요'); return false; } return true; } /** * Editor.save()를 호출한 경우 validForm callback 이 수행된 이후 * 실제 form submit을 위해 form 필드를 생성, 변경하기 위해 부르는 콜백함수로 * 각자 상황에 맞게 적절히 응용하여 사용한다. * @function * @param {Object} editor - 에디터에서 넘겨주는 editor 객체 * @returns {Boolean} 정상적인 경우에 true */ function setForm(editor) { var i, input; var form = editor.getForm(); var content = editor.getContent(); // 본문 내용을 필드를 생성하여 값을 할당하는 부분 var textarea = document.createElement('textarea'); textarea.name = 'content'; textarea.value = content; form.createField(textarea); /* 아래의 코드는 첨부된 데이터를 필드를 생성하여 값을 할당하는 부분으로 상황에 맞게 수정하여 사용한다. 첨부된 데이터 중에 주어진 종류(image,file..)에 해당하는 것만 배열로 넘겨준다. */ var images = editor.getAttachments('image'); for (i = 0; i < images.length; i++) { // existStage는 현재 본문에 존재하는지 여부 if (images[i].existStage) { // data는 팝업에서 execAttach 등을 통해 넘긴 데이터 alert('attachment information - image[' + i + '] \r\n' + JSON.stringify(images[i].data)); input = document.createElement('input'); input.type = 'hidden'; input.name = 'attach_image'; input.value = images[i].data.imageurl; // 예에서는 이미지경로만 받아서 사용 form.createField(input); } } var files = editor.getAttachments('file'); for (i = 0; i < files.length; i++) { input = document.createElement('input'); input.type = 'hidden'; input.name = 'attach_file'; input.value = files[i].data.attachurl; form.createField(input); } return true; }</script><div><button onclick='saveContent()'>SAMPLE - submit contents</button></div> |
여기까지가 editor 파일에 대한 수정은 끝이며,
위의 js 파일이나, css 파일, 이미지 파일같은 경우는 자신에 맞게 수정이 필요하다.
이제 실제로 에디터를 적용할 소스를 열어서 위에서 수정한 editor 파일을 불러오도록 한다.
(제목, 이름 등... 미리 작성해 놓은 form 페이지)
editor파일에서 복사해온 form 태그를 넣어주고,
하단에 위에서 복사해서 다른곳에 저장해 놓았던 스크립트를 넣는다.
<div><button onclick='saveContent()'>SAMPLE - submit contents</button></div>
스크립트 하단에 위와 같은 버튼이 있는데, 이 버튼이 전송하는 버튼이다.
saveContent() 함수가 글을 등록하는 함수이며, validForm() 함수가 폼의 유효성을 체크하는 부분이다.
자신의 form에 맞게 validForm() 함수 부분에 유효성 체크하는 소스를 작성하면 된다.
마지막으로 setForm() 함수가 에디터 부분을 form으로 전송하는 필드를 생성하는 부분인데,
textarea.name = 'content';
중간에 위와 같은 부분의 content를 자신의 필드명으로 변경 해주면 된다.
위의 작업을 마치게 되면 다음 에디터가 정상적으로 작동하는 것을 확인 할 수 있다.
단 이부분은 에디터를 적용하고 전송만 하는 부분으로 이미지 첨부, 파일 첨부에 대해서는 수정이 필요하다.
'기타' 카테고리의 다른 글
| 스프링 mysql 설정 root-context.xml 에러 (0) | 2017.01.06 |
|---|---|
| Project facet Java version 1.8 is not supported. (0) | 2017.01.02 |
| ASP json object doesn't support this property or method 에러 (0) | 2016.10.25 |
| 에디트 플러스 백업 파일 안생기게하기 .bak (0) | 2016.10.11 |
| svn : E15504: is already locked 에러 발생 (0) | 2015.07.29 |