팁/튜토리얼

스케치북 게시판 모바일에서 댓글 수정할때 무조건 웹 에디터 사용하도록 수정하기

2015.11.24 03:20
7,541
5

이건 제가 방금 올린 https://xetown.com/lakepark/92029 이거랑 일부 연관이 되는 글입니다.

 

스케치북 게시판 모바일에서 댓글 수정할때 나오는 에디터는 "모바일 글쓰기 에디터"를 따라갑니다.

 

즉 모바일에서 글쓰기창에 textarea를 사용하기로 했을 경우 댓글 수정할때도 textarea를 불러옵니다.

 

근데 이게 문제가 있는데, 만약 그 댓글이 "에디터 모드"에서 작성된 댓글일 경우, P 태그 때문에 엄청난 띄어쓰기 테러가 일어나고, 만약 html태그가 걸려 있을 경우 태그관광이 발생합니다.

 

특히, 위 링크의 팁을 적용해서 모바일에서도 에디터로 댓글을 쓸 수 있게 해 놨을 경우 더욱 문제가 됩니다.

 

해결방법은 두가지가 있는데, 하나는 모바일 글쓰기 에디터를 웹 에디터로 (웹 에디터는 ckeditor 사용) 바꾸는 것이고

 

두번째는 지금 이 글을 적용하는 것입니다.

 

참고로 저는, 모바일에서 에디터 로딩속도 문제랑 기타 몇 가지 문제 때문에 textarea를 사용하고 있습니다. 따라서 이 글의 방법을 이용해서, 글쓰기 에디터와 별개로 댓글을 수정할때는 무조건 ckeditor를 불러오도록 해서 해결하고 있습니다.

 

 

 

 

comment_form.html 파일을 열고

 

내리다 보면 <!--// 댓글 수정화면 --> 라고 되어 있는 부분이 있는데 그 부분을 보면

 

 <div cond="!Mobile::isMobileCheckByAgent() || $mi->m_editor==3" class="get_editor">{$oComment->getEditor()}</div>

 

이런 부분이 있습니다. (뜻은, PC로 접속했거나 또는 모바일 글쓰기 에디터가 "웹 에디터"일 경우 웹 에디터를 불러오라는 것입니다.)

 

이 부분을, <div class="get_editor">{$oComment->getEditor()}</div> 이렇게 바꿔줍니다.

 

그리고 그 이하에 <div cond="Mobile::isMobileCheckByAgent() && $mi->m_editor!=3" class="m_editor"> 이 부분이 있는데

 

이 div 태그가 감싸고 있는 모든 구문을 과감하게 삭제합니다. (약 46줄 정도 됩니다.)

 

지워야 하는 코드를 옮겨 보면 다음과 같습니다. (클릭하면 열립니다.)
 

<div cond="Mobile::isMobileCheckByAgent() && $mi->m_editor!=3" class="m_editor">
<!-- Textarea -->
<block cond="$mi->m_editor==2">
<load target="../../../editor/tpl/js/editor_common.min.js" />
<load target="../../../editor/skins/xpresseditor/js/xe_textarea.min.js" />
<input type="hidden" name="use_html" value="Y" />
<input type="hidden" id="htm_1" value="n" />
<textarea id="editor_1" col="50" rows="8"></textarea>
<script>
editorStartTextarea(1,"content","document_srl");
</script>
</block>
<!-- WYSIWYG -->
<block cond="!$mi->m_editor">
<load target="css/m_editor.css" />
<load target="js/editor_wysiwyg.js" />
<load target="js/bootstrap-wysiwyg.js" />
<load target="js/jquery.hotkeys.js" />
<div id="alerts"></div>
<div class="btn-toolbar clear" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
<a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
<!--//
<a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
-->
</div>
<div class="btn-group hide_w320">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
<!--//<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>-->
</div>
<div class="btn-group fr">
<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
</div>
<div class="blind"><input type="text" data-edit="inserthtml" id="inserthtml" /></div>
</div>
<div id="editor"><p> </p></div>
</block>
</div>

 

 

 

이렇게 하면, 모바일에서 글쓰기 에디터를 무엇으로 설정했든지 간에, 댓글을 수정할때는 무조건 웹 에디터를 불러옵니다.

