rcmiller/gist:7403374

## gistfile1.html
<html>

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  <title>Emoji Rebus Editor</title>
    <!--<link rel="stylesheet" href="emojify.min.css">-->
    <!--<script src="emojify.js"></script>-->

    <style>
        .emojify{
                width:1.5em;height:1.5em;display:inline-block;margin-bottom:-0.25em
        }
        .block {
            display: inline-block;
            margin: 5px;
            vertical-align: top;
        }
        #editor {
            width: 150px;
            height: 34px;
            vertical-align: center;
            border: 1px solid lightBlue;
            margin: 10px;
            padding: 5px;
            font-size: 18pt;
            font-family: sans-serif;
        }
    </style>

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="emoji.js"></script>
    <script>
        function makeImageUrl(name) {
            return "http://www.emoji-cheat-sheet.com/graphics/emojis/" + name + ".png"
        }

        $(function() {
            var grid = $("#emojiGrid")
            var block, row

            var i = 0
            for (var i in emojiNames) {
                var name = emojiNames[i]

                if (i % 25 == 0) {
                    block = $("<div class='block'></div>")
                    grid.append(block)
                }
                if (i % 5 == 0) {
                    row = $("<div class='row'></div>")
                    block.append(row)
                }

                var icon = $("<img></img>", {
                    "class": "emojify " + name,
	            "data-name": name,
                    "unselectable": "on",
                    "src": emojiURLs[name],
                    "title": name
                })
                row.append(icon)
                ++i
            }

            $(".emojify").on("click", function() {
                var name = $(this).attr("data-name")
                var url = $(this).attr("src")
                document.execCommand("insertImage", false, url)
                var sel = window.getSelection();
                var range = sel.getRangeAt(0);
                var img = range.startContainer.childNodes[range.startOffset-1];
                $(img).css("width", 24).css("height", 24).attr("data-name", name)
                $("#editor").focus()
            })

            $("#editor").focus()
        })
    </script>

</head>

<body>

    <div id="editor" contenteditable>
    </div>

    <div id="emojiGrid">
    </div>
</body>
</html>
	<html>

	<head>
	<meta charset="utf-8" />
	<meta content="width=device-width, initial-scale=1" name="viewport" />
	<title>Emoji Rebus Editor</title>
	<!--<link rel="stylesheet" href="emojify.min.css">-->
	<!--<script src="emojify.js"></script>-->

	<style>
	.emojify{
	width:1.5em;height:1.5em;display:inline-block;margin-bottom:-0.25em
	}
	.block {
	display: inline-block;
	margin: 5px;
	vertical-align: top;
	}
	#editor {
	width: 150px;
	height: 34px;
	vertical-align: center;
	border: 1px solid lightBlue;
	margin: 10px;
	padding: 5px;
	font-size: 18pt;
	font-family: sans-serif;
	}
	</style>

	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script src="emoji.js"></script>
	<script>
	function makeImageUrl(name) {
	return "http://www.emoji-cheat-sheet.com/graphics/emojis/" + name + ".png"
	}

	$(function() {
	var grid = $("#emojiGrid")
	var block, row

	var i = 0
	for (var i in emojiNames) {
	var name = emojiNames[i]

	if (i % 25 == 0) {
	block = $("<div class='block'></div>")
	grid.append(block)
	}
	if (i % 5 == 0) {
	row = $("<div class='row'></div>")
	block.append(row)
	}

	var icon = $("<img></img>", {
	"class": "emojify " + name,
	"data-name": name,
	"unselectable": "on",
	"src": emojiURLs[name],
	"title": name
	})
	row.append(icon)
	++i
	}

	$(".emojify").on("click", function() {
	var name = $(this).attr("data-name")
	var url = $(this).attr("src")
	document.execCommand("insertImage", false, url)
	var sel = window.getSelection();
	var range = sel.getRangeAt(0);
	var img = range.startContainer.childNodes[range.startOffset-1];
	$(img).css("width", 24).css("height", 24).attr("data-name", name)
	$("#editor").focus()
	})

	$("#editor").focus()
	})
	</script>

	</head>

	<body>

	<div id="editor" contenteditable>
	</div>

	<div id="emojiGrid">
	</div>
	</body>
	</html>