<textarea> 태그에서 p태그 처리하기
| CMS/프레임워크 | Rhymix 1.9 |
|---|---|
| 개발 언어 | PHP 7.3 |
지금껏 댓글 달아주신걸 다시 읽어보고 해보다보니 질문을 잘못했다는걸 깨닫고 다시 질문해봅니다 xe에서 제공하는 textare를 사용하는게 아니라 <textarea> 태그를 사용하고 있습니다.
우선 textarea 태그에 댓글작성시 <p>내용</p> 까지는 성공하였는데
질문은 submit 할때 태그 처리를 어떻게 해야할지를 모르겠습니다.
<form action="./" method="post" class="cmt_form" onsubmit="return procFilter(this, insert_comment)">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
<input type="hidden" name="comment_srl" value="" />
<input type="hidden" name="content" value="" />
<div class="cmt_write_form">
<div class="textarea_wrap<!--@if($mi->cmt_write_type == 'E')--> editor_ver<!--@else-->
text_ver<!--@end-->">
<!--@if($mi->cmt_write_type == 'E')-->
{$oDocument->getCommentEditor()}
<!--@else-->
<input type="hidden" name="use_editor" value="n" />
<input type="hidden" name="use_html" value="n" />
<input type="hidden" id="htm_{$oDocument->document_srl}" value="n" />
<textarea id="editor_{$oDocument->document_srl}" cols="50" rows="4" placeholder=
"댓글 내용을 입력해주세요."></textarea>
<script type="text/javascript">
function setTextareaReplace() {
var str = document.getElementById("editor_{$oDocument->document_srl}").value;
if (str == '') {
alert("{sprintf($lang->filter->isnull, $lang->content)}");
return false;
}
<!--@if($mi->comment_write_textarea_p_tag == '')-->
str = "<p>" + str.replace(/(?:\r\n|\r|\n)/g, "</p>\r\n<p>") + "</p>";
var str3 = replaceAll(str,"<p></p>", "<p> </p>")
<!--@else-->
str = str.replace(/(?:\r\n|\r|\n)/g, "<br>");
<!--@end-->
jQuery("#editor_{$oDocument->document_srl}").val(str3);
};
function replaceAll(str, searchStr, replaceStr) {
return str.split(searchStr).join(replaceStr);
}
editorStartTextarea({$oDocument->document_srl}, "content", "comment_srl");
</script>
<!--@end-->
</div>
</div>
<div class="cmt_write_ex">
<div class="bt_area">
<button class="bt_box bt_color" type="submit" onclick="setTextareaReplace();">
{$_lang_cmt_submit}</button>
</div>
</div>
</form>
질답에 필요한 부분만 축약해 올린 소스입니다.
texterare 에 "내용"입력후 전송버튼을 누르면 onclick="setTextareaReplace()"로 <p>내용</p>로 전송되어
<p>내용</p>로 표시됩니다.
원하는결과는 p태그가 문자가아닌 태그로 처리되어 표출은 "내용" html로 확인시 <p>내용</p>인데 처리를 어떻게 해야할지, 위 소스에 문제가 있는지 도와주시면 감사하겠습니다...
스포
Lv. 5
댓글 33
살짝 이해가 안가는게 db에 입력된대로 출력이 되는걸텐데 db에서 확인해 보셨나요? 어떤 식으로 댓글이 들어가고 있는지요. 출력되는 것만 보시는 것 같아서요.
<input type="hidden" name="use_editor" value="n" />
<input type="hidden" name="use_html" value="n" />
추가했고 조언해주신대로 하고있는거같은데..
제가 보기에는.
에디터를 쓰지 않는 경우 기본적으로 html을 사용하지 않는 것으로 처리할 것입니다. 왜냐면 작성자가 에디터를 쓰지 않으면서 수동으로 html을 사용해서 글을 작성할 수는 없을 거니까요.
그런데 지금 굉장히 특수하게 에디터를 쓰지 않는데 P 태그가 html로 사용되어야 합니다.
<input type="hidden" name="use_html" value="n" /> 추가하신 이부분이 저는 이상해 보입니다.
오히려 반대로 사용으로 하게끔 추가해야 할 것 같은 생각이 드는건 제가 지식이 짧아서 일지..
왜냐면 지금 db에 들어갈때 html을 사용안하는 조건이 확인되면 코어에서는 먼저 댓글에서 보여주신 상태로 db 에 밀어 넣을 겁니다.
그런데 위에 html을 사용하는 것으로 해서 추가해도 아마 제 생각에는 다른 부작용이 생길 것 같습니다.
보통 에디터를 쓰지 않는 경우는 db에 넣을때 html을 쓰지 않는 것을 전제로 변환하여 집어 넣게 되어 방문자가 읽을때 정상적으로 보이게 될 것입니다. 그리고 글 수정할때는 db에서 가져와서 수정해서 form 전송할때도 또 고려사항이 몇가지 있을 거구요.
단순히 지금 어디 위치에 p태그를 넣고 html을 사용하게끔 고쳐서 해도 뭔가 추가적인 조치가 필요해 보입니다.
물론 지금 제가 이야기 한 것 전체 또는 일부가 엉터리 일 수 있습니다.
개인적으로 드리는 제안
사이트 내 모든 곳에 에디터로 제공하고 textarea는 제공하지 않으면 어떨까 합니다.
저희는 대부분 기능이 에디터 사용을 전제로 하고 있어 CK에디터 도입 시절 부터 모든 곳에 에디터 사용으로 고정해서 사용합니다.
쪽지는 물론 서명 까지도 모두요.
그리고 추가적으로 링크를 자동으로 소스로 변환해서 보여주는 것 때문에 매일 작업을 시도하시는데 사실 암호화되어 있는 자료라 정말 추천해드리기 곤란하지만 다른 자료가 없어서 추천을 해드리는데 에디터자동완성 모듈을 구매하셔서 글,댓글 작성 시 링크를 embed 소스로 바꿔서 저장하는 것을 제공하세요.
저희가 이미 오래전 부터 시행하고 있는 부분이라 저희는 매우 편리하게 회원들이 이용합니다.
그리고 글,댓글 모바일 구분없이 에디터만 사용해도 불편함이 1도 없습니다.
use_html = N, use_editor = N 인 상태로 댓글을 작성하면 <p>를 넣든 <br>을 넣든 라이믹스 코어가 알아서 합니다. 추가로 태그를 넣으려고 하면 이중 인코딩이 되어서 <p>내용</p> 와 같은 현상이 발생합니다. 따라서 <p> 태그를 직접 추가하는 코드는 모두 삭제하셔야 합니다. use_html = N, use_editor = N 이것만 제대로 해두면 나머지는 순정상태 그대로 써도 아무 문제 없을 걸요? 코어가 알아서 해주는데 억지로 관여하려고 하면 고생합니다.
굳이 <p> 태그를 직접 넣고 싶으시다면 use_html = Y, use_editor = Y 로 설정하셔야 HTML을 인식합니다.
<input type="hidden" name="use_editor" value="n" />
<input type="hidden" name="use_html" value="n" />
만 추가해서 했는데 유튜브 링크를 남기던, 엔터를 치던 p태그가 붙지 않습니다..
아참, n이 아니라 N입니다.
<input type="hidden" name="use_html" value="N" />
으로 해도 마찬가지 입니다 다만 달라진건 댓글에서 엔터를치고 다음줄에서 댓글을 입력해도
예) a
b
c
결과) abc
로 나오긴합니다
입력값 : t
e
s
t
DB저장값 : test
입니다
제가 잘못수정했나 싶어 html파일 첨부합니다..
27,28번째줄입니다
지금사용하는 스킨에서
<input type="hidden" name="use_editor" value="N" />
<input type="hidden" name="use_html" value="N" /> 말고 따로 수정한곳은 없습니다 원래는 use_editor 없이
<input type="hidden" name="use_html" value="Y" /> 하나만있었고 이상태에서는
t
e
s
t
하면은 db에서는 br태그가 붙어서 저장되었습니다
말씀해주신대로 진행해보았습니다
<input type="hidden" name="use_editor" value="Y" />
<input type="hidden" name="use_html" value="Y" />
입력값 : ㅅㄷㄴㅅ
ㅅㄷㄴㅅ
db 저장값 : <p>ㅅㄷㄴㅅ</p><br /><p>ㅅㄷㄴㅅ</p>
수정파일 다시 첨부합니다
그 상태에서 <p> 태그를 빼버리면 화면에 보이는 내용은 문제없지 않을까요?
https://xetown.com/index.php?mid=point_contents&search_keyword=%ED%8C%8C%EC%8B%B1&search_target=title_content&document_srl=729179
임베드 파싱모듈이 p태그 안에있는 링크만 인식해서 댓글에 p태그가 없으면 임베디드 모듈이 동작하지 않습니다
어제 개발자님 답변으로는 "p태그가 없으면 프리뷰(즉, 파싱 결과) 출력 위치 지정에 애로가 있었던 걸로 기억합니다.
댓글에서도 p태그가 붙도록 위지윅에디터를 사용하거나, 일반 textarea를 사용하더라도 submit이벤트 등을 활용해 p태그가 생성되도록 하는 게 나을 것 같아요."
"임베디드 파싱모듈이나 애드온에서 굳이 특수한 환경의 유저들때문에 구조를 바꾸기가 너무 힘듭니다.
현재 글쓰기에서 사용되는 모든 방식은 P태그를 이용하고 있기 때문에 P태그를 참조하도록 하고 잇으며 그밖의 A태그를 이용한다고 해서 무작정 처리하도록 해드리기도 어렵고요.
그밖의 autolink 애드온과같은 애드온의 의해서 변경된 정보에 대한 처리도 애매하고요.
가장좋은건 기진곰님께서 제시한 방버을 활용해주시길 권장합니다.
"
라는 답변들을 보고 다시 시도했었는데 진퇴양난입니다 ㅠㅠ
현재 글쓰기에서 사용되는 모든 방식이 <p> 태그를 이용하고 있지는 않은데요;;; 모바일이나 댓글에서는 그냥 textarea를 이용하고 줄바꿈만 <br> 처리하는 경우가 훨씬 많잖아요. 코어에서도 아주 오래 전부터 지원해온 방식이고, 굳이 특수한 환경이 아닙니다.
다양한 환경에서 작성된 내용의 줄바꿈 처리를 일관성있게 하는 것은 라이믹스 코어에서도 상당히 민감한 부분이라 (잘못 건드리면 다른 스킨에서 깨져나오거나 보안취약점이 발생할 수 있습니다) 위와 같이 use_html, use_editor 변수를 조정해 보는 것 외에는 더 복잡한 방법을 말씀드리기가 애매하네요. 지금은 되더라도 나중에 깨질 수 있으니...
파싱모듈 개발자님께: <p> 태그가 없다면 nl2br 처리된 내용일 가능성이 높으니, 직후에 나오는 <br /> 태그를 </p> 와 동일하게 취급하고 그 밑에 프리뷰를 출력하면 될 것 같습니다.
만약 이것이 불가능하다면 라이믹스 깃허브에 이슈를 하나 등록해 주시면 textarea로 내용을 입력하더라도 줄바꿈을 <br> 태그 대신 <p> 태그로 처리하도록 하는 기능을 추가하는 것을 검토해 보겠습니다.
물론 안되는 케이스 하나를 가지고 성공,실패를 가늠할 필요는 없습니다. 다만 이런 경우도 있다는 거죠.
그니까 링크파싱 모듈이 알아서 적당한 위치에 프리뷰를 집어넣어 줘야죠. ㅎㅎ
엔터 한번 치고 안 치고에 따라 작동 여부가 달라지면 곤란하잖아요.
js도 잘 몰라서 얼마나 어려운 기술인지 몰라서요..
스케치북 스킨을 쓰는 XE타운도 잘 보시면 댓글에서 textarea로 사용 가능합니다. 그런데 작성된 댓글을 수정해 보시면 에디터를 사용해 불러올 것입니다.
이건 코어에서 textarea 에서 작성을해도 html 문법으로 잘 적용해서 db 에 밀어 넣어줍니다.
그런데 이걸 다시 textarea 로 수정을 하려고 가져오면 태그가 그대로 노출이 됩니다.
그래서 보통 textarea만 사용하는 경우는 글 수정시 별토의 스크립트로 수정할때 붙어진 html 소스를 다시 제거하는 등 추가작업도 필요해집니다.
일단 하시려는 작업 자체가 무언지 대략 적으로 추측은 됩니다만..
그냥 에디터만 쓰시는 방향이 제일 쉬워 보입니다.
문득 꼼수가 생각나서 다시 들렀어요.
- js 파일 상단에서
- p태그를 수집하기 전에
- 먼저 댓글의 코드를 분석해서
- p태그가 없는 경우 p태그를 wrap 해주는 겁니다.
- br태그가 있다면 그걸 기준으로 단락을 슬라이스하는 기분으로 p태그를 wrap하구요.
=> 그렇게 하면 댓글 콘텐트에서 url 수집할 때 p태그 기준으로 인식을 할 수 있겠다...
뭐 대충 이런 아이디어예요.
만약 이게 된다면 이슈는 코어가 아니라 모듈쪽으로 해야지 싶네요ㅎㅎ
결론적으로 에디터는 P태그안에 한줄씩 입력하는거에 비해 그게 아니면 안되니...
로딩에 약간 시간이 걸리겠지만요.
그리고 여담이지만 결국 근본적인 해결방법은 에디터 입력 단계에서 프리뷰 카드를 생성해주는 게 제일이긴 한 것 같아요;;