포럼
댓글창을 <textarea>로 만들고<br> 자동입력
2011.04.10 16:28
얼마 전에 방명록 보완하면서 방명록은 한번에 보는 글 수도 많아
문서 하나하나마다 에디터로 불러오면 너무 브라우저 로딩이 심하길래
<textarea>로 댓글입력창을 교체했습니다.
댓글을 에디터 불러옴 없이 <textarea> 이렇게 한줄로 처리하니 가볍고 좋았는데.. 근데..
글을 쓰고 엔터를 쳐도 글입력시에는 엔터로 줄바꿈이 되지만, 정작 등록된 글은 엔터없이 띄어쓰기만 되네요.
예를 들면, 'aaa (엔터) bbb' 라고 입력하면 입력 후 본문 글에서는 'aaa bbb' 이렇게 보입니다.
----------
해결하려고 다음의 방법을 뒤져봤는데..
1. xpresseditor 의 'html 사용없이 자동줄바꿈' 이란 기능을 보고 나름 js 등 같은 방식(?)으로 구현.
2. 모바일 스킨은 <textarea>로 글 입력하는데 줄바꿈이 되길래 따라해봤더니 -> 모바일스킨 코드를 그대로 일반 스킨 코드로 가져와도 모바일 보기에서는 줄바꿈이 되고, 일반 웹브라우저 보기에서는 줄바꿈이 안되네요.. 아무리 봐도 차이를 모르겠는데 ㅠ.ㅠ
3. 소셜XE -> 아래 난다날아님 답변처럼 n2br php함수(?)
------------
<우선 1번의 방법으로 해결함>
- 아래 코드는 xpresseditor의 textarea.js 부분에서 가져와 필요한 부분만 수정한 겁니다.
php을 제가 몰라 일단 당장 보이는 에디터를 건드렸는데,
너무 비효율적인 것 같아 다른 분들의 의견을 듣고자 합니다.
php로 간단히 처리하는 방법이 있다면 알려주심 감사하겠습니다.
ps. 그리고 모바일 스킨에서는 특별한 코드없이 줄바꿈이 되는 데요, 이유를 알 수 있을까요? 이유가 답이겠죠? ^^;;
--------- 이하 수정한 코드 ------------
1. view_document.html 댓글창 부분
2. board.js 에 다음 추가
-----------
문서 하나하나마다 에디터로 불러오면 너무 브라우저 로딩이 심하길래
<textarea>로 댓글입력창을 교체했습니다.
댓글을 에디터 불러옴 없이 <textarea> 이렇게 한줄로 처리하니 가볍고 좋았는데.. 근데..
글을 쓰고 엔터를 쳐도 글입력시에는 엔터로 줄바꿈이 되지만, 정작 등록된 글은 엔터없이 띄어쓰기만 되네요.
예를 들면, 'aaa (엔터) bbb' 라고 입력하면 입력 후 본문 글에서는 'aaa bbb' 이렇게 보입니다.
----------
해결하려고 다음의 방법을 뒤져봤는데..
1. xpresseditor 의 'html 사용없이 자동줄바꿈' 이란 기능을 보고 나름 js 등 같은 방식(?)으로 구현.
2. 모바일 스킨은 <textarea>로 글 입력하는데 줄바꿈이 되길래 따라해봤더니 -> 모바일스킨 코드를 그대로 일반 스킨 코드로 가져와도 모바일 보기에서는 줄바꿈이 되고, 일반 웹브라우저 보기에서는 줄바꿈이 안되네요.. 아무리 봐도 차이를 모르겠는데 ㅠ.ㅠ
3. 소셜XE -> 아래 난다날아님 답변처럼 n2br php함수(?)
------------
<우선 1번의 방법으로 해결함>
- 아래 코드는 xpresseditor의 textarea.js 부분에서 가져와 필요한 부분만 수정한 겁니다.
php을 제가 몰라 일단 당장 보이는 에디터를 건드렸는데,
너무 비효율적인 것 같아 다른 분들의 의견을 듣고자 합니다.
php로 간단히 처리하는 방법이 있다면 알려주심 감사하겠습니다.
ps. 그리고 모바일 스킨에서는 특별한 코드없이 줄바꿈이 되는 데요, 이유를 알 수 있을까요? 이유가 답이겠죠? ^^;;
--------- 이하 수정한 코드 ------------
1. view_document.html 댓글창 부분
<form action="./" method="post" onsubmit="jQuery(this).find('input').each(function(){if(this.title==this.value)this.value='';});return procFilter(this, insert_comment)" editor_sequence="{$oDocument->document_srl}">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
<input type="hidden" name="comment_srl" value="" />
<textarea id="editor_{$oDocument->document_srl}" name="content"></textarea>
<input type="submit" value="{$lang->cmd_registration}" />
</div>
</form>
<script type="text/javascript">
editorStartTextarea({$oDocument->document_srl}, "content", "comment_srl");
</script>2. board.js 에 다음 추가
var editorRelKeys = new Array();
function editorStartTextarea(editor_sequence, content_key, primary_key) {
var obj = xGetElementById('editor_'+editor_sequence);
obj.form.setAttribute('editor_sequence', editor_sequence);
editorRelKeys[editor_sequence] = new Array();
editorRelKeys[editor_sequence]["primary"] = obj.form[primary_key];
editorRelKeys[editor_sequence]["content"] = obj.form[content_key];
editorRelKeys[editor_sequence]["func"] = editorGetContentTextarea;
var content = obj.form[content_key].value;
content = content.replace(/<br([^>]*)>/ig,"\n");
content = content.replace(/</g, "<");
content = content.replace(/>/g, ">");
content = content.replace(/"/g, '"');
content = content.replace(/&/g, "&");
obj.value = content;
}
function editorGetContentTextarea(editor_sequence) {
var obj = xGetElementById('editor_'+editor_sequence);
var content = obj.value.trim();
content = content.replace(/&/g, "&");
content = content.replace(/</g, "<");
content = content.replace(/>/g, ">");
content = content.replace(/\"/g, """);
content = content.replace(/(\r\n|\n)/g, "<br />");
return content;
}
-----------
댓글 4
-
SMaker
2011.04.10 16:53
nl2br() 함수로 개행문자를 <br /> 태그로 바꿔줘야 정상적으로 나타납니다. -
hika1
2011.04.10 17:23
SMaker님, 감사합니다~ ^^ 티비 보면서 고수분이 나타나기를 계속 기다렸네요 ^^;;
$abc = nl2br(data[abc]); 요런 것도 네이버에서 봤는데 제가 php를 모르니 아무리 삽질해도 어떻게 적용할지를 모르겠어요.
조금만 더 알려주심 정말 감사하겠습니다. ㅠ.ㅠ
ps. '소셜xe'나 '모바일 스킨' 보면 요런 코드 없이도 줄바꿈이 되던데 그건 어떤 방식으로 구현하는 건가요? -
난다날아
2011.04.11 02:07
SocialXE도 nl2br() 해주고 있습니다. 그리고 이렇게 스킨 단에서 수정하시는 것 보단... 게시판 추가 설정에서 에디터 종류를 textarea 자동줄바꿈으로 하는 것이 낫지 않나요? -
hika1
2011.04.11 19:34
그러네요, 다시 보니 그 함수가 있네요. 어제 br 검색했더니 brief 인가만 잔득 나온던데 ^^;
굳이 에디터 대신 이렇게하려는 이유가 몇 가지 있지만 가장 큰 이유는 위와 같은 댓글창 디자인 때문이에요.
등록버튼을 옆에 넣고 싶은데 일반 에디터(스킨을 혼자 쓰면'expresseditor html사용안함 모드'로 쓰겠지만, 배포자료라서 이렇게 안쓰실 분이 더 많을 것 같아서요)로 하면 영역이 좁아져서요. 그냥 옵션을 주기로 했어요.
우선 xpresseitor를 게시판 스킨의 댓글창으로 이식(?)하긴 했는 데 어째 비효율적인 것 같아서요 ㅎㅎ
(그래도 에디터를 불러오는 것보다는 가벼울테지만요..)
ps. 게시판 스킨 만들면서 소셜xe스킨 만들었던 게 버전업 된 후로 작동이 안해서;; 다시 손봤는데,
버전업될 때마다 손이 안가게 css만 바꾸는 방향으로 하기로 했어요.. ^^;