확실히 XE  에서 제공하는 에디터가 네이버 에디터보다 더 뛰어난 점이 많은 것 같습니다.

네이버 에디터는 자질구리한 기능들만 있지...ㅠㅠ

이 팁은 제 블로그에서 그대로 들고 온 것임을 밝히며 질문은 제 블로그에 해 주세요. (원문 바로 가기)

====

XE에서는 강력한 에디터를 기본으로 제공한다. 물론 이 에디터들은 Ajax 등을 이용하여 사용이 가능하다.

이 에디터는 수 많은 javascript 파일들과 html 코드들이 뒤엉켜 있기 때문에 이를 완벽하게 이해하고 모듈에 적용시키기가 여간 쉽지 않다.

나도 아직까지 완벽하게 이해하진 못했지만 어느 정도 경험에서 이해한 만큼을 적어보도록 하겠다. 만약 틀린 부분이 있다면 댓글로 지적을 해 준다면 감사하겠다.

먼저 모듈에서 에디터를 사용하려면 아래의 코드를 사용하면 된다.

// editor 모듈 사용하기

// 에디터 모델 인스턴스 얻기

$oEditorModel = &getModel('editor');

 

// 옵션 정하기

$option->allow_fileupload = true|false;

$option->content_style = 'default';

$option->content_font = null;

$option->content_font_size = null;

$option->enable_autosave = true|false;

$option->enable_default_component = true|false;

$option->enable_component = true|false;

$option->disable_html = true|false;

$option->height = 400;

$option->skin = 'xpresseditor'|'dreditor';

$option->colorset ='white'|'black'|'white_text_usehtml'|'black_text_usehtml'|'whilte_text_nohtml'|'black_text_nothml';

$option->primary_key_name = 'document_srl';

$option->content_key_name = 'content';

 

// 에디터 HTML 정하기

$editor = $oEditorModel->getEditor($upload_target_srl, $option);

Context::set('editor', $editor);

editor model 인스턴스를 사용하여 getEditor()라는 함수를 사용하였다.

getEditor() 함수는 하나의 HTML 과 javascript가 혼합된 코드를 만들어 문자열 타입으로 리턴해준다.

여기에 포함된 javascript 코드는 에디터 모듈의 xe_interface.js, xpresseditor.js 등의 파일을 참조하고 있기 때문에 이 파일들이 문서에 include 되어있지 않다면 에러가 나면서 에디터를 쓸 수가 없다. 만약 에러가 난다면 위의 파일들이 문서에 include 되어있는지 확인하자.

참고로 getEditor() 함수는 다음과 같은 모양을 하고 있다.

function getEditor($upload_target_srl = 0, $option = null) 

각각의 파라미터에 대한 자료가 많이 없다. 여기서 정리해본다.

먼저 $upload_target_srl 은 첨부파일을 업로드 했을 때 첨부파일이 연결될 문서의 srl 이다.

DB의 files 테이블을 열어 어떻게 생겼는지 보면 바로 이해할 수 있을 것이다.

XE는 첨부파일을 추가시킬 경우 다음과 같은 작업을 한다:

1. 파일의 해쉬값을 얻어냄.
2. /files/attach 폴더에 첨부파일을 저장.
3. files 테이블에 파일을 정보를 입력. upload_target_srl 컬럼에 첨부파일이 어느 문서에 연결되었는지 기록함.

나머지는 다 이해하더라도 마지막 두 개의 옵션이 잘 이해되지 않을것이다.

이것들을 이해하려면 아래 내용을 이해하여야 한다.

먼저 위의 editor model 의 getEditor() 메소드의 반환값이 HTML과 javascript의 혼합 문자열이라고 한 것을 기억할 것이다.

만약 에디터가 HTML 문서상에 출력되면 동시에 삽입된 javascript 코드가 실행이 되면서 다음과 같은 프로세스를 실행한다.

1. 해당 코드가 삽입된 HTML 엘리먼트의 부모 엘리먼트 중에서 가장 처음 만나는 <form> 의 자식 중 input[name="document_srl"].val() 을 찾아 사용한다.
2. 해당 코드가 삽입된 HTML 엘리먼트의 부모 엘리먼트 중에서 가정 처음 만나는 <form> 의 자식 중 input[name="content"].val() 을 찾아 에디터에 출력시킨다.

그렇기 때문에 에디터는 반드시 <form> 엘리먼트의 자식으로 삽입되어야 하며 이 <form> 엘리먼트는 <input type="hidden" name="document_srl" /> 과 <input type="hidden" name="content" /> 엘리먼트를 자식으로 가지고 있어야 한다.

여기에서는 예제 때문에 document_srl 과 content 라고 지정했지 만약 $option->primary_key_name 과 $option->content_key_name 을 다르게 지정했다면 지정된 이름을 사용하도록 해야한다.

input[name="content"] 는 여기에 입력된 값을 에디터에서 출력하기 때문에 문서를 수정할 때 자주 쓰이게 된다.

즉, 신규 문서를 삽입할 경우 PHP 에서는 아래 처럼 에디터를 부른다.

$option->primary_key_name = 'document_srl';

$option->content_key_name = 'content';

$editor = $oEditorModel->getEditor(0, $option);

Context::set('editor', $editor);

그리고 에디터 코드가 삽입될 HTML 에서는 다음과 같은 태그들이 있어야 한다.

<form>

       <input type="hidden" name="document_srl" />

       <input type="hidden" name="content" />

       {$editor}

</form> 

PHP 단에서 설정한 primary_key_name의 값과 HTML 단에서 사용하는 input[type="hidden"] 테그의 name 속성이 같다.

PHP 단에서 설정한 content 의 값과 HTML 단에서 사용하는 input[type="hidden"] 테그의 name 속성이 같다.

반면 문서를 수정할 경우 PHP에서는 아래처럼 에디터를 부른다.

$option->primary_key_name = 'document_srl';

$option->content_key_name = 'content';

$editor = $oEditorModel->getEditor(0, $option); 

Context::set('editor', $editor);

그리고 에디터 코드가 삽입될 HTML 에서는 다음과 같은 태그들이 있어야 한다.

<form>

       <input type="hidden" name="document_srl" value="{$original_document_srl}" />

       <input type="hidden" name="content" value="{$original_content}" />

       {$editor}

</form>