Skip to content

Instantly share code, notes, and snippets.

@ardianzzz

ardianzzz/1kb editor

Last active October 28, 2016 09:12
Show Gist options
  • Save ardianzzz/8037651 to your computer and use it in GitHub Desktop.
Save ardianzzz/8037651 to your computer and use it in GitHub Desktop.
Download ZIP
1Kb HTML5 WYSWYG Editor
Raw
1kb editor
<html>
<head>
<title>1Kb HTML5 WYSWYG Editor</title>
<style>
.control {
margin:0 0 8px;
}
#editable {
padding:10px;
border:solid 1px #ccc;
min-height:8em;
}
#txtLen {
margin:8px 0 0;
text-align:right;
}
</style>
</head>
<body>
<div class="control">
<button onclick="document.execCommand('bold',null,false);" accesskey="b">
<b>Bold</b>
</button>
<button onclick="document.execCommand('italic',null,false);" accesskey="i">
<i>Italic</i>
</button>
<button onclick="document.execCommand('insertUnorderedList',null,false);">
Ul
</button>
<button onclick="document.execCommand('insertOrderedList',null,false);">
Ol
</button>
</div>
<div id="editable" contenteditable="true" onfocus="countChars()" onkeydown="countChars()" onkeyup="countChars()" spellcheck="false">
Write something...
</div>
<div id="txtLen">20000</div>
<script type="text/javascript">
function countChars() {
var l = "20000";
var str = document.getElementById("editable").textContent;
var len = str.length;
document.getElementById("txtLen").textContent=l-len;
if(len > l) document.getElementById("txtLen").style.color='red';
else
document.getElementById("txtLen").style.color='';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment