웹마스터 팁
xe 에디터를 외부페이지에사용하기
2012.07.11 10:20
xe에디터를 외부페이지에서사용하는방법
* 일반적인 생각
<?
$oEditorModel = &getModel('editor');
// 에디터 스킨 목록을 구함
Context::set('editor_skin_list', $oEditorModel->getEditorSkinList());
// 에디터를 받음
$option->primary_key_name = 'no';
$option->content_key_name = 'memo';
$option->allow_fileupload = true;
$option->enable_autosave = false;
$option->enable_default_component = true;
$option->enable_component = false;
$option->resizable = true;
$option->height = 300;
$option->skin = "default";
$editor = $oEditorModel->getEditor($row[no], $option);
// $editor->editor_sequence
?>
<form name="폼이름">
<input type="hidden" name="memo" id="memo" value="<?=htmlspecialchars($row[memo]))?>">
<?=$editor?>
</form>
;;;
이렇게 사용하시리라 밎습니다. 문제는 외부페이지에서 경로와 특수문자가 변경이 된다는 것입니다.
그래서 첨부나 태그가 이상하게 변한다는것이죠 그래서
<input type="hidden" name="memo" id="memo" value="<?=htmlspecialchars($row[memo]))?>">
다름에
<script type="text/javascript">
//<![CDATA[
var m = String;
m = "<?=str_replace("\n", "\\\n", htmlspecialchars($row[memo]))?>";
m = m.replace(/외부페이지의 경로/g, "");
m = m.replace(/&/g, '"');
m = m.replace(/"/g, '"');
m = m.replace(/'/g, '\'');
m = m.replace(/</g, '<');
m = m.replace(/>/g, '>');
폼이름.memo.value = m;
//]]>
</script>
을 추가해줍니다. 변환된 특수문자와 경로를 원래로 바꾸는것이죠
* 외부페이지의 경로는 xe가설치된곳부터 : 예) www밑에 2단하위에 있다면 "/1단폴더/2단폴더/" 를 "\/1단폴더\/2단폴더\/" 로 하면됩니다.
이상 모르는 분만 모르는 팁입니다.
댓글 26
-
정박사닷컴
2012.07.11 10:24
-
오락실주인
2012.07.11 13:20
에디터를외부페이지에서 사용을왜하죠??초보라 ㅜ -
정박사닷컴
2012.07.11 13:38
그이유는 웹프로그램을 만들다보면 xe에디터로 작동하는 부분이 필요할때도 있어요 db구조는 맘대로지만 xe자원인 에디터를 사용하는거죠 (프로그래머 맘입니다 ㅋㅋ) 첨부이미지를 본문에 넣는다던가 xe스타일로 하는게 좋아서요
다른에디터도 있지만 또 설정도하고 디자인도 안맞고 (대략귀차니즘) 에디터 업데이트되면 자동적용될것이고
기타여러가지 이유지요
-
오락실주인
2012.07.11 13:41
답변 감사합니다 ^^ -
윈컴이
2012.07.12 16:51
혹시 예제 없으신가요 ㅎㅎ -
정박사닷컴
2012.07.12 17:20
따로 예제보다는 실제 서비스를 하는중입니다.
첨부파일도 별도 처리하는데 잘만 활용하면 다른 에디터사용과 첨부넣는문제는 해결이되죠.
예를들어 간단한 (내용+첨부)받는 폼이 필요한데 게시판을 사용하기에는 불편한경우가 있죠(견적서라든가)
확장변수만들고 관리하고 따로 목록만들고 하는 등등이요
그리고 XE에디터는 첨부와 이미지 삽입니 편한데 이걸따로 만들려니 어렵고 그래서 찾다보니 이러한 방법을 찾게 되었지요
이것은 편집부분인데 저장부분도 따로 설정해주어야합니다. xe_files를 사용하거든요
메일주소를 주시면 일부소스를 드리지요
-
윈컴이
2012.07.12 22:19
오~ 감사합니다 :)
쪽지로 보내드릴까요? ^^;;
-
정박사닷컴
2012.07.13 18:23
메일은 보냈는데 확인했죠?
혹시잘안되면 만든소스를 메일로 보내주시면 점검해 드릴께요
-
윈컴이
2012.07.13 20:49
넵~ 확인했습니다 :)
한번 연습해볼께요 ^^
감사합니다~~
-
Hun
2012.07.17 15:40
글 잘 읽었습니다 :D
혹시 저도 예제를 볼 수 있을까요??
-
정박사닷컴
2012.07.17 17:53
메일로 보냈습니다.
-
Hun
2012.07.17 18:59
감사합니다^^;;;; 열심히 공부할게요!!
-
궁궁반점
2012.07.21 11:33
정말 꼭 필요한 소스인데 ㅠㅠ
제가 현재 확장변수를 이용하여 게시판을 사용하고 있거든요...
근데 이 확장변수(여러개 사용중)들중 몇개의 확장변수만 에디터를 달아서 사용하고 싶어요 ㅠㅠ
그래서 이 소스를 이용해서 어떻게 해보려고 하는데 잘 안되네요 ㅠㅠ 저도 예제소스좀 받을 수 있을까요?ㅠㅠ
그리고 확장변수에 xe에디터를 달아서 사용이 가능한건지 ㅠㅠ....?답변주시면 감사하겠습니다!!!
-
궁궁반점
2012.07.21 17:13
지금 상태는 write_form.html에서 {$extra_keys[1]->getFormHTML()}을 이용하면 확장변수입력폼이 나와서 거기에 글을 쓰고있거든요
근데 이 게시판이 문제가 글씨 색깔도 넣어야하고 밑줄도 그어야하고 크기도 조절을해야하는데
html 태그를 사용해서 작성하면 가능하기야하지만...너무 불편하여 확장변수 입력폼에 에디터를 설치하려고 하거든요..
그래서 이글에 나와있는 소스를 응용해서 해보려고하는데...잘안되네요...
제가 한 방법은..write_form.html 에서 {$extra_keys[1]->getFormHTML()} 소스를 뺴버리고
<?
$oEditorModel = &getModel('editor');// 에디터 스킨 목록을 구함
Context::set('editor_skin_list', $oEditorModel->getEditorSkinList());// 에디터를 받음
$option->primary_key_name = 'no';
$option->content_key_name = 'memo';
$option->allow_fileupload = true;
$option->enable_autosave = false;
$option->enable_default_component = true;
$option->enable_component = false;
$option->resizable = true;
$option->height = 300;
$option->skin = "default";
$editor = $oEditorModel->getEditor($row[no], $option);
// $editor->editor_sequence
?><?=$editor?>
이런식으로 이글에 나와있는 소스를 그대로 적용하면 에디터가 표시됩니다.
그리고 form태그를 적용하는데
<input type="hidden" name="memo" id="memo" value="{htmlspecialchars($extra_keys[1]->getvalueHTML())}" cond="$extra_keys[1]->getValueHTML()" />
이렇게 작성하여서 넣어주었거든요.
그러니 에디터에 확장변수1의 값이 표시가 됩니다.
근데 그 내용을 수정하여 넣으면 내용 수정이 안되네요...(에디터에 쓴 내용은 DB에 저장이 안되는것 같습니다)
에디터에 작성한 내용이 확장변수1의 값에 저장되게 해야할 것 같은데...어떻게 해야 할지를 모르겠네요.
도와주시면 감사하겠습니다!!
-
정박사닷컴
2012.07.21 22:16
이문제는 같은 에디터보다는 네이버 스마트 에디터로 사용하는방법을 써서 만든 스킨을 보내드렸습니다.
활용에 도움이 되었으면 합니다.
만들어 보내느라 시간이좀 걸렸습니다.
-
똑디
2014.12.12 01:59
아..혹시 저도 이 자료 좀 받아 볼 수 있을까요?
-
새벽들녁
2012.07.22 08:41
이렇게도 가능하군요. 정박사닷컴님 저도 실행되는 예제를 제 네이버 메일로 보내주실 수 있는지요. 메일호스트는 꼬~~옥^^ 부탁드립니다.
-
정박사닷컴
2012.07.23 00:44
메일보냈습니다.
-
궁궁반점
2012.07.22 10:07
보내주신 소스 정말 감사합니다.
어느정도 진전이 된것 같은데 write_form.html파일에서
<form action="./" method="post" onsubmit="return _onSEdocsave(this);" id="fo_write" class="boardWrite">
이부분에서 onsubmit값이 잘못되었는지 글 등록을 해도 등록이 안됩니다 ㅠㅠ
다른 게시판 스킨은 보면 해당 부분이
<form action="./" method="post" onsubmit="jQuery(this).find('input').each(function(){if(this.title==this.value)this.value='';});return procFilter(this, window.insert)" id="fo_write" class="boardWrite">
이렇게 되어있는데 무슨문제인지 모르겠습니다....
다른스킨처럼 onsubmit값을 수정해버리면 글 등록이 되긴하는데 확장변수의 값이 또 저장이 안되는 문제가 발생하구요 ㅠㅠ
도와주시면 감사하겠습니다!
-
궁궁반점
2012.07.22 10:13
해결했습니당...
form부분은 다른게시판 처럼
<form action="./" method="post" onsubmit="jQuery(this).find('input').each(function(){if(this.title==this.value)this.value='';});return procFilter(this, window.insert)" id="fo_write" class="boardWrite">
이렇게 수정하고
submit버튼에 onclick="_onSEdocsave(this)"를 주니까 되는군요!!
정박사님 정말 감사합니다 은혜 잊지않겠습니다!!!!!!!!!!!!!!!!!!!!!!!!!!
-
궁궁반점
2012.07.22 10:54
ㅠㅠ되긴하지만 확장변수가 1개밖에 적용이 안되는군요....
2개이상의 확장변수를 이용하려면 어떻게 해야 할까요........
<script type="text/javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "extra_vars1", <-여기를 확장변수2를 추가하여 밑에처럼 수정하니....elPlaceHolder: "extra_vars1", "extra_vars2" <- /.............. 안되네요.
sSkinURI: "/_direct/SE2/SmartEditor2Skin.html",
fCreator: "createSEditor2"
});
function _onSEdocsave(obj){
// 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다.
oEditors.getById["extra_vars1"].exec("UPDATE_CONTENTS_FIELD", []); <이부분 역시oEditors.getById["extra_vars2"].exec("UPDATE_CONTENTS_FIELD", []); <이렇게 2줄을 써도 안되고...ㅠㅠ
return procFilter(obj, window.insert)
}
</script>혹시 아는분계씬가요..??
-
정박사닷컴
2012.07.22 14:44
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "extra_vars1",
sSkinURI: "/_direct/SE2/SmartEditor2Skin.html",
fCreator: "createSEditor2"
});nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "extra_vars2",
sSkinURI: "/_direct/SE2/SmartEditor2Skin.html",
fCreator: "createSEditor2",
});** 이런식으로 하면됩니다.
아래에 글 추출하는건 잘하신겁니다.
-
궁궁반점
2012.07.24 11:01
감사합니다! 원하는데로 모두 구현했습니다 복받으십시오!!
-
정박사닷컴
2012.07.24 11:07
축하합니다.
-
속삭이는비
2013.01.09 15:01
음
-
ZBXE_GOOD
2013.11.22 16:26
궁궁반점님 처럼 확장변수 에디터 사용으로 엄청 헤매고 있습니다.
해결 하신 거 같은데 예제 도움을 받고 싶습니다.
이방법은 에디터 함수가 실행되기전에 실행되는것이 중요합니다.