example/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title></title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" href="../jquery.emojiarea.css">
		<link rel="stylesheet" href="stylesheet.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="../jquery.emojiarea.js"></script>
		<script src="../packs/basic/emojis.js"></script>
	</head>
	<body>
		<h1>jquery.emojiarea.js Example</h1>
		
		<div class="example">
			<h2>Plain-Text</h2>
			<form><textarea rows="5" class="emojis-plain">Hello :neckbeard:</textarea></form>
		</div>
		
		<div class="example">
			<h2>WYSIWYG</h2>
			<form><textarea rows="5" class="emojis-wysiwyg">Hello :neckbeard:</textarea></form>
			<h3>Value:</h3>
			<div class="value"><pre id="emojis-wysiwyg-value"></pre></div>
		</div>
		
		<script>
		$('.emojis-plain').emojiarea({wysiwyg: false});
		
		var $wysiwyg = $('.emojis-wysiwyg').emojiarea({wysiwyg: true});
		var $wysiwyg_value = $('#emojis-wysiwyg-value');
		
		$wysiwyg.on('change', function() {
			$wysiwyg_value.text($(this).val());
		});
		$wysiwyg.trigger('change');
		</script>
	</body>
</html>