• 김재원님 첫글쓰기뱃지획득

  • 김재원님 회원가입뱃지획득

  • 나의택님 첫글쓰기뱃지획득

  • 정성연님 회원가입뱃지획득

  • 정선진님 첫글쓰기뱃지획득

  • 정선진님 회원가입뱃지획득

  • Alexey님 첫글쓰기뱃지획득

  • Alexey님 회원가입뱃지획득

  • 조용준님 회원가입뱃지획득

  • TedKim님 첫글쓰기뱃지획득

  • TedKim님 회원가입뱃지획득

  • Sangbom님 첫글쓰기뱃지획득

  • 님 첫글쓰기뱃지획득

  • 님 회원가입뱃지획득

  • 님 첫글쓰기뱃지획득

yii 네이버 스마트 에디터 적용하기( 위젯 사용 )

2014-05-03 14:57:40    댓글 0    조회 3,143    신고

안녕하세요 이번에 네이버 스마트 에디터를 적용하기 위한 위젯을 한번 만들어 보겠습니다.

먼저 스마트 에디터는 네이버 에디터를 사용하였으며 위젯으로 만든 이유는 스마트 에디터가 글을 쓸때 마다 들어가야 해서 쉽게 적용할 방법이 위젯으로 만드는것이 좋을거 같아서

만들었습니다.

먼저 네이버 에디터가 있어야 겠지요 제가 사용한 에디터는 여기 에서 받으시면 됩니다.

받으신 에디터를 저는 protected 폴더와 같은 위치에 저장했습니다

location.jpg

이제 에디터 위젯을 만들어 보겠습니다. 위젯은 일반적으로 protected/components 폴더에 만들기에 거기에 SmartEditor.php 파일을 생성해서 넣었습니다.

위젯을 만들기 위해서는 먼저 2가지 함수가 있어야 하는데요 public function init() public function run() 함수 입니다.

init()은 가장 먼저 실행되며 한번만 실행되는 함수로써 보통의 경우 데이터를 할당하고 잘못된 호출을 제어하기 위해서 사용하게 되더군요

run()함수는 init()이 실행되고 실제 프로그램을 기동하는 함수 입니다. init()은 일종의 생성자 함수로 생각하시면 되고 run()은 프로그램이 기동되는 첫번째 함수로 생각하시면 됩니다.

class SmartEditor extends CWidget {

    private $View = 'Editor';

    public $form;
    public $model;
    public $attribute;

    public $rows = 10;
    public $cols = 80;

    public function init()
    {
            if($this->form === null)
                    throw new CException(Yii::t('zii','The property "form" cannot be empty.'));
            if($this->model === null)
                    throw new CException(Yii::t('zii','The property "model" cannot be empty'));
            if($this->attribute === null)
                    throw new CException(Yii::t('zii','The property "attribute" cannot be empty'));
    }

    public function run()
    {
            $viewFile = $this->getViewFile($this->View);

            $this->renderFile($viewFile, array('form'=>$this->form,
                            'model'=>$this->model, 
                            'attribute'=>$this->attribute,
                            'rows'=>$this->rows,
                             'cols'=>$this->cols));
    }

}

제가 사용한 위젯 함수 입니다. 가장 먼저 $form은 이 에티터가 들어가는 곳의 $form 객체입니다. $model 은 에디터에 들어가는 데이터를 매핑한 $model을 의미하고요 $attribute 는 $model 중 에디터의 값이 실제 들어가는 attribute를 의미합니다. 게시판의 경우 내용에 에디터를 많이 사용하니 내용 부분을 의미하는 attribute가 되겠습니다. 나머지 $rows와 $cols는 줄수와 칼럼수를 지정하는 변수입니다.

소스는 아주 간단합니다. 보시면 아시겠지만 init()에서는 값이 있는지 없는지만 확인하구요 없는 경우 CException 을 발생시킵니다. 또한 run() 함수에서는 받은 값을 단순히 $this->renderFile( ) 함수를 통해서 랜더링 하구요 해당되는 view 파일은 protected/components\views라는 폴더를 만들고 private $View = 'Editor'; 에서 정의된 Editor.php 파일로 생성해서 넣었습니다.

<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl;?>/smartEditor/js/HuskyEZCreator.js" charset="utf-8"></script>

<?php echo $form->textArea($model,$attribute,array('id'=>'ir1', 'rows'=>$rows, 'cols'=>$cols)); ?>

<script type="text/javascript">

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "ir1",
    sSkinURI: "<?php echo Yii::app()->request->baseUrl;?>/smartEditor/SmartEditor2Skin.php",
    fCreator: "createSEditor2",
    htParams : { 
                    fOnBeforeUnload : function() { 
                    } 
    }

});

</script>

소스는 네이버 에티터를 위한 스크립트 위치를 잡아주는 스크립트와 <?php echo $form->textArea($model,$attribute,array('id'=>'ir1', 'rows'=>$rows, 'cols'=>$cols)); ?> 를 이용하여 textarea를 만들어 주고 네이버 에티터에 사용하는 ir1을 id로 주었습니다. 나머지 부분은 스킨의 위치만 지정하는 형식입니다.

이렇게 만들어지면 다 되었네요 이제 이렇게 만들어진 에디터를 사용해 볼까요?

view 에서 에디터를 사용하는 경우가 많이 있으므로 create.php 에 다음과 같이 하시면 쉽게 네이버 에디터를 사용하실 수 있습니다.

<?php $form=$this->beginWidget('CActiveForm', array( 'id'=>'create-form', 'method'=>'post' )); ?>

<?php $this->widget('application.components.smartEditor', array('form'=>$form, 'model'=>$model, 'attribute'=>'Contents', 'cols'=>75)); ?> <?php echo $form->error($model,'Contents'); ? >

<?php $this->endWidget(); ?>

이런식으로 에디터를 사용하는 곳에 위의 코드를 넣으시면 쉽게 네이터 에디터가 적용됩니다.

이상입니다. 위젯을 만들는 방법도 쉽고 이렇게 만들어서 여러곳에 사용이 가능하시면 됩니다.

추신: 혹시 에러가 있으시면 알려주세요~~