Framework

위지윅에디터 ckeditor 사용하기(CodeIgniter에 적용하기)

작성자 웅파 작성일자 팁앤텍

http://codeigniter-kr.org codeigniter 한국사용자포럼에 정리해서 올렸던 내용을 제 블로그로 꺼꾸로 가져옵니다.
ckeditor 3.X버전을 codeigniter에서 사용할 수 있도록 수정한 내용입니다.

원본 http://codeigniter-kr.org/source/view/322/page/1








fckeditor가 2.X대 버전으로 끝나고 3.X버전으로 오면서 ckeditor로 바뀌면서
상당히 많은 변화가 있었네요.
기능들을 코어와 플러그인으로 분리, 엄청난(?) 로딩속도 향상(http://hbuilder.kiissoft.com/admin/test), ajax 적용용이 등등..

파일, 이미지 업로드를 사용하기 위해서는(업로더가 2.X버전에서는 fckeditor안에 포함되어 있었음)
ckfinder도 같이 설치를 해야합니다.

ci forum에서 검색해보니 ckeditor용 헬퍼를 만들어놓은게 있어서 적용하여 사용중에 툴바선택할 수 있는
부분을 추가했습니다. (fckeditor는 라이브러리로 만들어 사용)

사용하기 위해서 ckeditor(http://ckeditor.com/download)와 ckfinder(http://ckfinder.com/download)(이미지 업로더를 따로 만든다면 필요가 없습니다)를 다운로드합니다.

1. 압축을 풀고 (저는 include 디렉토리 아래에 풀었습니다.)
   include – ckeditor
                 – ckfinder

2. 설정을 합니다.
 – ckeditor는 config.js 파일이 설정파일인데 헬퍼에서 설정을 해서 따로 설정할 것이 없습니다.
 – ckfinder는 config.php 파일을 수정해야 합니다.




 


01.function CheckAuthentication()

02.{

03.    return true;

04.}

05.//true로 수정

06.//권한체크용으로 만들어진 함수인데 수정하지 않으면 파일업로드가 안됩니다.

07.  

08.$baseUrl = ‘/data/upload’; 

09.//업로드된 파일이 저장될 디렉토리

10.//upload 디렉토리 하위에 파일형식에 따라서 이미지(images), 파일(files), 플래시(flash) 디렉토리가 자동생성됩니다.

11.//쓰기권한 필수

12.  

13.$config[‘ResourceType’][] = Array(

14.        ‘name’ => ‘Images’,

15.        ‘url’ => $baseUrl . ‘ck_images’,

16.        ‘directory’ => $baseDir . ‘ck_images’,

17.        ‘maxSize’ => ‘2M’,

18.        ‘allowedExtensions’ => ‘bmp,gif,jpeg,jpg,png’,

19.        ‘deniedExtensions’ => ”);

20.// maxSize가 처음에는 0으로 되어있는데 제한사이즈로 수정

21.// $config[‘ResourceType’][] 3군데 모두 수정

22.  

23.// 그외에는 각자 입맛(?)에 맞게 수정하시면 됩니다.
3. ckeditor_helper.php 파일을 생성합니다.(헬퍼 디렉토리)



 


01.<?php

02.if(!defined(‘BASEPATH’)) exit(‘No direct script access allowed’);

03.  

04.function form_ckeditor($data)

05.{

06.    //툴바 선택사용

07.    switch($data[‘toolbar’]){

08.        case (‘reply’):

09.        $tool_bar = ‘

10.            [

11.                [“Font”,“FontSize”], [“TextColor”,“BGColor”],

12.                [“Bold”,“Italic”,“Underline”],

13.                [“JustifyLeft”,“JustifyCenter”,“JustifyRight”,“JustifyBlock”],

14.                [“Link”,“Unlink”],

15.                [“Image”,“Flash”,“Table”,“HorizontalRule”,“Smiley”,“SpecialChar”],

16.                [“Preview”,“Source”,“Maximize”]

17.            ]

18.        ‘;

19.        break;

20.        case (‘basic’):

21.        $tool_bar = ‘

22.            [

23.                [“Source”,“-“,“Preview”],

24.                [“Bold”,“Italic”,“Underline”],

25.                [“Link”,“Unlink”]

26.            ]

27.        ‘;

28.        break;

29.        //디폴트는 FUll입니다.

30.        default:

31.        $tool_bar = ‘

32.            [

33.                [“Source”,“-“,“Save”,“NewPage”,“Preview”,“-“,“Templates”],

34.                [“Cut”,“Copy”,“Paste”,“PasteText”,“PasteFromWord”,“-“,“Print”, “SpellChecker”, “Scayt”],

35.                [“Undo”,“Redo”,“-“,“Find”,“Replace”,“-“,“SelectAll”,“RemoveFormat”],

36.                [“Form”, “Checkbox”, “Radio”, “TextField”, “Textarea”, “Select”, “Button”, “ImageButton”, “HiddenField”],

37.                “/”,

38.                [“Bold”,“Italic”,“Underline”,“Strike”,“-“,“Subscript”,“Superscript”],

39.                [“NumberedList”,“BulletedList”,“-“,“Outdent”,“Indent”,“Blockquote”],

40.                [“JustifyLeft”,“JustifyCenter”,“JustifyRight”,“JustifyBlock”],

41.                [“Link”,“Unlink”,“Anchor”],

42.                [“Image”,“Flash”,“Table”,“HorizontalRule”,“Smiley”,“SpecialChar”,“PageBreak”],

43.                “/”,

44.                [“Styles”,“Format”,“Font”,“FontSize”],

45.                [“TextColor”,“BGColor”],

46.                [“Maximize”, “ShowBlocks”,“-“,“About”]

47.            ]

48.        ‘;

49.        break;

50.    }

51.  

52.  

53.    $data[‘language’] = isset($data[‘language’]) ? $data[‘language’] : ‘ko’;

54.  

55.    $size    = isset($data[‘width’]) ? ‘width: “‘.$data[‘width’].‘”, ‘ : ”;

56.    $size  .= isset($data[‘height’]) ? ‘height: “‘.$data[‘height’].‘”, ‘ : ”;

57.  

58.    $options = ‘{‘.

59.            $size.

60.            ‘language: “‘.$data[‘language’].'”,

61.            //각종 설정값 (자세한내용은 ckeditor 레퍼런스참고)

62.            startupOutlineBlocks: false,

63.            entities: false,

64.            entities_latin: false,

65.            entities_greek: false,

66.            forcePasteAsPlainText: false,

67.  

68.//파일업로드 프로그램의 주소입니다.

69.//ckfinder의 주소를 적으면 됩니다. 

70.//사용자 업로더를 사용한다면 그 주소를 써주면 됩니다.            filebrowserUploadUrl : “/include/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files”,

71.            filebrowserImageUploadUrl : “/include/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images”,

72.            filebrowserFlashUploadUrl : “/include/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash”,

73.  

74.            toolbar : ‘.$tool_bar.’

75.  

76.        }’;

77.    //ckeditor 선언부

78.    return

79.    // fix: move to <HEAD…

80.    ‘<script type=”text/javascript” src=”‘.INCLUDE_DIR.‘/ckeditor/ckeditor.js”></script>’ .

81.  

82.    // put the CKEditor

83.     ‘<script type=”text/javascript”>CKEDITOR.replace(“‘.$data[‘id’].‘”, ‘ . $options . ‘);</script>’;

84.}

85.?>

4. 사용
– 컨트롤러



 


01.<?php

02.  

03.class Test extends Controller {

04.  

05.    function Test()

06.    {

07.        parent::Controller();

08.    }

09.  

10.    function index() {

11.        //헬퍼 선언

12.        $this->load->helper(‘ckeditor’);

13.        if (@$_POST[‘mode’] == ‘edit’) {

14.            $data[‘textarea_value’] = stripcslashes($_POST[‘textarea_id’]);

15.        } else {

16.            $data[‘textarea_value’] = ”;

17.        }

18.        $this->load->view(‘admin/test’, $data);

19.    }

20.}

21.?>

– 뷰



 


01.<input onclick=“ExecuteCommand(‘image’);” type=“button” value=“파일업로드”/>

02.<form action=“” method=“post”>

03.<input type=“hidden” name=“mode” value=“edit” />

04.<!–

05.textarea name과 하단 form_ckeditor의 id변수 동일해야

06.textarea를 ckeditor로 대체해줍니다.

07.기존값이 있다면 <textarea></textarea>사이에 선언

08.–>

09.<textarea name=“textarea_id”><?=(@$textarea_value)?@$textarea_value:”?></textarea>

10.<input type=“submit” value=“등록” />

11.</form>

12.<?

13.//툴바, textarea name, 에디터 폭, 에디터 높이

14.//툴바를 빈칸으로 하면 FULL 툴바가 나옵니다.

15.//현재 선언해놓은 것은 reply와 basic인데 입맛에 맞게 선언하여 사용하면 됩니다.

16.echo form_ckeditor(array(

17.    ‘toolbar’        => ‘reply’,

18.    ‘id’              => ‘textarea_id’,

19.    ‘width’           => ‘500’,

20.    ‘height’          => ‘300’

21.));

22.?>

23.<!–

24.툴바의 버튼을 외부로 뺄수도 있습니다. 

25.맨 윗라인의 이미지 업로더를 버튼을 에디터 외부에 위치시키는 팁입니다.

26.–>

27.<script>

28.function ExecuteCommand( commandName )

29.{

30.    // Get the editor instance that we want to interact with.

31.    var oEditor = CKEDITOR.instances.textarea_id ;

32.  

33.    // Check the active editing mode.

34.    if (oEditor.mode == ‘wysiwyg’ )

35.    {

36.        // Execute the command.

37.        oEditor.execCommand( commandName ) ;

38.    }

39.    else

40.        alert( ‘You must be on WYSIWYG mode!’ ) ;

41.}

42.</script>

5. 끝
위 내용 데모는 http://hbuilder.kiissoft.com/admin/test 에서 보실 수 있습니다.

PHP Framework CODEIGNITER의 장점과 사용하면서 불편했던 점

작성자 웅파 작성일자 팁앤텍

먼저 좋은 점은 가볍다 입니다. 확장도 용이하구요.
사용자들이 올려놓은 wiki의 파일이나 플러그인이 이용할만한게 많습니다.
다른 프레임워크도 그렇지만 지원되는 함수(유저가이드 참고)가 정말 필요한 것들을 집약해놓았습니다.
jquery를 이그나이터의 함수처럼 사용하는 부분도 있고.
폼체크, 페이징, 트랙백, xml, 세션 암호화 등등.. 유저 가이드 대로만 하면 금방 구현. ^^
helper도 마찬가지구요.
모델의 경우 다른 컨트롤을 위해 만든 모델도 로딩시켜서 그냥 쓸 수 있다는거..
common 모델을 만들고 기능별로 따로 만들어서 불러서 쓰는 것이 좋겠죠.
모델에서 데이터 처리후 배열로 뷰파일에 전달, foreach(){ .. }로 처리하기만 하면 되는 뷰.
MVC패턴의 장점이야 두말할 나위가 없구요.

단점으로는 모든 프레임워크가 그렇듯 사용법을 따로 배워야 하죠.
$_POST[‘var’] 로 처리하던 것만 하더라도 $this->input->post(‘var’)로 바꿔서 사용해야 합니다.
$_SERVER 도 마찬가지..

http://www.h.com/index.php/together/mview/index/ 의 주소체계를 사용하다보면 검색후 2페이지로 이동할때 검색어를
http://www.h.com/index.php/together/mview/index/10/검색어 (검색어 부분은 실제로는 urlencode해서 넘깁니다.)의 형태로 넘기게 되는데
간혹 중간에 프로그램 수정에 의해 인자가 추가되는 경우가 있으면 좀 난감해집니다.
그래서 코드이그나이터 포럼에 검색을 해보니 쿠키로 처리하는 경우도 있었고 config.php 파일에서 $config[‘enable_query_strings’] 를 TRUE로 셋팅하여
주소체계를 혼용하여 사용하면 해결이 가능하긴 하지만 그렇게 되면 또 한가지 문제가 생깁니다.
$config[‘enable_query_strings’] = TRUE; –> http://www.h.com/index.php?d=together&c=mview&m=index&page=10&q=검색어 형태의 주소로 사용할 수 있습니다.
이렇게 되면 해결이 되는데 문제는 코드이그나이터의 pagenation 라이브러리 사용에서 문제가 생깁니다.
기존형식으로 사용할때는 잘 작동하던 페이징이 $config[‘enable_query_strings’] = TRUE 가 되면 페이징의 주소가 기존과 다른 형태로 바뀌면서 오작동을 합니다.
그래서 pagenation config 선언할때 한줄을 더 추가해줘야 합니다.
$config[‘page_query_string’] = FALSE; 이 라인이 추가 되어야 문제없이 사용이 됩니다.
설명이 좀 어려운데 실제로 코딩해보시면 이해가 금방 됩니다. ^^;
전 두가지 방법을 다 적용했습니다. 쿠키로 구워서 체크후 일정시간후 날리는 방법과 주소형태를 바꾸는 방법.

그리고 1.7.1 버전에서는 고쳐졌는지 확인을 안해봤는데 제가 사용했던 1.6.3 버전에서는 로그인후 창을 닫으면 세션이 그대로 살아있습니다. 수정하려면 아래 부분 패치

config.php 파일의 $config[‘sess_expiration’] = -1 로 수정후

libraries 디렉토리의 Session.php 89 라인
if ($this->sess_expiration == 0)
{
$this->sess_expiration = (60*60*24*365*2);
}
을
if ($this->sess_expiration == 0)
{
                $this->sess_expiration = (60*60*24*365*2);
}
else
{
$this->sess_expiration = (60*60*24);
}
로 수정

659라인
setcookie(
$this->sess_cookie_name,
$cookie_data,
– //$this->sess_expiration + time(),
+ ($this->CI->config->item(‘sess_expiration’) == -1) ? 0 : ($this->sess_expiration + time()),
$this->cookie_path,
$this->cookie_domain,
0
);


config.php 파일의 $config[‘permitted_uri_chars’] = ‘a-z 0-9~%.:_=\-‘; 부분도 문제가 됩니다.
주소로 사용할 수 있는 문자를 정규표현식으로 표현한 것이데 간혹 한글을 주소에 사용하기위해 urlencode 했을때 충돌이 납니다.
경우의 수를 다 찾아서 넣어주면 좋겠지만 전 현재 $config[‘permitted_uri_chars’] = ”; 이렇게 사용중입니다.

일단 생각 나는 부분은 여기까지인데 추후에 더 보강하겠습니다. ^^