하고 싶은 일

직접 제작한 웹 애플리케이션도 Giithub처럼 그림문자를 입력할 수 있기를 희망

콜론(:) 시작할 때 편안한 조언도 해주고 싶다

그림 완성

※ 이 텍스트는 웹 채팅 애플리케이션'DevHub에서 가능한 한 그림문자에 대응하는 절차를 바탕으로 가장 짧은 노선에서 구현하는 방법을 기술하고 있습니다.알 수 없는 부분과 세부 사항은 모든 플러그인의 문서를 참고하십시오.

쓸것

emojify.js
http://hassankhan.github.io/emojify.js/
태그(입력 시 참조)
http://www.emoji-cheat-sheet.com/
jquery-textcomplete
http://yuku-t.com/jquery-textcomplete/

그림 문자 표시 허용

emojify.""헤더에서 js를 미리 읽습니다.
emoji에 사용할 스타일 css를 추가합니다.
표시할 그림의 크기와 위치에 따라 필요한 느낌으로 조정합니다.

.emoji {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin-bottom: 0.2em;
}

js의 초기 처리 근처에서emojify의 초기화를 기술합니다.
img_dir에서 그림 문자 이미지를 배치할 디렉터리를 지정합니다.

emojify.setConfig({
  img_dir : 'img/emoji', // Directory for emoji images
});

그림 문자를 표시하고 싶은 곳에서 get(0)은 그림 문자의 표시(:smiley: 등)를 포함하는 DOM, emojify입니다.먹이다(jQuery의 경우)
예를 들어 채팅의 경우 서버에서 채팅 문자열을 보내고 표시하는 곳에서 진행한다.

emojify.run($msg.get(0));

이로써 입력:smiley: 등의 텍스트가 그림 문자 이미지로 변환되어 표시됩니다.

제시할 수 있게 하다

직접 입력:smiley:하거나 블러셔에서 복사하는 것은 번거롭기 때문에 시작할 때 알림을 표시할 수 있습니다.
jquery-textcomplete.""헤더에서 js를 미리 읽습니다.
css에 힌트 표시 스타일 추가

.emoji-suggest {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin-bottom: -0.3em;
}

입력 창에 알림 기능 추가

<input type="text" id="message" placeholder="Message”/>

예를 들어, 이러한 입력 형식을 설정한 경우 #message에 textcommplete()를 적용합니다.

$('#message').textcomplete([
  {
    match: /\B:([\-+\w]*)$/,
    search: function (term, callback) {
      callback($.map(emojies, function (emoji) {
        return emoji.indexOf(term) === 0 ? emoji : null;
      }));
    },
    template: function (value) {
      return '<img class="emoji-suggest" src="img/emoji/' + value + '.png"></img> ' + value;
    },
    replace: function (value) {
      return ':' + value + ': ';
    },
    index: 1,
    maxCount: 8   // サジェストで表示する最大絵文字数
  }
]);

제안된 후보 선별 (search) 에 사용할 emojies 변수를 정의합니다.다음은 모든 그림 문자의 키를 배열하는 방식입니다.

var emojies = ["blush","scream","smirk","smiley","stuck_out_tongue_closed_eyes”, …

참조)https://github.com/yuku-t/jquery-textcomplete/blob/master/media/javascripts/emoji.js
※ 위의 이모지.그렇게 지도 모른다, 아마, 아마...
이렇게 하면 그림과 문자의 편안한 암시 생활을 할 수 있다