그누보드 - 댓글에 이모티콘 넣는 게시판

댓글에 이모티콘 넣는 게시판 정보

게시판 댓글에 이모티콘 넣는 게시판

첨부파일

comment_emoticon.zip (2.0M) 92회 다운로드 2021-12-07 16:05:46

테스트한 버전5.4.18

호환 가능 버전5.4

본문

1. 첨부파일 압축을 풀고

1) emoticon 폴더는 bbs 폴더로 업로드합니다.

2) pc 와 mobile 폴더에 있는 view.skin.php 와 view_comment.skin.php 의 2개파일은 각각 pc게시판과 모바일 게시판으로 따로 업로드하거나 덮어씌우기 합니다.

-------------------

2. basic 과 gallery 즉 그누의 기본 스킨을 기준으로 만들었습니다.

광분 커스텀 하신 분들은 본인들이 잘 맞추셔야 합니다.ㅜㅠ

-------------------

3. view_comment.skin.php 의 추가 코드입니다. basic 스킨에서 pc와 모바일 모두


<?php if ($comment_min || $comment_max) { ?><script> check_byte('wr_content', 'char_count'); </script><?php } ?>

위의 부분을 찾아 그 아래에 다음의 코드를 주가해 줍니다.


<!--  댓글 이모티콘 옵션 시작 : wittazzurri -->
<div class="frm_input full_input" style=background-color:#eeeeee;border-top:none;display:flex;justify-content:center;align-items:center>
    <strong style=color:#3a8afd;cursor:pointer onclick=emoticonDiv.style.display='block'>[ 이모티콘 열기 ]</strong>
    <strong style=color:#c00000;cursor:pointer;margin-left:10px onclick=emoticonDiv.style.display='none'>[ 이모티콘 닫기 ]</strong>
</div>
<div id=emoticonDiv style=display:none>
    <table id=emoticonTable class="frm_input full_input" style=width:100%;border-top:none cellpadding=0 cellspacing=0>
        <td>
            <?php
            $emoticon_image = "";
            $emoticon_list = opendir(G5_PATH."/bbs/emoticon");
            while ($emoticon_file = readdir($emoticon_list)) if ($emoticon_file != "." && $emoticon_file != "..") $emoticon_image = $emoticon_image."'$emoticon_file',";
            closedir($emoticon_list);
            ?>
            <script>
            emoticonGroup =[<?php echo substr($emoticon_image, 0, -1); ?>];
            emoticonGroup.sort();
            emoticonSize = ("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? "20%" : "10%";
            for (emoticon in emoticonGroup) {
                document.write("<img id=emoticon_" + emoticon + " style=width:" + emoticonSize + ";float:left;cursor:pointer;object-fit:cover src=<?php echo G5_URL; ?>/bbs/emoticon/" + emoticonGroup[emoticon] + ">");
                this["emoticon_" + emoticon].onclick = function() {
                    this.cutUrl = this.src.split("/");
                    wr_content.value = wr_content.value + "[*" + this.cutUrl[this.cutUrl.length - 1] + "*]";
                }
            }
            </script>
        </td>
    </table>
</div>
<!--  /댓글 이모티콘 옵션 종료 : wittazzurri -->

--------------------

4. view.skin.php 의 추가코드입니다. basic 스킨에서...

pc와 모바일 모두 가장 하단에 다음의 코드를 첨가합니다.


<!--  댓글 이모티콘 옵션 시작 : wittazzurri -->
<script>
commentEmoticon = document.getElementsByClassName("cmt_contents");
for (vci = 0; vci < commentEmoticon.length; vci++) commentEmoticon[vci].innerHTML = commentEmoticon[vci].innerHTML.replace(/\[\*/gi, "<img src=<?php echo G5_URL; ?>/bbs/emoticon/").replace(/\*\]/gi, ">");
</script>
<!--  /댓글 이모티콘 옵션 종료 : wittazzurri -->

--------------------

5. 이모티콘 열기 버튼 클릭하면 모두 112개의 이모티콘이 나타납니다.

출처는... https://karaeff.tistory.com/401

가로 세로 모두 130픽셀입니다. pc에서는 10개씩 모바일에서는 5개씩 정렬됩니다.

글쓰기 중 이모티콘 창에서 원하는 이미지를 클릭하세요.

글쓰기창에 [*037.gif*] 형태로 나타납니다.

물론 결과창에서는 이미지로 바뀌어집니다.

31846119_1638859983.1813.jpg

-------------------

6. 모달창 또는 스크롤 기능을 붙이고 싶으신 분은 해당되는 부분을 찾아서 커스텀해 주세요.

emoticon 폴더는 bbs 폴더외의 곳에 넣고 싶은 분들은 그렇게 하시고 코드에서 경로부분을 찾아 바꿔주세요.

단 경로를 바꿀 경우 opendir 로 디렉토리를 흔들 때는 꼭 상대주소를 써야 합니다.

5.4 버전 기준으로 크롬과 안드로이드에서만 확인하였고 테마나 빌더는 배려하지 않고 그누 순정에서 작업하였습니다.

------------------

7. 댓글 작성시에도 이모티콘이 보이게 div 에 contenteditable=true 를 주고 작업하다가...

div 의 innerHTML 에서 textarea 의 value 로 넘길 때 일정패턴의 치환이 필요해서 그건 해결했는데...

글 수정시 textarea 의 value 를 div 의 innerHTML 에서 다시 넘겨 받을 때 문자열의 패턴이 상상외로 이상하게 변화되어 넘어오기에 모든 경우의 수를 다 망라하는 파싱을 하려면 시간이 좀 필요할 것 같습니다.

거기에 보안적으로 걸러야 할 부분도 있고 해서 머리가 약간 복잡해 지더라구요.

완성되면 공유할게요.

댓글 전체

DawnDew 자기소개 아이디로 검색 전체게시물 회원게시물

댓글에 이모티콘 넣는 게시판 > 그누보드5 스킨

그누보드5 스킨

관련링크

첨부파일

본문

댓글 전체

회원로그인

로그인