Emoticons-js

Emoticons-js is a jquery plugin to insert emojis, font smileys, embed videos (youtube/vimeo), media files,pdf and highlight code syntax.

Features

• Converts emoticon text codes into emoticons 
• Finds links in text input and turns them into html links.
• Youtube and Vimeo video embedding
• HTML5 player supported media embedding (mp3,mp4,ogg)
• PDF viewing with preview and then the actual pdf in a frame.
• Inline Code Syntax highlighting (uses highlight.js)

Source: rkritesh.in

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="path/to/jquery.emoticons.css"/>
<script src="path/to/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="path/to/jquery.emoticons.js"></script>

2. HTML

<div id="element">
  <div> Some content here </div>
  <div> Some content here </div>
  ...
  ...
</div>

3. JAVASCRIPT

$('#element').emoticons({
    ytAuthKey : 'xxxxxxxx'
});

4. OPTIONS

$('#element').emoticons({
      //Instructs the library whether or not to embed urls
      link              : true,
      //same as the target attribute in html anchor tag . supports all html supported target values.
      linkTarget        : '_blank',
      //Array of extensions to be excluded from converting into links
      linkExclude       : ['jpg','pdf'],
      //set true to show a preview of pdf links
      pdfEmbed          : true,
      //set true to embed images
      imageEmbed        : true,
      //set true to embed audio
      audioEmbed        : false,
      //set true to show a preview of youtube/vimeo videos with details
      videoEmbed        : true,
      //set true to show basic video files like mp4 etc. (supported by html5 player)
      basicVideoEmbed   : true,
      //width of the video frame (in pixels)
      videoWidth        : 640,
      //height of the video frame (in pixels)
      videoHeight       : 390,
      //( Mandatory ) The authorization key obtained from google's developer console for using youtube data api
      ytAuthKey         : 'xxxxxxx',
      //Instructs the library whether or not to highlight code syntax.
      highlightCode     : true,
      //callback before pdf preview
      beforePdfPreview  : function(){},
      //callback after pdf preview
      afterPdfPreview   : function(){},
      // callback on video frame view
      onVideoShow:function(){},
      //callback on video load (youtube/vimeo)
      onVideoLoad:function(){}

});