ckeidtor 및 ckfinder 세팅하기

현재 주소 복사
트랙백 주소 복사
방실이님의 글 (7/30/2010 4:21:58 PM) Viewing : 5785

이전 사이트에서는 FCKEDITOR를 사용하였지만.
이번에 리뉴얼 하면서 CKEDITOR로 변경하였습니다.
이름을 보면 금방 알아 차리겠지만..동일제품입니다..ㅋ~ 버전업이 된것이지요..
시대의 트랜드에 맞게 jquery 로 무장하였구요..뭐 기존 버전보다 딱 보기에도 좋아 보이네요..ㅡ.ㅡ;;;

네이년에서 검색해 보아도 CKEDITOR 세팅법은 쫌 나오는 군요..
물론 원 배포 사이트에서 보아도 설명이 잘되어 있지만..(영어의 압박을 빼면말이죠..^^;)
ckeditor는 글을 쓰기 위한 에디터이구요 ckfinder는 업로드된 파일(이미지나 플래시 등등)을 관리하는 툴이 되겠습니다.
먼저 설치 하기 위해서는 CKEDITOR와 CKFINDER가 필요합니다.
 
 
위 링크에서 모두 구하실수 있습니다..물론 닷넷 버전을 받아야 겠지요..
음.. 또 버전없이 되었군요..제 사이트에서 설치된 버전이 3.2 (2010년 07월 30일 기준)입니다만..현재 3.3.1버전이 나왔군요..
뭐 불편한 점 없기에 그냥 쓸랍니다..3.4에 대한 내용도 얼핏 보입니다만..그때가서 생각하도록 하지욥.
어쨋든 다운로드를 받았으면 세팅을 해야 겠지요..
루트경로 바로 아래에 ckeditor 폴더와 ckfinder 폴더를 위치 시킵니다..규칙입니다..^^;;
이제 js파일을 프로젝트에 참조 시켜야 겠지요...
 
<script type="text/javascript" src='<%=this.Url.Content("~/ckeditor/ckeditor.js")%>'></script>

<script type="text/javascript" src='<%=this.Url.Content("~/ckfinder/ckfinder.js")%>'></script>

<script type="text/javascript" src='<%=this.Url.Content("~/ckeditor/adapters/jquery.js")%>'></script>
위 코드는 MVC 프레임워크로 개발했기 때문에..this.Url.Content 라는 메서드가 있는 겁니다..착오 없으시길..
이제 게시물을 쓰는 페이지(이 사이트의 경우에는 /Views/Article/Add.aspx - MVC로 개발했기 때문에 URL이 다릅니다 착오 없으시길..)에 textarea 컨트롤에 에디터를 세팅해줍니다.
 
<%= this.Html.TextAreaFor(m => m.Content) %>

<script type="text/javascript">
    var editor = CKEDITOR.replace('Content');
    CKFinder.SetupCKEditor(editor, '/ckfinder');
</script>
위 코드에서 textarea 컨트롤의 이름은 Content 입니다. MVC가 아닌 것으로 개발하게 되면 ClientID를 입력하여야 겠지요?
여기까지 하면 일단 게시물작성 페이지에서 에디터를 볼수가 있습니다.
이제 ckfinder/bin 폴더의 ckfinder.dll을 /bin 에 복사 합니다. ckfinder/bin은 지우셔도 됩니다. 그리고 프로젝트에서 참조추가 하십시오.
기본적으로 업로드파일의 경로는  /ckfinder/userfiles/ folder 로 되어 있지만..아무도 그렇게 사용하지는 않겠지요??
이 사이트의 경우에는 /Upload 입니다.
/Upload 아래에 _thumbs, files, flash, images 폴더를 생성합니다. 그런데..저는 files는 에디터에서 사용하지 않습니다..
바로 아래에 파일첨부 항목에서 첨부 하면 그쪽으로 들어 가도록 세팅되었습니다..뭐 이건 중요한게 아니고..ㅡ.ㅡ;
이제 중요한 권한 설정(fckeditor에서는 이부분이 취약하였습니다만..ckeditor는 만족스럽습니다.)
/ckfinder/config.ascx 파일이 손을 봐야 하는 가장 중요한 파일입니다..권한을 담당하지요..
 
