Skip to content

Instantly share code, notes, and snippets.

@lmiller1990

lmiller1990/editor.coffee

Created February 1, 2018 16:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lmiller1990/d2ac25a3fd8fb0be6856ef941cd0a86c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lmiller1990/d2ac25a3fd8fb0be6856ef941cd0a86c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
editor.coffee
initDoc = ->
editor = document.getElementById('editor')
defText = editor.innerHTML
setDocMode() if document.compForm.switchMode.checked
window.editor = editor
formatDoc = (cmd, val) ->
document.execCommand(cmd, false, val)
editor.focus()
addControl = (val, parent) ->
el = document.createElement 'button'
el.addEventListener 'mouseenter', () -> formatDoc 'fontsize', val
label = document.createTextNode val
el.appendChild label
parent.appendChild el
load = ->
parent = document.getElementById('font-size-controls')
controls = [1..10]
addControl control, parent for control in controls
document.addEventListener 'DOMContentLoaded', load
window.formatDoc = formatDoc
window.innerHTML = initDoc
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="lib/execCommand.js"></script>
<title></title>
</head>
<body>
<div onload="initDoc()" style="height: 500px; border: 1px dotted silver">
<button onclick="formatDoc('bold')">
I
</button>
<div style="display: flex;" id="font-size-controls">
<div onmouseenter="formatDoc('fontsize', 6)">6</div>
</div>
<div id="editor" contenteditable>
This is editable
</div>
</div>
</body>
</html>
<!doctype html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment