스케치북 게시판 모바일에서 댓글 수정할때 무조건 웹 에디터 사용하도록 수정하기
이건 제가 방금 올린 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줄 정도 됩니다.)
지워야 하는 코드를 옮겨 보면 다음과 같습니다. (클릭하면 열립니다.)
<!-- 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
저도 글쓰기를 textarea 지정하고 본문 내용의 팁만 적용을 하면
댓글쓸때는 textarea 화면이 표시되고 댓글 작성 후 수정 화면에서는 팁대로 무조건 에디터가 보여지긴 합니다만 위의 아싸리 방가님 처럼 수정 후에는 태그가 노출되고 있습니다. ㅠ.ㅠ
https://github.com/xpressengine/xe-core/pull/1495 모바일에서 태그 노출되는 팁도 적용해봤는데 마찬가지입니다. ^^;;
뭔가 다른 원인 때문인거 같네요... 전 실력이 없어서 모르겠습니다. 고수분들이 도와주셔야 할거 같네요
제가 한거라곤 https://xetown.com/square/121781 팁 적용을 한것 밖엔 없는데...
이팁을 원래 대로 적용하지 않고 해봐도 댓글 수정 시 각종 태그가 노출되네요.
천천히 시간을 두고 한번 다시 해볼게요.
이거 한번 해보세요. 정확하게 저게 원인인지는 모르겠습니다만