댓글/방명록 이모티콘 - 장려하기?

어차피 댓글도 잘 안달리는데 이모티콘이 무슨 소용이겠냐만...ㅠㅠ

 

공식 이모티콘 플러그인이랍시고 고작  :)  ;)  :P  8D  :(  --;  6개만 지원하는데 뭔 의미가 있겠냐만...

 

 

그래도!! 이모티콘 플러그인을 사용중이라면,

(즉, 관리 > 플러그인에서 [댓글/방명록 이모티콘 표시] 플러그인을 활성화했다면!)

 

댓글 쓰는 사람에게 이를 알려주고, 더 나아가 편리하게 이모티콘을 입력할 수 있게 해주면 좋겠죠?!!!

 

Why not?! ㅋ

적용 방법

스킨편집 > html 편집 > html 내용중에 댓글/방명록 입력폼 두곳을 찾아 아래처럼 코드를 추가합니다.

<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요. 이미지나 링크는 주소만 적으시면 됩니다."></textarea>
<div id="emoticons">이모티콘: 
	<img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon06.gif" alt=":)" title=":)">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon01.gif" alt=";)" title=";)">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon02.gif" alt=":P" title=":P">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon03.gif" alt="8D" title="8D">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon04.gif" alt=":(" title=":(">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon05.gif" alt="--;" title="--;"> 
</div>

....
....
....

<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 방명록을 남겨주세요. 이미지나 링크는 주소만 적으시면 됩니다."></textarea>
<div id="emoticons">이모티콘: 
	<img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon06.gif" alt=":)" title=":)">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon01.gif" alt=";)" title=";)">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon02.gif" alt=":P" title=":P">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon03.gif" alt="8D" title="8D">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon04.gif" alt=":(" title=":(">
    <img onclick="emo(this);" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-9145617b7f59e1648c23cdde263817d31266cbdd/blogs/plugins/EmoticonOnComment/emoticon05.gif" alt="--;" title="--;"> 
</div>

....
....
....

<script>
function emo(img) {
  var TA = img.parentNode.previousElementSibling;
  var T = TA.value;
  var textBefore = '';
  var textAfter = '';
  if (img.tagName == "IMG") {
    textBefore = ' ' + img.alt + ' ';
    textAfter = '';
  }
  if (document.selection) {
    TA.focus();
    document.selection.createRange().text = textBefore + document.selection.createRange().text + textAfter;
  } else if (TA.selectionStart || TA.selectionStart == '0') {
    var startPos = TA.selectionStart;
    var endPos = TA.selectionEnd;
    TA.value = T.slice(0, startPos) + textBefore + T.slice(startPos, endPos) + textAfter + T.slice(endPos);
    TA.focus();
    TA.selectionStart = startPos + textBefore.length;
    TA.selectionEnd = endPos + textBefore.length;
  }
}
</script>

....
....
....

</body>

잘보시면 <textarea name="[샾샾_rp_input_comment_샾샾]" 이것과 <textarea name="[샾샾_guest_textarea_body_샾샾]" 두 곳을 찾아 그 아래에 이모티콘 이미지들을 넣어 주었습니다. (샾샾은 ## 으로 교체해서 이해 해주세요.)

 

그리고 밑으로 더 내려가 </body> 위에 클릭을 처리할 <script> 도 추가해주었네요.

 

끝으로 스타일도 CSS 에 추가 해줍니다.

div#emoticons {
  font-size: 13px; color: #999; user-select: none; margin-bottom: 10px;
}
div#emoticons img, div#emoticons span {
  cursor:pointer; border: 0; margin: 0 4px; vertical-align: top;
}

모두 저장 및 적용 후 댓글/방명록 입력창을 확인해 보시면 아래처럼 되어 있을 거고요, 각 이미지를 클릭하면 입력창에 해당 텍스트가 삽입됩니다.

 

 

끝~

 

보너스

글 쓸때나 댓글이나 아무 곳이나 글 입력되는 곳이라면 모두 가능한 건데요...

윈도우 10 쓰신다면! 윈도우 키와 . (마침표) 를 같이 누르면 이모티콘 입력창이 나타납니다!

 

오~ 요건 최근에 알게되었음 ㅋ