<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/font-awesome/3.2.0/css/font-awesome.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/emojionearea/2.1.4/css/emojionearea.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/emojionearea/2.1.4/js/emojionearea.js"></script>
<link href="https://cdn.bootcss.com/emojione/2.2.4/assets/css/emojione.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/emojione/2.2.4/lib/js/emojione.min.js"></script>
</head>
<body>
<div id="example2">
Lorem ipsum dolor ? sit amet, consectetur ? adipiscing elit, ? sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua ?.
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#example2").emojioneArea();
});
</script>
</body>
</html>Reference:
https://mervick.github.io/emojionearea/