웹마스터 팁

확실히 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 컬럼에 첨부파일이 어느 문서에 연결되었는지 기록함.
그렇기 때문에 문서를 처음 삽입할 경우 $upload_target_srl 을 0으로 주면 된다.
만약 문서를 수정할 경우라면 $upload_target_srl은 수정할 문서의 srl 번호가 되어야 겠다.

이제 $option 에 대해서 알아보도록 하자.
$option에는 삽입될 에디터의 설정값을 넣는다. 각 옵션을 살펴보도록 하자.

  • $option->allow_fileupload = true|false;
    이 에디터에서 파일을 삽입할 수 있도록 할 것인가 여부를 결정할 수 있다. false로 지정될 경우 첨부파일부분이 없는 에디터가 나온다.

  • $option->content_style = 'default';
    문서 서식을 설정할 수 있다. 설정할 수 있는 옵션으로는 기본(default), dreditor(dreditor), XE 기본 서식(하얀 배경)(xeStyle), XE 기본 서식(검은 배경)(xeStyleBlack) 이 있다.

  • $option->content_font = null;
    문서의 기본 글꼴을 설정할 수 있다. 콤마를 이용해 여러 폰트를 설정할 수 있다. 비어있는 경우 관리자 메뉴에서 설정한 옵션을 따른다.

  • $option->content_font_size = null;
    글꼴의 기본 크기를 설정할 수 있다. 비어있을 경우 역시 관리자 메뉴에서 설정한 옵션을 따른다.
    12px, 1em 등 단위도 지정해야 한다.

  • $option->enable_autosave = true|false;
    자동저장기능을 사용할 것인지를 결정한다.

  • $option->enable_default_component = true|false;
    에디터에서 사용되는 기본 컴포넌트를 사용할 것인지 여부를 결정한다.

  • $option->enable_component = true|false;
    확장 컴포넌트를 사용할 것인지 여부를 결정한다.

  • $option->disable_html = true|false;
    html을 사용하게 할 것인지를 결정한다. 개인적으로 변수 이름이 조금 마음에 들지 않는데 차라리 use_html 이라고 하고 값을 invert 시켰으면 좋았을껄 하는 생각이 든다.

  • $option->height = 400;
    에디터의 기본 높이를 설정한다. 기본 값은 400px이다.

  • $option->skin = 'xpresseditor'|'dreditor';
    에디터의 스킨을 설정할 수 있다. XE를 설치하면 기본적인 에디터 스킨이 2개가 있는데 xpresseditor 와 dreditor 가 있다. 만약 다른 에디터 스킨을 설치했다면 여기서 선택하여 사용할 수 있다.

  • $option->colorset ='white'|'black'|'white_text_usehtml'|'black_text_usehtml'|'white_text_nohtml'|'black_text_nothml';
    컬러셋을 선택할 수 있다. 컬러셋은 스킨에서 결정한 녀석을 따르는데 xpresseditor 입장에서 설명하면 각 설정마다 다음의 성격을 가진다.
    • white: 하얀색 이지윅
    • black: 검은색 이지윅
    • white_text_usehtml: 하얀색 텍스트(html 사용)
    • black_text_usehtml: 검은색 텍스트(html 사용)
    • white_text_nohtml: 하얀색 텍스트(html 미사용)
    • black_text_nohtml: 검은색 텍스트(html 미사용)

  • $option->primary_key_name = 'document_srl';
    document_srl 등, 파일과 연결할 srl을 가지고 있는 input[type="hidden"] 엘리먼트의 name 속성을 지정한다. (하단에 상세 설명)

  • $option->content_key_name = 'content';
    내용을 저장할 컨텐트 input["hidden"] 엘리먼트의 name 속성을 지정한다. (하단에 상세 설명)


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

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

먼저 위의 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>

 

제목 글쓴이 날짜
프리 반응형 템플릿(html/css/js) 다운받을 수 있는 곳 [1] jhsongsh 2014.10.28
즐겨찾기 소스 - 파비콘등록 soroweb 2015.04.16
누리고 쇼핑몰 상품취소 혹은 반품시 마일리지 자동회복하기 [6] garnecia 2015.01.21
확장변수에 시분초 추가하기 [1] file 해떨 2015.04.15
JS로 IE 6,7,8 구분하기 [4] 키스투엑스이 2015.04.14
|웹폰트(네이버 맑은 고딕, 나눔고딕) 적용하기 [1] 다큰왕자 2014.03.18
나눔고딕 웹 폰트 적용하기. [10] 정찬명 2011.12.15
에디터에서 URL 클릭시 "http://" 삭제하는 방법 [2] 콜롬보. 2015.03.13
통합검색 사용 가부 설정 및 특정 그룹만 사용가능하게 제한 설정 기능 추가 - 보안이슈가 될 수 있는 부분 [1] sejin7940 2015.04.10
요청한 기능을 실행할 수 있는 권한이 없습니다. - 오류해결 file I-JEX 2015.04.10
댓글 새로고침 수정 [22] Lansi 2013.09.06
메인 로고 및 메인 이미지 변경 방법 [1] file okcashbag042 2015.04.08
웹 재요청 방지 및 트래픽 감소를 위한 방법 마루디자인 2015.04.06
setModule() 오류 발생시 qkrcjfgus33 2015.04.04
ie11에서 통합검색시 page가 바뀌면 검색키워드가 없어지거나 이상한 글자로 바뀌는 것에 대한 팁 garnecia 2015.04.03
[고급] 내 XE 모듈에 editor 삽입하기 [8] 개발해보쟈 2013.01.22
스케치북게시판 최신버전에 네이트온 /마이피플/플립보드 추가하는 방법 [4] file 가을풍경 2015.03.09
로고 만들기 귀찮을때^^* [1] 수백 2015.03.06
[스케치북5] 댓글 수정 간략화하기.. (새로고침 없이 하는 방법 추가) [16] file XE만세 2014.01.05
php 5.6에서 인증메일 SMTP 연결에 실패할때.. file 루비스코 2015.03.31