Extra Form
PHP PHP 7.3
CMS Rhymix

지금껏 댓글 달아주신걸 다시 읽어보고 해보다보니 질문을 잘못했다는걸 깨닫고 다시 질문해봅니다 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>&nbsp;</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>인데 처리를 어떻게 해야할지, 위 소스에 문제가 있는지 도와주시면 감사하겠습니다...

 

 

 

  • profile

    살짝 이해가 안가는게 db에 입력된대로 출력이 되는걸텐데 db에서 확인해 보셨나요? 어떤 식으로 댓글이 들어가고 있는지요. 출력되는 것만 보시는 것 같아서요.

  • profile ?
    &lt;p&gt;내용&lt;/p&gt; 이렇게 저장되는군요.. DB 확인을 안하고있었네요...
  • ? profile
    그러니까 지금 이전 게시글에서 계속 조언 주고 계신분들의 답변대로 안하고 계신 듯 합니다.
  • profile ?
    아직까지도.. 무엇이 문제인지 잘 모르겠습니다..
    <input type="hidden" name="use_editor" value="n" />
    <input type="hidden" name="use_html" value="n" />
    추가했고 조언해주신대로 하고있는거같은데..
  • profile
    비 개발자의 의견이니 참고만 해주시고 틀린부분이 있을 수 있습니다.

    제가 보기에는.

    에디터를 쓰지 않는 경우 기본적으로 html을 사용하지 않는 것으로 처리할 것입니다. 왜냐면 작성자가 에디터를 쓰지 않으면서 수동으로 html을 사용해서 글을 작성할 수는 없을 거니까요.

    그런데 지금 굉장히 특수하게 에디터를 쓰지 않는데 P 태그가 html로 사용되어야 합니다.
    <input type="hidden" name="use_html" value="n" /> 추가하신 이부분이 저는 이상해 보입니다.

    오히려 반대로 사용으로 하게끔 추가해야 할 것 같은 생각이 드는건 제가 지식이 짧아서 일지..

    왜냐면 지금 db에 들어갈때 html을 사용안하는 조건이 확인되면 코어에서는 먼저 댓글에서 보여주신 상태로 db 에 밀어 넣을 겁니다.

    그런데 위에 html을 사용하는 것으로 해서 추가해도 아마 제 생각에는 다른 부작용이 생길 것 같습니다.
    보통 에디터를 쓰지 않는 경우는 db에 넣을때 html을 쓰지 않는 것을 전제로 변환하여 집어 넣게 되어 방문자가 읽을때 정상적으로 보이게 될 것입니다. 그리고 글 수정할때는 db에서 가져와서 수정해서 form 전송할때도 또 고려사항이 몇가지 있을 거구요.

    단순히 지금 어디 위치에 p태그를 넣고 html을 사용하게끔 고쳐서 해도 뭔가 추가적인 조치가 필요해 보입니다.

    물론 지금 제가 이야기 한 것 전체 또는 일부가 엉터리 일 수 있습니다.
  • profile

    개인적으로 드리는 제안
    사이트 내 모든 곳에 에디터로 제공하고 textarea는 제공하지 않으면 어떨까 합니다.
    저희는 대부분 기능이 에디터 사용을 전제로 하고 있어 CK에디터 도입 시절 부터 모든 곳에 에디터 사용으로 고정해서 사용합니다.

    쪽지는 물론 서명 까지도 모두요.

    그리고 추가적으로 링크를 자동으로 소스로 변환해서 보여주는 것 때문에 매일 작업을 시도하시는데 사실 암호화되어 있는 자료라 정말 추천해드리기 곤란하지만 다른 자료가 없어서 추천을 해드리는데 에디터자동완성 모듈을 구매하셔서 글,댓글 작성 시 링크를 embed 소스로 바꿔서 저장하는 것을 제공하세요.

    저희가 이미 오래전 부터 시행하고 있는 부분이라 저희는 매우 편리하게 회원들이 이용합니다.

    그리고 글,댓글 모바일 구분없이 에디터만 사용해도 불편함이 1도 없습니다.

  • profile

    use_html = N, use_editor = N 인 상태로 댓글을 작성하면 <p>를 넣든 <br>을 넣든 라이믹스 코어가 알아서 합니다. 추가로 태그를 넣으려고 하면 이중 인코딩이 되어서 &lt;p&gt;내용&lt;/p&gt; 와 같은 현상이 발생합니다. 따라서 <p> 태그를 직접 추가하는 코드는 모두 삭제하셔야 합니다. use_html = N, use_editor = N 이것만 제대로 해두면 나머지는 순정상태 그대로 써도 아무 문제 없을 걸요? 코어가 알아서 해주는데 억지로 관여하려고 하면 고생합니다.

     

    굳이 <p> 태그를 직접 넣고 싶으시다면 use_html = Y, use_editor = Y 로 설정하셔야 HTML을 인식합니다.

  • profile ?
    <p> 태그를 직접 추가하는 코드는 모두 삭제된 원본에서 다시
    <input type="hidden" name="use_editor" value="n" />
    <input type="hidden" name="use_html" value="n" />
    만 추가해서 했는데 유튜브 링크를 남기던, 엔터를 치던 p태그가 붙지 않습니다..
  • ? profile

    아참, n이 아니라 N입니다.

  • profile ?
    <input type="hidden" name="use_editor" value="N" />
    <input type="hidden" name="use_html" value="N" />
    으로 해도 마찬가지 입니다 다만 달라진건 댓글에서 엔터를치고 다음줄에서 댓글을 입력해도

    예) a
    b
    c

    결과) abc
    로 나오긴합니다
  • ? profile
    DB에는 어떻게 저장되나요?
  • profile ?

    입력값 : t
    e
    s
    t

    DB저장값 : test
    입니다

     

    제가 잘못수정했나 싶어 html파일 첨부합니다..

     

    27,28번째줄입니다

    Atachment
    첨부
  • ? profile
    t e s t도 아니고 아예 공백없이 붙어 버린다면 다른 곳에서 문제가 있는 모양인데요.
  • profile ?

    지금사용하는 스킨에서
    <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태그가 붙어서 저장되었습니다

  • ? profile
    한가지 더 실험해 보지요. <p> 태그 붙이는 코드 원래대로 넣어두시고, use_html과 use_editor를 모두 Y로 바꿔보세요. 겉보기에만 textarea이지 실제로는 에디터인 척 해보는 거예요.
  • profile ?

    말씀해주신대로 진행해보았습니다

    <input type="hidden" name="use_editor" value="Y" />
    <input type="hidden" name="use_html" value="Y" />

     

     

    입력값 : ㅅㄷㄴㅅ
    ㅅㄷㄴㅅ

    db 저장값 : &lt;p&gt;ㅅㄷㄴㅅ&lt;/p&gt;<br />&lt;p&gt;ㅅㄷㄴㅅ&lt;/p&gt;

     

     

    수정파일 다시 첨부합니다

    Atachment
    첨부
  • ? profile
    <br />이 들어가는 것을 보니 줄바꿈은 되겠네요.
    그 상태에서 <p> 태그를 빼버리면 화면에 보이는 내용은 문제없지 않을까요?
  • profile ?
    아무것도 수정안하고 원본소스도 <br />은 붙습니다.. 제가 앞뒤에 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태그가 없으면 임베디드 모듈이 동작하지 않습니다
  • ? profile
    임베드 파싱모듈이 잘못했네요. 해당 모듈을 고치는 편이 훨씬 쉽겠습니다.
  • profile ?
    https://xetown.com/questions/1234525

    어제 개발자님 답변으로는 "p태그가 없으면 프리뷰(즉, 파싱 결과) 출력 위치 지정에 애로가 있었던 걸로 기억합니다.
    댓글에서도 p태그가 붙도록 위지윅에디터를 사용하거나, 일반 textarea를 사용하더라도 submit이벤트 등을 활용해 p태그가 생성되도록 하는 게 나을 것 같아요."

    "임베디드 파싱모듈이나 애드온에서 굳이 특수한 환경의 유저들때문에 구조를 바꾸기가 너무 힘듭니다.

    현재 글쓰기에서 사용되는 모든 방식은 P태그를 이용하고 있기 때문에 P태그를 참조하도록 하고 잇으며 그밖의 A태그를 이용한다고 해서 무작정 처리하도록 해드리기도 어렵고요.

    그밖의 autolink 애드온과같은 애드온의 의해서 변경된 정보에 대한 처리도 애매하고요.

    가장좋은건 기진곰님께서 제시한 방버을 활용해주시길 권장합니다.
    "
    라는 답변들을 보고 다시 시도했었는데 진퇴양난입니다 ㅠㅠ
  • ? profile

    현재 글쓰기에서 사용되는 모든 방식이 <p> 태그를 이용하고 있지는 않은데요;;; 모바일이나 댓글에서는 그냥 textarea를 이용하고 줄바꿈만 <br> 처리하는 경우가 훨씬 많잖아요. 코어에서도 아주 오래 전부터 지원해온 방식이고, 굳이 특수한 환경이 아닙니다.

    다양한 환경에서 작성된 내용의 줄바꿈 처리를 일관성있게 하는 것은 라이믹스 코어에서도 상당히 민감한 부분이라 (잘못 건드리면 다른 스킨에서 깨져나오거나 보안취약점이 발생할 수 있습니다) 위와 같이 use_html, use_editor 변수를 조정해 보는 것 외에는 더 복잡한 방법을 말씀드리기가 애매하네요. 지금은 되더라도 나중에 깨질 수 있으니...

    파싱모듈 개발자님께: <p> 태그가 없다면 nl2br 처리된 내용일 가능성이 높으니, 직후에 나오는 <br /> 태그를 </p> 와 동일하게 취급하고 그 밑에 프리뷰를 출력하면 될 것 같습니다.

    만약 이것이 불가능하다면 라이믹스 깃허브에 이슈를 하나 등록해 주시면 textarea로 내용을 입력하더라도 줄바꿈을 <br> 태그 대신 <p> 태그로 처리하도록 하는 기능을 추가하는 것을 검토해 보겠습니다.

  • profile ?
    네 답변 감사합니다! 한번 개발자분들 답변 확인해보고 안된다고 하면 이슈등록 하겠습니다 정말감사합니다..
  • profile profile
    저는 이 부분도 완벽한 대안이 될 수 없다고 생각했던게 뭐냐면 엔터 없이 그냥 한줄로 된 경우는 아마도 태그 자체가 없을 수도 있을 것 같다는 생각도 해봤습니다.
  • profile profile
    https://xetown.com/questions/1234764 블라블라 블라~
  • profile profile
    그러면 그냥 맨 끝에 한 줄 더 넣어서 프리뷰 출력하면 되지요.
  • profile profile
    그니까 회원들이 작성하는 경우 이 요령을 알기가 어렵다는거죠. 운영자나 회피 방법을 아는 경우는 엔터를 치거나 등의 뭔가 방법을 찾겠지만 불특정 다수가 사용하는 경우 이를 학습 시키기는 매우 어려워요.

    물론 안되는 케이스 하나를 가지고 성공,실패를 가늠할 필요는 없습니다. 다만 이런 경우도 있다는 거죠.
  • profile profile

    그니까 링크파싱 모듈이 알아서 적당한 위치에 프리뷰를 집어넣어 줘야죠. ㅎㅎ
    엔터 한번 치고 안 치고에 따라 작동 여부가 달라지면 곤란하잖아요.

  • profile profile
    문서나 댓글안에 p안쪽의 링크를 단위로 검출하는건데 저는 뭐 더 좋은 방법이 있다면 개선하는게 당연히 좋다고 생각합니다.
    js도 잘 몰라서 얼마나 어려운 기술인지 몰라서요..
  • profile
    추가로 조금 더 이야기 하자면
    스케치북 스킨을 쓰는 XE타운도 잘 보시면 댓글에서 textarea로 사용 가능합니다. 그런데 작성된 댓글을 수정해 보시면 에디터를 사용해 불러올 것입니다.

    이건 코어에서 textarea 에서 작성을해도 html 문법으로 잘 적용해서 db 에 밀어 넣어줍니다.
    그런데 이걸 다시 textarea 로 수정을 하려고 가져오면 태그가 그대로 노출이 됩니다.
    그래서 보통 textarea만 사용하는 경우는 글 수정시 별토의 스크립트로 수정할때 붙어진 html 소스를 다시 제거하는 등 추가작업도 필요해집니다.

    일단 하시려는 작업 자체가 무언지 대략 적으로 추측은 됩니다만..

    그냥 에디터만 쓰시는 방향이 제일 쉬워 보입니다.
  • profile
    오 논의가 꽤 있었네요;;;
    문득 꼼수가 생각나서 다시 들렀어요.

    - js 파일 상단에서
    - p태그를 수집하기 전에
    - 먼저 댓글의 코드를 분석해서
    - p태그가 없는 경우 p태그를 wrap 해주는 겁니다.
    - br태그가 있다면 그걸 기준으로 단락을 슬라이스하는 기분으로 p태그를 wrap하구요.
    => 그렇게 하면 댓글 콘텐트에서 url 수집할 때 p태그 기준으로 인식을 할 수 있겠다...

    뭐 대충 이런 아이디어예요.
    만약 이게 된다면 이슈는 코어가 아니라 모듈쪽으로 해야지 싶네요ㅎㅎ
  • profile profile
    저도 여러방법을 검토하고 있지만 딱히 방법이 떠오르지 않는다는게 함정이네요.

    결론적으로 에디터는 P태그안에 한줄씩 입력하는거에 비해 그게 아니면 안되니...
  • profile profile
    네ㅠㅠ 그래서 그냥 "댓글 출력시 그리고 링크 파싱 전"에 p태그를 씌워주는 꼼수도 괜찮지 않을까 싶어요.
    로딩에 약간 시간이 걸리겠지만요.

    그리고 여담이지만 결국 근본적인 해결방법은 에디터 입력 단계에서 프리뷰 카드를 생성해주는 게 제일이긴 한 것 같아요;;
  • profile profile
    애초에 링크파싱 애드온을 automantion 모듈처럼 에디터단위에서 링크를 확인해서 에디터에서 추가되어서 등록시 같이 등록하게 하는 방법이 깔끔하긴한데..ㅎㅎ