asp.net 에서 ckeditor, ckfinder 설치 설정

작성자:
예전에 fckeditor라는 웹에디터가 인기를 끌었다. 그때당시 기능적이나 안정적으로 최고였다고 볼수 있다. fckeditor이 버젼업 되면서 ckeditor로 바뀌었다. 라이센스와 코어를 다시 작성한듯 싶다. 아마도 웹표준에 충실하기 위해 다시 만든듯 싶다. 다시 ckeditor이 각광 받는 이유는 웹표준에 상당히 충실하다. 다른 웹에디터로 파이어폭스나 크롬에서 운영하다 보면 각종 태그나 오류등을 심심치 않게 볼수 있다.

ckeditor 다운로드 http://www.ckeditor.com/download
ckfinder 다운로드 http://www.ckfinder.com/download

(현재 설치버젼 ckeditor 3.6.1    ckfinder 2.0.2.1) 둘다 asp.net버젼으로 받아야 한다. 젤 먼저 web.config 추가 
<system.web>
<pages>
   <controls>
     <add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>
    </controls>
 </pages>
 </system.web>
두 파일 압축을 해제한다. 두 개의 받은 파일에 보면 bin폴더에 CKEditor.NET.dll와 CKFinder.dll이 있다. 않에 디버깅 폴더말고 릴리즈에 있는 dll을 가지고 온다. 설치할 사이트에 bin폴더를 추가해서 카피를 하던가 참조하는 방식으로 가지고 와도 된다.(사이트에 루트에 bin에 dll를 설치 하고 각 폴더에 존재하는 bin폴더등은 지우는게 좋다. 오류가 발생할수 있다.) 압축을 푼 ckeditor는 sample이라는 폴더에 ckeditor이라는 폴더만 사이트에 루트에 카피한다. ckfinder 푼상태서 루트에 ckfinder라고 존재하면 된다.
webeditTest.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="webeditTest.aspx.cs" Inherits="CKEditor_test" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
 
        // 내용체크
        function submitCheck() {
            if (CKEDITOR.instances.<%=ctlCkeditor.ClientID%>.getData() == "") {
                alert('내용을 입력해 주세요.');
                CKEDITOR.instances.<%=ctlCkeditor.ClientID%>.focus();
                return false;
            }
            
            return true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <CKEditor:CKEditorControl ID="ctlCkeditor" runat="server"></CKEditor:CKEditorControl>
        </div>
        <div>
            <asp:Button ID="btnSave" Text="저장" runat="server" OnClientClick="return submitCheck();" onclick="btnSave_Click" />
        </div>
    </form>
</body>
</html>
webeditTest.aspx.cs 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class CKEditor_test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ctlCkeditor.config.language     = "ko";     //언어설정
        ctlCkeditor.config.enterMode    = CKEditor.NET.EnterMode.BR;    // 엔터키 입력시 br태그 삽입
        // font종류에 한글폰트 포함
        ctlCkeditor.config.font_names   = @"굴림/Gulim;돋음/Dotum;바탕/Batang;궁서/
                                            Gungsuh;Arial/Arial;Tahoma/Tahoma;Verdana/Verdana"; 
        // 툴바 설정 대충 샘풀이라구 보면 된다. 없애면 전체 툴바가 다 나타난다.
        ctlCkeditor.config.toolbar = new object[]
  {
   new object[] { "Source"}, 
            new object[] { "Font", "-", "FontSize"},
   new object[] { "Bold", "Italic", "Underline", "Strike","TextColor","BGColor" },
            new object[] { "JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"},
   new object[] { "Undo","Redo","-", "Link", "Unlink","Table","Image" },
  };

        // ckfinder 설정 경로만 두곳의 경로만 잡아주면 된다.
        ctlCkeditor.config.filebrowserImageBrowseUrl = "/ckfinder/ckfinder.html?type=Images";
        ctlCkeditor.config.filebrowserImageUploadUrl = "/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images";

    }

    protected void btnSave_Click(object sender, EventArgs e)
    {
        // 컨트롤 값을 가지고 오는 방법과 동일
        Response.Write(ctlCkeditor.Text);
    }
}
ckfinder 폴더에 보면 config.ascx 열면 CheckAuthentication라는 메서드가 있다. 거기에 return 값을 true로 바꾸어 준다.
자세한 설정사항은 http://docs.cksource.com/ 을 참조하면 된다.

ps : fckeditor 와 ckeditor은 유료 라이센스가 변경 되었습니다. tinymce 에디터는 무료이니 참조하세요.

댓글

댓글 쓰기