posted by 방랑군 2012. 1. 7. 20:49
출처 :  http://inidu2.blog.me/110093858922 

게시판에 에디터 기능을 넣으려고 알아보니 CKEditor가 유명해서 한번 달아 봤다.

기능도 좋고 모양도 깔끔하고 꽤 쓸만한 것 같다.


닷넷 환경이기는 하지만 개발 자체가 jQuery를 사용해서 작업을 하다 보니 실제 닷넷을 쓰는 부분은 디비 처리쪽만 사용을 한다.

그래서 에디터도 닷넷 버전이 따로 제공을 하긴 하지만 닷넷 컨트롤을 사용하는걸 싫어하기 때문에 일반 버전으로 설치했다.

어차피 에디터가 자바스크립트로 이루어져있기 때문에 서버환경이랑 상관은 없다.


게다가 이렇게 작업을 하게 되면 특정 서버와 상관없이 최소한의 수정으로 쉽게 마이그레이션이 가능하다.


작업 순서

1. 다운받기

2. 설치하기

3. 커스터 마이징

4. 파일 업로드 적용


1. 다운받기

http://ckeditor.com/ 이 사이트 가면 데모 버전을 볼 수 있고 다운 받을 수 있다.


2. 설치하기

다운받은 파일을 압축을 풀고 설치할 서버에 업로드 한다.

그리고 에디터를 사용할 페이지를 열어서 해당 스크립트를 추가만 하면 바로 에디터가 적용된다.

업로드한 폴더를 /ckeditor 이라고 가정


1) 기본 설치

head 부분에 스크립트 추가

 <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>



textarea에 에디터 스크립트 적용

<textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>

<script type="text/javascript">

CKEDITOR.replace( 'editor1' );

</script>



이렇게만 하면 끝. 이것만으로 아래와 같이 멋지고 강력한 에디터가 적용된다.




2)jQuery 적용하여 설치

head에 /ckeditor/adapters/jquery.js 추가하고 jQuery 형태로 에디터 적용.



<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $('#editor1').ckeditor(function() { /* callback code */ }, 

    {

        height : 500

    });


    $('#jsonForm').ajaxForm({

        beforeSubmit: validate,        // pre-submit callback

        success     : showResponse,    // post-submit callback

        dataType    : 'json'           // 'xml', 'script', or 'json' (expected server response type)

    });

});

</script>



높이를 500으로 해서 에디터 적용하고 ajaxForm으로 폼 전송



3. 커스터 마이징

툴바에 불필요한 요소는 제거하고 필요한 기능만 선택해서 넣을 수 있다.

전체 적용된 소스

 $(document).ready(function() {

    // 에디터 툴바 옵션

    var myToolbar =  

                [     

                    { name: 'document', items : [ 'Source','-','DocProps','Preview','Print','-','Templates' ]  },

                    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },

                    { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },

                    { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','Iframe' ] },

                            '/',

                    { name: 'styles', items : [ 'Font','FontSize' ] },

                    { name: 'colors', items : [ 'TextColor','BGColor' ] },

                    { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },

                    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },

                    { name: 'links', items : [ 'Link','Unlink' ] },

                    { name: 'tools', items : [ 'Maximize','-','About' ] }

                ];

                

    $('#contents').ckeditor(function() { /* callback code */ }, 

        {

            height : 500,

            toolbar : myToolbar,

            uiColor : '#9AB8F3',

            filebrowserBrowseUrl : 'FileBrowser.aspx?type=image&board_code=' + $('#board_code').val(),

            filebrowserUploadUrl : 'FileUpload.ashx?type=image&board_code=' + $('#board_code').val() + '&board_no=' + $('#no').val() + '&tmp_code=' + $('#tmp_code').val()


        });

});


아래는 위 소스로 적용된 에디터





4. 파일 업로드 적용

파일 업로드는 CKFinder를 사용하면 되는데 라이센스 문제가 좀 있고 분석하기 귀찮아서 비슷한 형태로 그냥 만들어서 사용했다.

첨엔 막막하더니 도움말 좀 뒤져보니 해결이 되었다.

딱 내가 필요한 요소만 있으니 오히려 더 깔끔한 느낌이다.