public override void SetConfig()
{
    LicenseName = "http://www.Bangsil.net";
    LicenseKey = "http://www.Bangsil.net";

    BaseUrl = "/upload/";

    BaseDir = "";

    Thumbnails.Url = BaseUrl + "_thumbs/";
    Thumbnails.Dir = BaseDir + "";
    Thumbnails.Enabled = true;
    Thumbnails.DirectAccess = true;
    Thumbnails.MaxWidth = 100;
    Thumbnails.MaxHeight = 100;
    Thumbnails.Quality = 80;

    Images.MaxWidth = 1600;
    Images.MaxHeight = 1200;
    Images.Quality = 80;

    CheckSizeAfterScaling = true;

    ForceSingleExtension = true;

    HtmlExtensions = new string[] { "html", "htm", "xml", "js" };

    HideFolders = new string[] { ".svn", "CVS" };

    HideFiles = new string[] { ".*" };

    SecureImageUploads = true;

    RoleSessionVar = "CKFinder_UserRole";

    AccessControl acl = AccessControl.Add();
    acl.Role = "*";
    acl.ResourceType = "*";
    acl.Folder = "/";
    acl.FolderView = true;

    acl = AccessControl.Add();
    acl.Role = "*";
    acl.ResourceType = "Images";
    acl.Folder = "/public/";
    acl.FileView = true;
    acl.FileUpload = true;

    acl = AccessControl.Add();
    acl.Role = "*";
    acl.ResourceType = "Flash";
    acl.Folder = "/public/";
    acl.FileView = true;
    acl.FileUpload = true;

    acl = AccessControl.Add();
    acl.Role = "Admin";
    acl.ResourceType = "*";
    acl.Folder = "/";
    acl.FolderView = true;
    acl.FolderCreate = true;
    acl.FolderRename = true;
    acl.FolderDelete = true;
    acl.FileView = true;
    acl.FileUpload = true;
    acl.FileRename = true;
    acl.FileDelete = true;

    DefaultResourceTypes = "";

    ResourceType type;

    type = ResourceType.Add("Images");
    type.Url = BaseUrl + "images/";
    type.Dir = BaseDir == "" ? "" : BaseDir + "images/";
    type.MaxSize = 3000000;
    type.AllowedExtensions = new string[] { "bmp", "gif", "jpeg", "jpg", "png" };
    type.DeniedExtensions = new string[] { };

    type = ResourceType.Add("Flash");
    type.Url = BaseUrl + "flash/";
    type.Dir = BaseDir == "" ? "" : BaseDir + "flash/";
    type.MaxSize = 3000000;
    type.AllowedExtensions = new string[] { "swf", "flv" };
    type.DeniedExtensions = new string[] { };
}
먼저 6행의 BaseUrl 속성에 업로드 경로를 입력합니다. 앞서 말했듯이 이 사이트의 경로는 /Upload가 되겠습니다. 코드를 보면 알겠지만 그 다음부분은 섬네일의 설정입니다. 34행은 역할에 사용할 세션변수의 이름을 설정하는 부분입니다.. 위 코드의 값은 기본값입니다..저는 그냥 기본값 사용합니다.
이제 주목해야 할 부분은  36행의 AccessControl 입니다.
이게 바로 권한의 설정 부분이 되겠습니다.
권한 설정은 역할에 따라 설정하게끔 되어 있습니다.
이 사이트의 역할은 Admin, User, Anonymous 및...등등 을 사용하고 있습니다만..여기서는 이 세가지만 다룹니다..^^;;
모든 역할은 모든 리소스타입(파일형식이 되겠습니다.)에 대해 뷰 권한이 있습니다.
모든 역할은 이미지형식에 대해 /public/ 경로(실제 경로는 /Upload/Images/public/ 이 됩니다..중요..)에 대해 파일 조회 권한과 업로드 권한을 가집니다.
모든 역할은 플래시형식에 대해 /public/ 경로(실제 경로는 /Upload/Images/public/ 이 됩니다..중요..)에 대해 파일 조회 권한과 업로드 권한을 가집니다.
관리자 역할은 모든 리소스타입에 대해 폴더조회, 폴더 생성, 폴더리네임,폴더 삭제, 파일조회, 파일업로드,파일리네임,파일삭제의 권한을 가집니다.
이해 되십니까????
이제 73행 부터 마지막으로 리소스의 형식에 대해서 정의 합니다.
AccessControl에서 설정하였던 Images 라는 이름을 가진 리소스는 바로 여기서 정의 됩니다.
이제 인증 여부 및 역할에 대해서 설정해야 합니다..
같은 페이지의 CheckAuthentication 메서드를 보겠습니다.
 
public override bool CheckAuthentication()
{
    if (this.Request.IsAuthenticated)
    {
        if (this.Context.User.IsInRole("Admin"))
        {
            this.Session["CKFinder_UserRole"] = "Admin";
        }
        else
        {
            this.Session["CKFinder_UserRole"] = "User";
        }
    }
    else
    {
        this.Session["CKFinder_UserRole"] = "Anonymous";
    }
   //return this.Context.User.Identity.IsAuthenticated;
    return true;
}
원본에는 18행 처럼 되어 있지만..우리는 역할별 권한을 할당하여야 하기에..위 코드 처럼 변경하여야 겠지요?
따로 설명이 필요 없을듯 합니다.
이제 마지막으로 에디터의 세팅이 남았는데..
저의 경우는 그냥 기본설정을 사용하였습니다..ㅡ.ㅡ;;;
설정을 변경하고픈 분들은 ...http://docs.cksource.com/CKEditor_3.x/Developers_Guide 에서 configuratinon 부분을 참고하여 게시물 작성 페이지에서 직접 설정 코드를 입력하시거나.. /ckeditor/ckeditor.js 파일에서 찾아서 수정하시면 되겠습니다.
간단하니...설명은 생략합니다..

마지막 업데이트 : (9/15/2010 2:30:04 PM)

TAG : editor 



Trackback 보기 (0)
댓글 보기 (0)
댓글 쓰기