댓글 18

  • 2015.11.24 04:14 #92106
    와.. 이거 어떻게해야하나 했는데ㅠㅠ 꿀팁이네요 추천쾅!!!@.@ 바로 적용하러
  • 2015.12.02 12:49 #103663
    엄청 유용합니다 꿀팁
  • 2016.01.25 08:28 #156705
    ㅠㅠ감사합니다 드디어 해결입니다.
  • 2016.01.26 02:38 #157470
    이렇게 수정해서 웹에디터를 불러와도 수정하면 태그가 붙네요 ㅠㅠ
  • 2016.01.26 07:17 #157906
    그건 다른 문제인거 같네요. 전 안 일어나서 잘 모르겠는데 몇몇 분들의 경우 모바일에서 태그노출되는 문제를 겪고 질문 올리신 것들이 있습니다. xe타운에서 검색하면 나올테니 그거 찾아보세요
  • 2016.01.28 17:45 #160553
    혹시 댓글수정창을 에디터가 아닌 기본 textarea로 바꿀수는 없나요?
  • 2016.01.28 23:06 #160588
    이 팁을 적용 안하고 설정에서 textarea라고 하면 textarea입니다.
  • 2016.01.29 01:57 #160710

    저도 글쓰기를 textarea 지정하고 본문 내용의 팁만 적용을 하면 
    댓글쓸때는 textarea 화면이 표시되고 댓글 작성 후 수정 화면에서는 팁대로 무조건 에디터가 보여지긴 합니다만 위의 아싸리 방가님 처럼 수정 후에는 태그가 노출되고 있습니다. ㅠ.ㅠ
     

  • 2016.01.29 02:04 #160729

    https://github.com/xpressengine/xe-core/pull/1495 모바일에서 태그 노출되는 팁도 적용해봤는데 마찬가지입니다. ^^;;

  • 2016.01.29 05:28 #160926
    모르겠네요... 전 태그노출 팁 적용 안해도 태그노출이 안됩니다

    뭔가 다른 원인 때문인거 같네요... 전 실력이 없어서 모르겠습니다. 고수분들이 도와주셔야 할거 같네요
  • 2016.01.29 11:01 #161338
    답변 감사합니다.
    제가 한거라곤 https://xetown.com/square/121781 팁 적용을 한것 밖엔 없는데...
    이팁을 원래 대로 적용하지 않고 해봐도 댓글 수정 시 각종 태그가 노출되네요.
    천천히 시간을 두고 한번 다시 해볼게요.
  • 2016.02.10 13:04 #175260
    댓글 수정하면 태그가 붙어서 불편했었는데 넘 감사해요!
  • 2016.10.20 15:32 #402981
    저도 그대로 따라했는데도 안고쳐지네요...
  • 2016.10.20 18:50 #403103
    아까 댓글다신거 보니 모바일에 파일첨부 찾으시는거 같은데 이건 "댓글 수정"할때 에디터 불러오는 겁니다. 댓글 쓸때 에디터 불러오려면 settings 파일 수정해야 합니다. 이것도 제가 올렸는지 다른분이 올렸는지 xe타운에 있으니 찾아보시면 나올겁니다
  • 2016.10.20 18:54 #403107
    예 물론 다른 글 보고 에디터는 불러왔습니다. 제가 안된다고 한건 이 것을 적용했는데도 모바일 환경에서 수정시 글이 엉망이 되는 현상은 여전하다는 뜻이었습니다.
  • 2016.10.20 18:55 #403115
    https://xetown.com/qna/402860

    이거 한번 해보세요. 정확하게 저게 원인인지는 모르겠습니다만
  • 2016.10.20 19:21 #403121
    너무 복잡해서 일단 원상태로 죄다 되돌렸지만 추후 시도해보겠습니다.
  • 2022.03.17 09:50 #1666649
    pc버전같은 경우에도 강제로 ck에디터를 쓰도록 하는 방법이 있을까요? 스킨설정에서 에디터로 변경을 해도 사용자가 직접 에디터를 선택해주지 않으면 textarea로 잡히더라구요