적용방법

에디터 생성 옵션에 filebrowserBrowseUrl, filebrowserUploadUrl 를 적용해 주면 된다.

말그대로 filebrowserBrowseUrl 는 서버에 있는 파일을 선택해서 에디터에 추가하는 것이고

filebrowserUploadUrl 는 에디터에서 직접 로컬 파일을 선택해서 서버로 올려서 적용하는 것이다.

그러므로 filebrowserBrowseUrl 에는 서버에 있는 파일 리스트를 볼 수 있는 파일을 적어주고

filebrowserUploadUrl 에는 서버로 직접 업로드 해서 저장하는 파일을 적어 주면 된다.


업로드 처리하는 법은 따로 설명하지 않는다.

업로드가 완료되고 나서 에디터에 업로드된 파일을 알려주는 방법은 아래 스크립트를 실행하면 된다.


 HttpContext.Current.Response.Write("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction('" + CKEditorFuncNum + "', '" + sSaveName + "', '');</script>");


업로드 할때 CKEditorFuncNum, CKEditor, langCode 값이 자동으로 쿼리스트링으로 넘겨진다.

그리고 업로드되는 파일의 폼이름은 upload 이다.


업로드와 마찬가지로 서버에 있는 파일을 선택할 때도 저 스크립트를 그대로 적용해 주면 된다.


 function insertFile(file_name)

{

window.opener.CKEDITOR.tools.callFunction('<%= CKEditorFuncNum %>', file_name, '');

self.close();

}


3번째 파라미터는 메세지로 값이 있을 경우 alert창으로 알려준다.


업로드 창 - 아이프레임 형태로 업로드 함


서버 파일 브라우저 - 게시판별로 이미지를 볼 수 있도록 함.



첨엔 암것도 몰라서 삽질 좀 했는데 다 적용하고 나니 조금은 간단하다. 그만큼 에디터를 잘만들었다는 뜻.

파일 브라우저를 만들다 보니 jQuery가 역시 대단하다는 생각을 한번 더 했다. 

보기엔 별거 아닐 수 있으나 저정도 UI를 간단하게 별 어려움 없이 만들 수 있다.

실제로는 상당히 많은 기능이 들어가 있다.

1. 디비에서 게시판 목록 불러와서 트리형태로 뿌려주기

2. 초기 기본 게시판 이미지 리스트 목록에 뿌려주기(ajax 방식), 리스트 페이징

3. 게시판 선택하면 리스트 다시 불러오고 선택 표시 해주기, 불러올때 로딩 표시

4. 썸네일 표시 100x100 사각형 안에 이쁘게 정렬해서 보여주기



추가로 자바스크립트로 이미지 사이즈 구하기 - 자바스크립트로는 불가능한 줄 알았는데 에디터에서 이미지 이름만으로 사이즈를 가져오는 것을 보고 자바스크립트로도 가능하다는 것을 알았다.


리스트에 바인딩 하면서 이미지가 로딩될때 사이즈를 알아내고 이미지 비율에 따라서 100x100 사각형 박스중간에 정렬 시키기

세로가 더 큰 이미지는 기본적으로 중앙 정렬이기 때문에 문제가 없으나 가로가 더 큰 이미지는 기본 정렬이 상단이라서 적당한 마진을 줘야 박스 중간에 정렬이 가능하다.


     // 이미지 크기 조정

    function imgSize(idx, src)

    {

        var w, h, t;

        $('<img />').attr('src', src).load(function() {

            w = this.width;

            h = this.height;


            $('#size_' + idx).text(w + 'x' + h);

            var $img = $('#img_' + idx);

            if(w < 100 && h < 100) {

                $img.attr({ width: w, height: h });

            } else {

                if(w > h) {

                    t = (100 - (h * 100 / w)) / 2;

                    $img.attr({ width: 100 }).css({ marginTop: t });

                } else {

                    $img.attr({ height: 100 });

                }

            }

        });

    }





에디터 추가 내용은 사이트에 다 나와있다. 물론 눈에 잘 안들어 오긴 하지만....

http://docs.cksource.com/CKEditor_3.x/Developers_Guide



파일 업로드 부분 소스(요청)